/* --- Product Detail Styles (New #products) --- */
/* Main Image */
#products .main-pro-img { width: 100%; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 40px rgba(6, 21, 57, 0.1); margin-bottom: 30px; background-color: #e6f0fa; }
#products .main-pro-img img { width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 16/9; }

/* Sub Images Gallery */
#products .sub-pro-img { margin-bottom: 40px; }
#products .sub-pro-img ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 15px; flex-wrap: wrap; }
#products .sub-pro-img li { flex: 0 0 calc(25% - 11.25px); border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(6, 21, 57, 0.08); cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 2px solid transparent; }
#products .sub-pro-img li:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 168, 255, 0.2); border-color: #00a8ff; }
#products .sub-pro-img .photo { display: block; width: 100%; aspect-ratio: 4/3; background-size: cover; background-position: center; position: relative; }
#products .sub-pro-img .photo::after { content: '\f00e'; font-family: 'FontAwesome'; position: absolute; inset: 0; background: rgba(6, 21, 57, 0.6); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 24px; opacity: 0; transition: opacity 0.3s ease; }
#products .sub-pro-img .photo:hover::after { opacity: 1; }
#products .sub-pro-img .photo img { display: none; }

/* Tabs Navigation */
#products .prod-art .pro-article { margin-bottom: 30px; border-bottom: 2px solid #eef2f6; }
#products .prod-art .tabs { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }
#products .prod-art .tabs li {flex: 1 1 auto;text-align: center;border-radius: 13px 13px 0 0;}
#products .prod-art .tabs li a { display: block; padding: 15px 25px; font-size: 16px; font-weight: 700; color: #7f8c8d; text-decoration: none; border-radius: 12px 12px 0 0; background-color: #f4f7fb; transition: all 0.3s ease; position: relative; overflow: hidden; }
#products .prod-art .tabs li a::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #00a8ff, #0056b3); transform: scaleX(0); transition: transform 0.3s ease; transform-origin: left; }
#products .prod-art .tabs li.active a, #products .prod-art .tabs li:hover a { color: #ffffff; background: linear-gradient(135deg, #061539, #132b5e); }
#products .prod-art .tabs li.active a::before, #products .prod-art .tabs li:hover a::before { transform: scaleX(1); }

/* Tab Content */
#products .prod-art .tab_container {padding: 35px;border-radius: 0 0 20px 20px;border: 1px solid #eef2f6;border-top: none;font-size: 16px;color: #555555;line-height: 2;margin-bottom: 40px;}
#products .prod-art .tab_content { display: none; animation: fadeIn 0.5s ease-in-out; }
#products .prod-art .tab_content#tab1{
    display: flex;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* CTA Button */
#products .prod-art .ask { text-align: center; margin: 40px 0; }
#products .prod-art .ask a { display: inline-block; padding: 16px 45px; font-size: 18px; font-weight: 800; color: #ffffff; background: linear-gradient(90deg, #00a8ff, #0056b3); border-radius: 50px; text-decoration: none; box-shadow: 0 10px 25px rgba(0, 168, 255, 0.3); transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; overflow: hidden; z-index: 1; }
#products .prod-art .ask a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #061539, #132b5e); z-index: -1; transition: opacity 0.3s ease; opacity: 0; }
#products .prod-art .ask a:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(6, 21, 57, 0.2); }
#products .prod-art .ask a:hover::before { opacity: 1; }

/* Related Services (Others) */
#products .others { margin-top: 60px; padding-top: 40px; border-top: 1px dashed #eef2f6; }
#products .others .h2-style { font-size: 24px; font-weight: 800; color: #061539; margin-bottom: 30px; position: relative; padding-left: 15px; }
#products .others .h2-style::before { content: ''; position: absolute; left: 0; top: 15%; height: 70%; width: 5px; background-color: #00a8ff; border-radius: 5px; }
#products .others ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 25px; list-style: none; padding: 0; margin: 0; }
#products .others li { background-color: #ffffff; border-radius: 20px; box-shadow: 0 10px 25px rgba(6, 21, 57, 0.05); overflow: hidden; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); border: 1px solid #eef2f6; display: flex; flex-direction: column; }
#products .others li:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(6, 21, 57, 0.1); border-color: #00a8ff; }
#products .others .productPhoto { width: 100%; aspect-ratio: 4/3; overflow: hidden; position: relative; }
#products .others .photo { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); }
#products .others li:hover .photo { transform: scale(1.10); }
#products .others .photo img { display: none; }
#products .others .photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 21, 57, 0.6) 0%, transparent 60%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
#products .others li:hover .photo::after { opacity: 1; }
#products .others .h3-style { padding: 20px 15px; text-align: center; flex: 1; display: flex; align-items: center; justify-content: center; margin: 0; background-color: #ffffff; position: relative; z-index: 2; }
#products .others .info { font-size: 16px; font-weight: 700; color: #061539; text-decoration: none; transition: color 0.3s ease; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
#products .others li:hover .info { color: #00a8ff; }


#ad-list .bxslider { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
#ad-list .photo { display: block; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 25px rgba(6, 21, 57, 0.1); transition: transform 0.3s ease; background-color: #e6f0fa; background-size: cover; background-position: center; height: 180px; position: relative; }
#ad-list .photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 21, 57, 0.4), transparent); opacity: 0; transition: opacity 0.3s ease; }
#ad-list .photo:hover { transform: translateY(-5px); }
#ad-list .photo:hover::after { opacity: 1; }
#ad-list .photo img { display: none; }

@media (max-width: 992px) {
#products .sub-pro-img li { flex: 0 0 calc(33.333% - 10px); }
#products .prod-art .tabs li { flex: 1 1 100%; }
#products .prod-art .tabs li a { border-radius: 8px; margin-bottom: 5px; }
#products .prod-art .tab_container {border-radius: 20px;border: 1px solid #eef2f6;padding: 0;}
}
@media (max-width: 576px) {
#products .sub-pro-img li { flex: 0 0 calc(50% - 7.5px); }
#products .others ul { grid-template-columns: 1fr; }
}