@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');


body
{
    font-family: 'Nunito Sans',sans-serif;
    font-size: 14px;
/*    padding: 0;*/
/*    margin: 0;*/
}

ul
{
/*    padding: 0;*/
/*    list-style: none;*/
}

a
{
    text-decoration: none;
}
a:hover
{
    outline: none;
}


:root
{
    --fa-primary-color:#fff;
    --theme-main:#011877;
}
/* ==========================================
1. TOPBAR & GRADIENT BACKGROUND
========================================== */
 .topbar {
    /* Đổ màu gradient 3 điểm chéo theo đúng sắc độ ảnh đính kèm */
    background: #fff;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Icon mạng xã hội dạng TRÒN HOÀN TOÀN */
.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #ffffff;
    color: #011877; /* Màu icon đồng bộ với tone xanh */
    border-radius: 50%; /* Định dạng tròn xoe */
    margin-left: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 16px;
    border: solid 1px #011877;
}
        
.social-icons a:hover {
    background-color: #002d74;
    color: #ffffff;
}
/* ==========================================
 2. MAIN NAVBAR
========================================== */
.main-navbar {
/*    background: linear-gradient(150deg, #61B6E1 0%, #0766BA 50%, #000F6F 100%);*/
    background-color: #01207E;
/*    padding: 12px 0;*/
    box-shadow: 0 4px 20px rgba (0, 0, 0, 0.15);
/*    position: relative;*/
}
.main-navbar
{
    position: sticky;
    z-index: 100;
    top: 0;
}
.navbar-brand
{
    margin-right:0;
    padding: 0 0;
}
.navbar-brand img {
    max-height: 80px;
}

.nav-link {
    font-weight: 700;
    color: #ffffff !important;
    text-transform: uppercase;
    padding: 0 15px !important;
    transition: color 0.3s;
}

.nav-link.active, .nav-link:hover {
    color: #3caecb !important; /* Màu xanh của logo */
}

.nav-link

{
    font-size: 18px;
}
/* Nút kích hoạt Search dạng kính lúp */
.search-trigger-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    padding: 5px 10px;
    transition: transform 0.2s;
}

.search-trigger-btn:hover {
    transform: scale(1.1);
}

/* ==========================================
    3. FULLSCREEN OVERLAY SEARCH BAR (NỀN MỜ)
========================================== */
.fullscreen-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Nền mờ đè lên toàn bộ website */
    background-color: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(8px); /* Hiệu ứng blur hiện đại */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Khi active bằng jQuery sẽ hiện lên */
.fullscreen-search-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Hộp chứa thanh input */
.search-form-container {
    width: 100%;
    max-width: 700px;
    padding: 0 20px;
    position: relative;
    transform: translateY(-50px);
    transition: transform 0.4s ease;
}

.fullscreen-search-overlay.active .search-form-container {
    transform: translateY(0);
}

/* Ô Input chính */
.fullscreen-search-input {
    width: 100%;
    border: none;
    border-bottom: 3px solid #3caecb;
    background: transparent;
    font-size: 32px;
    font-weight: 300;
    padding: 15px 40px 15px 0;
    outline: none;
    color: #222;
}

/* Nút bấm Tìm kiếm nằm trong ô input */
.search-submit-btn {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 24px;
    color: #3caecb;
    cursor: pointer;
}

/* Nút Close (Đóng) góc trên bên phải */
.search-close-btn {
    position: absolute;
    top: 40px;
    right: 50px;
    font-size: 35px;
    color: #333;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
}

.search-close-btn:hover {
    color: #ff0000;
    transform: rotate(90deg);
}

/* ==========================================
   3. SUBMENU ĐA CẤP PREMIUM (CẤP 2 & CẤP 3)
========================================== */
.navbar-nav .dropdown-menu {
    border: none;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 10px 0;
    min-width: 240px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* Đổ bóng sâu tạo khối lớp nổi */
    
    /* Trạng thái ẩn ẩn định vị để hiệu ứng trượt mượt */
    display: block !important;
    visibility: hidden;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
}

/* Định dạng thẻ chứa nội dung Link bên trong dropdown */
.dropdown-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 20px;
    font-size: 15px;
    font-weight: 550;
    color: #333333;
    text-decoration: none;
    transition: all 0.25s ease;
    border-left: 4px solid transparent;
}

/* Hover vào Item con (Cấp 2 & Cấp 3) */
.dropdown-menu-item:hover {
    background-color: rgba(0, 103, 184, 0.06); /* Nền xanh trung tâm siêu nhẹ */
    color: #0067b8 !important; /* Đổi màu chữ sang màu xanh của ảnh */
    border-left: 4px solid #0067b8; /* Xuất hiện vạch đứng định vị màu xanh */
    padding-left: 28px; /* Chữ nhích nhẹ tạo cảm giác động sinh động */
}

.navbar-nav .nav-item.dropdown,
.dropdown-submenu {
    position: relative;
}

/* Khớp vị trí cho menu cấp 3 */
.dropdown-submenu .submenu {
    top: -10px; /* Cân bằng thụt lề để đều hàng */
    left: 100%;
    margin-left: 4px;
}




/* ------------------------------------------
   HIỆU ỨNG HOVER KÍCH HOẠT MENU
------------------------------------------ */
.dropdown-hover:hover > .dropdown-menu,
.dropdown-submenu:hover > .submenu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Giữ hiệu ứng cho menu cha khi đang rê chuột ở menu con */
.dropdown-submenu:hover > .dropdown-toggle-custom {
    background-color: rgba(0, 103, 184, 0.06);
    color: #0067b8 !important;
    border-left: 4px solid #0067b8;
    padding-left: 28px;
}

/* Icon mũi tên chỉ sang phải của cấp 2 */
.dropdown-submenu .fa-chevron-right {
    font-size: 10px;
    color: #aaaaaa;
    transition: transform 0.25s ease, color 0.25s ease;
}
.dropdown-submenu:hover .fa-chevron-right {
    color: #0067b8;
    transform: translateX(4px); /* Mũi tên nhích nhẹ sang phải */
}

/* Thay đổi màu sắc của khung Search Fullscreen cho đồng bộ */
.fullscreen-search-input {
    border-bottom: 3px solid #0067b8 !important;
}
.search-submit-btn, .search-close-btn:hover {
    color: #0067b8 !important;
}


/*-----------------slide----------------------*/
/* ==========================================
   CUSTOM OWL CAROUSEL (NAV & DOTS PREMIUM)
========================================== */

/* Khung chứa slider chính */
.hero-owl-wrapper {
    position: relative;
    overflow: hidden;
}

/* 1. TINH CHỈNH ĐƯỜNG MŨI TÊN (NAV BUTTONS) */
#slider_owl .owl-nav {
    margin-top: 0; /* Xóa margin mặc định đẩy nav xuống dưới */
}

/* Style chung cho nút Back và Next */
#slider_owl .owl-nav [class*='owl-'] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.15) !important; /* Nền mờ kính trong suốt */
    backdrop-filter: blur(4px);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 50% !important; /* Vòng tròn hoàn chỉnh */
    font-size: 22px !important;
    line-height: 46px !important;
    text-align: center;
    cursor: pointer;
    margin: 0 !important;
    padding: 0 !important;
    
    /* Hiệu ứng ẩn ban đầu, sẽ hiện khi hover vào wrapper */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Vị trí nút bên trái (Prev) */
#slider_owl .owl-nav .owl-prev {
    left: -20px; /* Đẩy hơi âm ra ngoài để khi hover sẽ trượt vào */
}

/* Vị trí nút bên phải (Next) */
#slider_owl .owl-nav .owl-next {
    right: -20px;
}

/* Kích hoạt hiệu ứng xuất hiện khi RE CHUỘT vào vùng Slider */
.hero-owl-wrapper:hover .owl-nav [class*='owl-'] {
    opacity: 1;
    visibility: visible;
}
.hero-owl-wrapper:hover .owl-nav .owl-prev {
    left: 30px; /* Trượt mượt mà vào trong */
}
.hero-owl-wrapper:hover .owl-nav .owl-next {
    right: 30px; /* Trượt mượt mà vào trong */
}

/* Hiệu ứng khi RE CHUỘT riêng vào từng nút mũi tên */
#slider_owl .owl-nav [class*='owl-']:hover {
    background: #0067b8 !important; /* Đổi sang màu xanh trung tâm theo dải màu ảnh của bạn */
    border-color: #0067b8 !important;
    color: #ffffff !important;
    transform: translateY(-50%) scale(1.05); /* Phóng to nhẹ giữ nguyên căn giữa dọc */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Đè (override) text content nếu icon mặc định là chữ hoặc thực thể thô */
#slider_owl .owl-nav .owl-prev span,
#slider_owl .owl-nav .owl-next span {
    display: inline-block;
    font-family: inherit;
    font-weight: 300;
}


/* 2. TINH CHỈNH NÚT CHẤM CHUYỂN TRANG (DOTS) */
#slider_owl .owl-dots {
    position: absolute;
    bottom: 30px; /* Đẩy cụm dots lên trên nằm gọn trong banner */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Khoảng cách giữa các chấm */
}

/* Định dạng từng dấu chấm đơn lẻ thành dạng thanh ngang (Bar/Pill) */
#slider_owl .owl-dots .owl-dot span {
    width: 12px;
    height: 6px;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.4) !important; /* Chấm chưa active màu trắng mờ */
    border-radius: 20px !important;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Hiệu ứng khi chấm đó được HOẠT ĐỘNG (ACTIVE) */
#slider_owl .owl-dots .owl-dot.active span {
    width: 35px; /* Dãn dài thanh ngang ra tạo hiệu ứng chỉ báo cao cấp */
    background: #0067b8 !important; /* Màu xanh sáng điểm nhấn lấy từ ảnh của bạn */
    box-shadow: 0 0 10px #0067b8;
}

/* Hover nhẹ lên các chấm chưa active */
#slider_owl .owl-dots .owl-dot:hover span {
    background: rgba(255, 255, 255, 0.8) !important;
}
/*indexx*/
/* ==========================================
   ABOUT US SECTION (PREMIUM LAYOUT)
========================================== */

/* Thiết lập khoảng cách padding trên dưới cho section */
.padding-y {
    padding: 80px 0;
    background-color: #f9fbfd; /* Nền xám xanh cực nhẹ tạo sự tinh tươm */
}

/* 1. Xử lý khung ảnh bên trái */
.about-img-wrapper {
    position: relative;
    padding-right: 20px;
    padding-bottom: 20px;
}


.about-main-img {
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 45, 116, 0.15);
    position: relative;
    z-index: 2;
    width: 100%;
    /* height: 480px;  <-- Xóa hoặc comment dòng này nếu muốn ảnh chạy theo tỉ lệ tự nhiên */
    object-fit: cover;
    height: 480px;
}

/*.about-main-img {
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 45, 116, 0.15);
    position: relative;
    z-index: 2;
    width: 100%;
    object-fit: cover;
    height: 480px; 
}*/

/* Khung viền trang trí chạy phía sau ảnh */
.about-img-decor {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 90%;
    height: 90%;
    border: 3px solid #0067b8; /* Sử dụng màu xanh từ ảnh phối */
    border-radius: 12px;
    z-index: 1;
}

/* 2. Xử lý khối nội dung bên phải */
.sub-title {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: #4ca4df; /* Màu xanh sáng làm điểm nhấn đầu dòng */
    letter-spacing: 2px;
    margin-bottom: 8px;
    position: relative;
}

.main-title {
    font-size: 26px;
    font-weight: 800;
    color: #002d74; /* Màu xanh Navy đậm đầm chắc */
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.about-desc {
    font-size: 15px;
    line-height: 1.7;
    color: #555555;
    margin-bottom: 15px;
    text-align: justify;
}

/* 3. Thiết kế 3 cột Icon Card (Phong cách VietSeafood) */
.about-feature-box {
    background: #ffffff;
    border: 1px solid #eef3f7;
    padding: 24px 18px;
    border-radius: 10px;
    height: 100%; /* Giúp 3 cột luôn cao bằng nhau dù chữ dài ngắn khác nhau */
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Vòng tròn bọc icon */
.feature-icon-wrap {
    width: 65px;
    height: 65px;
    background-color: rgba(0, 103, 184, 0.05); /* Nền vòng tròn xanh nhạt */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
    transition: all 0.35s ease;
}

.feature-icon {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

.feature-title {
    font-size: 17px;
    font-weight: 700;
    color: #002d74;
    margin-bottom: 10px;
    height: 40px; /* Giữ các tiêu đề thẳng hàng ngang */
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-text {
    font-size: 16px;
    line-height: 1.5;
    color: #666666;
    margin-bottom: 0;
    text-align: center;
}

/* ------------------------------------------
   HIỆU ỨNG TƯƠNG TÁC (HOVER EFFECTS)
------------------------------------------ */
.about-feature-box:hover {
    transform: translateY(-7px); /* Thẻ nhấc nhẹ lên khi hover */
    border-color: transparent;
    box-shadow: 0 12px 30px rgba(0, 45, 116, 0.1); /* Đổ bóng mịn màu xanh chìm */
}

.about-feature-box:hover .feature-icon-wrap {
    background: linear-gradient(135deg, #4ca4df 0%, #0067b8 100%); /* Vòng tròn hóa màu Gradient khi hover */
}

/* Đổi màu icon sang dạng âm bản trắng nếu trình duyệt hỗ trợ filter */
.about-feature-box:hover .feature-icon {
    filter: brightness(0) invert(1); 
}






/* ==========================================
   FEATURED PRODUCTS (IMAGE_4BED81 REFERENCE)
========================================== */

/* Header Tiêu đề */
.section-header {
    position: relative;
}
.title-line {
    width: 60px;
    height: 3px;
    background: #0067b8; /* Tone xanh từ ảnh gốc phối */
    margin: 12px auto 0 auto;
    border-radius: 2px;
}

/* Cấu trúc Thẻ sản phẩm */
.product-card {
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Khung chứa ảnh sản phẩm */
.product-img-box {
    position: relative;
    width: 100%;
    padding-top: 85%; /* Tỉ lệ khung ảnh chữ nhật nằm ngang tinh tế */
    background-color: #ffffff;
    overflow: hidden;
}

.product-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Giữ nguyên phom sản phẩm không bị méo/mất góc */
    padding: 15px; /* Tạo khoảng thở xung quanh sản phẩm giống ảnh mẫu */
    transition: transform 0.5s ease;
}

/* Nhãn đè lên góc ảnh (Badges) */
.product-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: #ce1a1a; /* Tone đỏ thương mại nổi bật */
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    z-index: 3;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 8px rgba(206, 26, 26, 0.3);
}
.product-badge.badge-blue {
    background-color: #0067b8;
    box-shadow: 0 3px 8px rgba(0, 103, 188, 0.3);
}

/* Khối thông tin nằm dưới ảnh */
.product-info {
    padding: 15px 15px 20px 15px;
    background-color: #f6f8fb; /* Nền xám xanh cực nhẹ tách biệt giống image_4bed81.jpg */
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: 1px solid #edf1f5;
}

/* Tên sản phẩm */
.product-name {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 12px;
    height: 55px; /* Giới hạn hiển thị 2 dòng chữ cân bằng đều tăm tắp */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-name a {
    color: #222222;
    text-decoration: none;
    transition: color 0.2s ease;
}

.product-name a:hover {
    color: #0067b8; /* Đổi sang màu xanh khi hover tên */
}

/* Chữ Liên hệ / Contact ở đáy card */
.product-status {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #ce1a1a; /* Giữ màu đỏ chủ đạo kích thích hành động từ ảnh mẫu */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: auto;
}

/* Nút Xem tất cả dưới đáy lưới */
.btn-view-all {
    display: inline-block;
    background-color: #ce1a1a; /* Đỏ đồng bộ hoàn hảo với ảnh mẫu */
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 40px;
    border-radius: 4px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(206, 26, 26, 0.2);
    transition: all 0.3s ease;
}

.btn-view-all:hover {
    background-color: #002d74; /* Chuyển xanh navy sâu khi hover tạo cảm giác chuyên nghiệp */
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(0, 45, 116, 0.25);
    transform: translateY(-2px);
}

/* ------------------------------------------
   HIỆU ỨNG HOVER KHI RE CHUỘT VÀO CARD
------------------------------------------ */
.product-card:hover {
/*    transform: translateY(-6px);*/
/*    border-color: transparent;*/
    box-shadow: 0 12px 30px rgba(0, 45, 116, 0.1);
}

.product-card:hover .product-img {
    transform: scale(1.06); /* Ảnh sản phẩm zoom nhẹ rất cao cấp */
}
.featured-products{
    background: #ffff;
}


/* ==========================================
   TỐI ƯU NAV CHO OWL PRODUCT SLIDER
========================================== */
#product_owl {
    position: relative;
    padding: 0 10px;
}

/* Định hình cặp nút mũi tên của slider sản phẩm */
#product_owl .owl-nav [class*='owl-'] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background-color: #ffffff !important;
    color: #0067b8 !important; /* Lấy tone màu xanh chủ đạo của bạn */
    border: 1px solid #e2e8f0 !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    line-height: 42px !important;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease !important;
    margin: 0 !important;
}

/* Đẩy nút ra 2 biên ngoài rìa */
#product_owl .owl-nav .owl-prev {
    left: -22px;
}
#product_owl .owl-nav .owl-next {
    right: -22px;
}

/* Hiệu ứng khi di chuột vào nút */
#product_owl .owl-nav [class*='owl-']:hover {
    background-color: #0067b8 !important;
    color: #ffffff !important;
    border-color: #0067b8 !important;
    box-shadow: 0 6px 15px rgba(0, 103, 184, 0.3);
}

/* Làm mờ các nút điều hướng nếu danh sách không lặp (trong trường hợp loop: false) */
#product_owl .owl-nav .disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ==========================================
   QUALITY ASSURANCE (CERTIFICATE CAROUSEL)
========================================== */
.qa-section {
    background-color: #f5f5f5; /* Nền xám nhẹ chuẩn theo ảnh gốc image_4b8865.jpg */
    padding: 60px 0;
}

/* Khung bọc từng chứng chỉ */
.cert-card {
    text-align: center;
    padding: 15px;
    background: transparent; /* Giữ suốt để hòa trộn nền */
    transition: all 0.3s ease;
}

/* Khung chứa ảnh để xử lý xóa nền */
.cert-img-box {
    background-color: #f5f5f5; /* Trùng với nền section để triệt tiêu viền lệch màu */
    width: 100%;
    padding-top: 100%; /* Tạo khung vuông tỉ lệ 1:1 cho logo */
    position: relative;
    margin-bottom: 15px;
}

.cert-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Giữ nguyên phom chứng chỉ không méo */
    padding: 10px;
    
    /* TUYỆT CHIÊU XÓA NỀN TRẮNG: Tự động loại bỏ background trắng của ảnh gốc, 
       chỉ giữ lại phần logo màu đè lên nền xám */
    mix-blend-mode: multiply; 
    
    filter: grayscale(10%) contrast(105%); /* Tăng nhẹ độ tương phản cho sắc nét */
    transition: all 0.3s ease;
}

/* Tên chứng chỉ phía dưới */
.cert-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #222222;
    text-transform: uppercase;
    margin-top: 10px;
    letter-spacing: 0.3px;
    transition: color 0.3s ease;
}

/* Hiệu ứng tương tác khi hover */
.cert-card:hover .cert-img {
    transform: scale(1.08); /* Phóng to nhẹ logo tinh tế */
}
.cert-card:hover .cert-name {
    color: #0067b8; /* Chuyển màu chữ sang màu xanh thương hiệu khi hover */
}

/* CUSTOM NAV MŨI TÊN RIÊNG CHO KHỐI CHỨNG CHỈ */
#cert_owl .owl-nav [class*='owl-'] {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.8) !important;
    color: #333333 !important;
    border: 1px solid #dddddd !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    line-height: 34px !important;
    text-align: center;
    margin: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.3s ease !important;
}
#cert_owl .owl-nav .owl-prev { left: -30px; }
#cert_owl .owl-nav .owl-next { right: -30px; }

#cert_owl .owl-nav [class*='owl-']:hover {
    background-color: #0067b8 !important;
    color: #ffffff !important;
    border-color: #0067b8 !important;
}


/* ==========================================
   CONSULTATION SECTION (BACKGROUND OVERLAY & BLUR FORM)
========================================== */
.consultation-section {
    position: relative;
    /* Thay bằng đường dẫn ảnh nền của bạn (ảnh nhà máy, tàu biển hoặc hải sản) */
    background-image: url('images/consultation-bg.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Tạo hiệu ứng cuộn Parallax nhẹ khi kéo trang */
    padding: 100px 0;
    overflow: hidden;
}

/* Lớp phủ mờ làm tối ảnh nền bên dưới */
.consultation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Phủ màu xanh Navy sẫm pha đen để form nổi bật lên */
    background: linear-gradient(135deg, rgba(0, 45, 116, 0.85) 0%, rgba(0, 15, 40, 0.9) 100%);
    z-index: 1;
}

/* Khung chứa Form kính mờ nổi lên trên (Glassmorphism) */
.consultation-form-box {
    background: rgba(255, 255, 255, 0.08); /* Nền trắng siêu trong suốt */
    backdrop-filter: blur(12px); /* Làm mờ phần hình nền phía sau form */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15); /* Viền mờ bao quanh */
    border-radius: 16px;
    padding: 50px 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); /* Đổ bóng khối nặng để tạo cảm giác nổi */
}

/* Header chữ bên trong Form */
.form-sub-title {
    font-size: 13px;
    font-weight: 700;
    color: #4ca4df; /* Màu xanh sáng từ ảnh thương hiệu */
    letter-spacing: 2px;
}
.form-main-title {
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    margin: 6px 0 15px 0;
}
.form-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    max-width: 100%;
    margin: 0 auto;
}

/* Tinh chỉnh các ô nhập thông tin (Inputs) */
.input-group-custom {
    position: relative;
    width: 100%;
}

.form-control-custom {
    width: 100%;
    background: rgba(255, 255, 255, 0.06) !important; /* Ô nhập trong suốt nhẹ */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 12px 18px;
    font-size: 14.5px;
    color: #ffffff !important;
    outline: none;
    transition: all 0.3s ease;
}

/* Đổi màu chữ gợi ý (Placeholder) thành màu trắng mờ */
.form-control-custom::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.text-area-custom {
    resize: none;
}

/* Hiệu ứng thanh line chạy dưới đáy ô input khi click vào điền */
.input-focus-line {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #4ca4df;
    transition: all 0.3s ease;
}

.form-control-custom:focus {
    border-color: rgba(76, 164, 223, 0.5);
    background: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 0 10px rgba(76, 164, 223, 0.1);
}

.form-control-custom:focus ~ .input-focus-line {
    width: 100%;
    left: 0;
}

/* Nút Submit gửi đi */
.btn-submit-consultation {
    background: linear-gradient(90deg, #4ca4df 0%, #0067b8 100%); /* Chuẩn hệ màu gradient của bạn */
    color: #ffffff;
    border: none;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 45px;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 5px 15px rgba(0, 103, 184, 0.3);
    transition: all 0.3s ease;
}

.btn-submit-consultation:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(76, 164, 223, 0.5);
    background: linear-gradient(90deg, #0067b8 0%, #002d74 100%); /* Đổi tone đậm hơn khi hover */
}

/* Responsive tinh chỉnh cho mobile */
@media (max-width: 576px) {
    .consultation-form-box {
        padding: 30px 20px;
    }
    .form-main-title {
        font-size: 22px;
    }
}

/*indexx*/
/*footer*/
/* ==========================================
   FOOTER SECTION (THEO MÔ TẢ PHÂN BỔ)
========================================== */
.main-footer {
    /* Đổ màu nền Navy đậm từ ảnh phối dải màu ban đầu của bạn */
    background: #001a43; 
    color: #ffffff;
    padding: 60px 0 20px 0;
    border-top: 3px solid #0067b8;
    position: relative;
    overflow: hidden;
}

/* Kiểu chữ tiêu đề các cột */
.footer-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 18px;
    color: #4ca4df; /* Màu xanh sáng làm điểm nhấn */
}

.footer-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 15px;
}

/* --- XỬ LÝ CỘT 1: NÚT WHATSAPP CĂN TRÁI --- */
.whatsapp-link {
    display: inline-flex;
    align-items: center;
    background-color: #25d366; /* Màu xanh lá chuẩn của thương hiệu WhatsApp */
    color: #ffffff;
    padding: 10px 22px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    transition: all 0.3s ease;
}
.whatsapp-link:hover {
    background-color: #1ebd58;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

/* --- XỬ LÝ CỘT 2: LOGO BỰ CHÍNH GIỮA & SOCIAL CẠNH PHẢI --- */
.footer-logo-wrap {
    margin-bottom: 40px; /* Tạo khoảng trống ở dưới để nhường chỗ cho social icons */
}
.footer-logo-big {
    max-height: 95px; /* Kích thước logo bự lên nổi bật ngay trung tâm */
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

/* Định vị cụm mạng xã hội xuống góc dưới bên phải của cột giữa */
.footer-social-icons {
    position: absolute;
    bottom: -10px;
    right: 15px;
    display: flex;
    gap: 10px;
}
.footer-social-icons a {
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}
.footer-social-icons a:hover {
    background-color: #0067b8;
    border-color: #0067b8;
    transform: translateY(-3px);
}

/* --- XỬ LÝ CỘT 3: ĐỊA CHỈ CĂN PHẢI, ICON NẰM TRÁI DÒNG --- */
.address-item-wrap {
    display: inline-flex; /* Giúp khối ôm sát nội dung và dễ dàng căn phải */
    align-items: flex-start;
    text-align: right;
    max-width: 320px; /* Giới hạn độ rộng để xuống dòng đẹp mắt */
}

/* Khóa vị trí icon luôn nằm ở rìa bên trái của chuỗi text địa chỉ */
.address-icon {
    color: #4ca4df;
    font-size: 16px;
    margin-right: 12px;
    margin-top: 4px; /* Cân chỉnh icon hơi hạ xuống ngang hàng với dòng chữ đầu tiên */
    flex-shrink: 0; /* Không cho icon bị bóp méo khi text dài */
}

.address-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

/* --- DÒNG BẢN QUYỀN ĐÁY PHẲNG --- */
.footer-bottom {
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.copyright-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0;
}

/* Responsive cấu trúc lại căn lề khi về màn hình điện thoại */
@media (max-width: 991px) {
    .main-footer .text-start,
    .main-footer .text-end {
        text-align: center !important; /* Về mobile cho tất cả căn giữa cho đẹp */
    }
    .address-item-wrap {
        text-align: center;
        justify-content: center;
    }
    .footer-social-icons {
        position: relative;
        bottom: 0;
        right: 0;
        justify-content: center;
        margin-top: 20px;
    }
}
/*footer*/
/*Trang con*/
/* ==========================================
   1. BREADCRUMB BANNER PREMIUM LAYER
========================================== */
.breadcrumb-wrapper {
    position: relative;
    min-height: 260px; /* Chiều cao lý tưởng cho banner trang con */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Tạo hiệu ứng cuộn Parallax nhẹ cực sang */
    overflow: hidden;
}

/* Lớp phủ mờ pha dải màu xanh Navy sâu từ ảnh thương hiệu */
.breadcrumb-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 45, 116, 0.8) 0%, rgba(0, 15, 40, 0.85) 100%);
    z-index: 1;
}

/* Đảm bảo nội dung luôn hiển thị rõ ràng trên lớp phủ */
.z-index-2 {
    z-index: 2;
}

/* Định dạng tiêu đề chính của trang */
.breadcrumb-title {
    font-size: 34px;
    font-weight: 800 !important;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    margin-bottom: 12px;
}

/* Tinh chỉnh cấu trúc đường dẫn Breadcrumb */
.breadcrumb {
    background: transparent;
    padding: 0;
}

.breadcrumb-item a {
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.breadcrumb-item a:hover {
    color: #4ca4df !important; /* Đổi màu xanh sáng khi hover */
    opacity: 1 !important;
}

.breadcrumb-item.active {
    font-size: 14px;
    letter-spacing: 0.5px;
    color: #4ca4df !important; /* Điểm dừng cuối cùng mang màu thương hiệu */
}

/* Thay thế dấu gạch chéo mặc định thô kệch bằng nét mảnh tinh tế */
.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.4);
    content: "/";
    padding-right: 12px;
}


/* ==========================================
   2. CHUẨN HÓA NỘI DUNG CHI TIẾT BÀI VIẾT (TYPOGRAPHY)
========================================== */
.box_mainss {
    background-color: #ffffff;
}

.chitiet_post {
    font-size: 16px;
    line-height: 1.8; /* Khoảng cách dòng thông thoáng tiêu chuẩn quốc tế */
    color: #333333;
    text-align: justify; /* Căn đều 2 bên thẳng hàng đẹp mắt */
}

/* Xử lý các tiêu đề bên trong bài viết (H2, H3, H4) do admin nhập vào */
.chitiet_post h2, 
.chitiet_post h3, 
.chitiet_post h4 {
    color: #002d74; /* Tone Navy đậm vững chãi */
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 15px;
    line-height: 1.4;
}

.chitiet_post h2 { font-size: 24px; border-left: 4px solid #0067b8; padding-left: 12px; }
.chitiet_post h3 { font-size: 20px; }
.chitiet_post h4 { font-size: 18px; }

/* Đoạn văn bản */
.chitiet_post p {
    margin-bottom: 18px;
}

/* TUYỆT CHIÊU KHỐNG CHẾ ẢNH: Tránh việc ảnh quá to làm vỡ khung website trên Mobile */
.chitiet_post img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
    margin: 20px auto;
    display: block;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
}

/* Định dạng danh sách (Bullet points) nếu có */
.chitiet_post ul, 
.chitiet_post ol {
    margin-bottom: 20px;
    padding-left: 20px;
}

.chitiet_post ul li {
    list-style-type: disc;
    margin-bottom: 8px;
}

/* Tối ưu bảng dữ liệu (Table thông số kỹ thuật sản phẩm nếu có) */
.chitiet_post table {
    width: 100% !important;
    max-width: 100%;
    margin-bottom: 25px;
    border-collapse: collapse;
    background-color: #ffffff;
}

.chitiet_post table th,
.chitiet_post table td {
    padding: 12px 15px;
    border: 1px solid #eef2f6;
    font-size: 14.5px;
}

.chitiet_post table th {
    background-color: #f4f7fa;
    color: #002d74;
    font-weight: 700;
}

.chitiet_post table tr:nth-child(even) {
    background-color: #f9fbfd; /* Màu dòng kẻ xen kẽ nhẹ nhàng */
}

/* Tinh chỉnh phần hiển thị trên thiết bị di động (Mobile) */
@media (max-width: 768px) {
    .breadcrumb-wrapper {
        min-height: 200px; /* Hạ thấp chiều cao banner trên điện thoại */
    }
    .breadcrumb-title {
        font-size: 26px;
    }
    .chitiet_post {
        font-size: 15px; /* Giảm nhẹ size chữ trên mobile để dễ nhìn */
    }
}


/* ==========================================
   TỐI ƯU TRANG DANH MỤC THEO IMAGE_3EC2DB
========================================== */

/* 1. Xử lý Sidebar nền xanh chữ trắng (Khoanh đỏ trái) */
.category-sidebar-premium {
    /* Sử dụng màu xanh thương hiệu đồng bộ từ ảnh gốc phối */
    background: linear-gradient(135deg, #0067b8 0%, #002d74 100%); 
    padding: 35px 25px;
    border-radius: 12px; /* Bo tròn góc hộp sidebar */
    box-shadow: 0 10px 30px rgba(0, 45, 116, 0.15);
/*    height: 100%; */

    position: sticky;
    top: 110px;
    z-index: 99;

}

/* Tiêu đề Category to lên */
.sidebar-title-premium {
    font-size: 20px; /* Tăng kích thước chữ to lên */
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.sidebar-menu-premium {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu-premium li {
    margin-bottom: 12px; /* Tăng khoảng cách dòng rộng rãi */
}

/* Tinh chỉnh chữ danh mục con to và rõ ràng */
.sidebar-menu-premium li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 15px; /* Làm chữ menu to lên rõ rệt */
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.25s ease;
}

/* Số lượng sản phẩm (17), (13)... bên phải */
.cate-count {
    font-size: 14px;
    opacity: 0.7;
    font-weight: 400;
}

/* Hiệu ứng Hover / Active cho menu chữ trắng */
.sidebar-menu-premium li a:hover,
.sidebar-menu-premium li a.active {
    background-color: #ffffff;
    color: #002d74 !important; /* Chuyển nền trắng chữ xanh đậm quý phái */
    padding-left: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.sidebar-menu-premium li a:hover .cate-count,
.sidebar-menu-premium li a.active .cate-count {
    opacity: 1;
    font-weight: 600;
}


/* 2. Xử lý sản phẩm bên phải (Bo tròn góc hình & lấp khoảng trống) */
.product-card-clean {
    background: #ffffff;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.product-img-box-clean {
    width: 100%;
    padding-top: 100%; /* Giữ khung vuông tỉ lệ 1:1 */
    position: relative;
    overflow: hidden;
    /* BO TRÒN CÁC GÓC HÌNH THEO YÊU CẦU */
    border-radius: 12px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.product-img-clean {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Hoặc contain tùy phom ảnh gốc của bạn */
    transition: transform 0.4s ease;
}

/* Tiêu đề chữ dưới chân ảnh */
.product-title-clean {
    font-size: 15px;
    font-weight: 700;
    margin-top: 12px;
    margin-bottom: 0;
    text-align: left;
}

.product-title-clean a {
    color: #222222;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Hiệu ứng re chuột vào sản phẩm bo góc */
.product-card-clean:hover .product-img-clean {
    transform: scale(1.05); /* Ảnh phóng to nhẹ trong khung bo tròn rất đẹp */
}

.product-card-clean:hover .product-title-clean a {
    color: #0067b8;
}


/* 3. Xử lý Responsive trên Mobile (Tự trả về bố cục dọc linh hoạt) */
@media (max-width: 991px) {
    .category-sidebar-premium {
        height: auto;
        margin-bottom: 20px;
    }
}


/* ==========================================
   NEWS PAGE GRID (TỐI ƯU CARD BÀI VIẾT)
========================================== */
#tintuc_page {
    background-color: #f8fafc; /* Nền xám xanh cực nhẹ để nổi bật khối tin tức trắng */
}

/* Bộ khung thẻ tin tức */
.news-card {
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 12px; /* Bo góc hiện đại như trang sản phẩm */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Khung bọc ảnh tin tức */
.news-img {
    width: 100%;
    padding-top: 60%; /* Tỉ lệ vàng cho ảnh đại diện tin tức nằm ngang */
    position: relative;
    overflow: hidden;
    background-color: #f1f5f9;
}

.news-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ép ảnh vừa khít, không bị méo hình */
    transition: transform 0.6s ease;
}

/* Khối nội dung chữ bên dưới ảnh */
.news-content {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Đảm bảo chiều cao các ô luôn bằng nhau dù text dài ngắn */
}

/* Ngày tháng đăng bài */
.news-meta {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 10px;
}
.news-meta i {
    color: #4ca4df; /* Sắc xanh sáng điểm nhấn */
}

/* Tiêu đề bài viết */
.news-title {
    font-size: 16px;
    font-weight: 750;
    line-height: 1.5;
    margin-bottom: 12px;
    height: 48px; /* Giới hạn hiển thị đúng 2 dòng chữ */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.news-title a {
    color: #002d74; /* Màu xanh navy sang trọng */
    text-decoration: none;
    transition: color 0.25s ease;
}

.news-title a:hover {
    color: #0067b8;
}

/* Đoạn mô tả ngắn bài viết */
.news-desc {
    font-size: 14px;
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 20px;
    height: 66px; /* Giới hạn hiển thị đúng 3 dòng text để lưới tăm tắp */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-align: justify;
}

/* Nút Xem thêm / Read more */
.news-link {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: #0067b8; /* Đồng bộ tone màu */
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: auto; /* Đẩy nút luôn nằm sát đáy Card */
    transition: all 0.25s ease;
}

.news-link i {
    transition: transform 0.25s ease;
}

/* ------------------------------------------
   HIỆU ỨNG TƯƠNG TÁC HOVER CAO CẤP
------------------------------------------ */
.news-card:hover {
    transform: translateY(-6px); /* Card nhấc nhẹ lên khỏi nền */
    box-shadow: 0 12px 30px rgba(0, 45, 116, 0.08); /* Đổ bóng sâu mềm mại */
    border-color: rgba(0, 103, 184, 0.15);
}

.news-card:hover .news-img img {
    transform: scale(1.06); /* Ảnh zoom nhẹ tinh tế */
}

.news-card:hover .news-link {
    color: #4ca4df; /* Đổi màu chữ khi hover card */
}

.news-card:hover .news-link i {
    transform: translateX(5px); /* Mũi tên dịch sang phải kích thích click */
}





/* ==========================================
   NEWS DETAIL PAGE STYLING
========================================== */
.news-detail-page {
    background-color: #ffffff;
}

/* 1. Tinh chỉnh Breadcrumb dạng gạch chéo thanh lịch */
.custom-breadcrumb {
    background: transparent;
    padding: 0;
    font-size: 14px;
}
.custom-breadcrumb .breadcrumb-item a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s ease;
}
.custom-breadcrumb .breadcrumb-item a:hover {
    color: #0067b8;
}
.custom-breadcrumb .breadcrumb-item.active {
    color: #002d74 !important;
    font-weight: 600;
}
.custom-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    color: #cbd5e1;
}

/* 2. Nội dung bài viết bên trái (Left Column) */
.main-news-article {
    padding-right: 15px;
}
.article-title {
    font-size: 30px;
    font-weight: 800;
    color: #002d74; /* Tone Navy đậm */
    line-height: 1.4;
    margin-bottom: 15px;
}
.article-meta {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}
.article-meta i {
    color: #4ca4df; /* Điểm nhấn sắc xanh sáng */
}
.article-divider {
    border-top: 1px solid #e2e8f0;
    margin: 20px 0 25px 0;
    opacity: 1;
}

/* Chuẩn hóa Typography nội dung bài viết do Admin nhập */
.article-body-content {
    font-size: 16px;
    line-height: 1.8;
    color: #334155;
    text-align: justify;
}
.article-body-content p {
    margin-bottom: 20px;
}
.article-body-content h2, 
.article-body-content h3 {
    color: #002d74;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 15px;
}
.article-body-content h2 { font-size: 22px; }
.article-body-content h3 { font-size: 19px; }

/* Ép ảnh trong bài viết tự động bo góc và chống tràn khung */
.article-body-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 12px; /* Bo tròn góc hình ảnh */
    margin: 25px auto;
    display: block;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

/* 3. Khối bài viết liên quan Sticky bên phải (Right Column) */
.sticky-news-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 100px; /* Ghim cách mép trên màn hình 100px khi cuộn trang */
    background-color: #f8fafc; /* Nền xám nhạt đổ khối riêng biệt */
    border: 1px solid #e2e8f0;
    border-radius: 12px; /* Bo góc khối sidebar */
    padding: 24px;
}

.sidebar-heading {
    font-size: 18px;
    font-weight: 750;
    color: #002d74;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #0067b8; /* Gạch chân màu thương hiệu */
}

/* Danh sách tin liên quan */
.related-news-item {
    display: flex;
    gap: 15px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed #e2e8f0;
}
.related-news-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Hộp ảnh tin liên quan - Bo tròn góc tỉ lệ vuông */
.related-img-box {
    width: 85px;
    height: 70px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 8px; /* Bo tròn góc hình */
    background-color: #cbd5e1;
}
.related-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Nội dung chữ tin liên quan */
.related-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.related-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 5px;
    /* Giới hạn hiển thị đúng 2 dòng chữ ngắn gọn */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.related-title a {
    color: #334155;
    text-decoration: none;
    transition: color 0.2s ease;
}
.related-title a:hover {
    color: #0067b8;
}

.related-date {
    font-size: 12px;
    color: #94a3b8;
}

/* Hiệu ứng hover tương tác */
.related-news-item:hover .related-img-box img {
    transform: scale(1.08);
}
.related-news-item:hover .related-title a {
    color: #0067b8;
}

/* Responsive hạ chế độ sticky trên mobile */
@media (max-width: 991px) {
    .sticky-news-sidebar {
        position: static;
        margin-top: 30px;
    }
    .article-title {
        font-size: 24px;
    }
}





/* ==========================================
   CONTACT PAGE PREMIUM LAYOUT
========================================== */
.contact-page-wrapper {
    background-color: #f8fafc;
}

/* Khối hộp lớn gom map và form làm một thực thể */
.contact-card-box {
    background: #ffffff;
    border-radius: 16px; /* Bo tròn viền ngoài hộp lớn */
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 45, 116, 0.06); /* Đổ bóng sâu cao cấp */
    border: 1px solid #e2e8f0;
}

/* --- XỬ LÝ KHU VỰC BẢN ĐỒ --- */
.contact-map-holder {
    width: 100%;
    height: 100%;
    min-height: 550px; /* Ép bản đồ luôn có độ cao tối thiểu bằng form bên cạnh */
    background-color: #e2e8f0;
}

/* Khống chế Iframe bản đồ do Admin dán từ Google Maps tự tràn đều 100% */
.contact-map-holder iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 550px;
    border: 0 !important;
    display: block;
}

/* --- XỬ LÝ KHU VỰC NỘI DUNG FORM --- */
.contact-form-content {
    padding: 40px; /* Tạo khoảng trống đệm rộng rãi */
}

.contact-section-title {
    font-size: 18px;
    font-weight: 800;
    color: #002d74; /* Màu Navy chủ đạo */
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.contact-info-text {
    font-size: 14.5px;
    color: #4a5568;
    line-height: 1.7;
}

.contact-divider {
    border-top: 1px solid #e2e8f0;
    opacity: 0.8;
}

/* --- ĐỊNH DẠNG Ô NHẬP LIỆU (INPUT STYLE) --- */
.custom-input {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important; /* Bo tròn các ô nhập liệu */
    font-size: 14px !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    transition: all 0.25s ease !important;
}

/* Hiệu ứng khi click chuột vào ô nhập dữ liệu */
.custom-input:focus {
    border-color: #0067b8 !important;
    box-shadow: 0 0 0 4px rgba(0, 103, 184, 0.1) !important;
}

.form-floating > label {
    font-size: 14px;
    color: #64748b;
    padding-left: 15px;
}

/* Thiết lập chiều cao riêng cho ô textarea ghi chú */
.custom-input.h-150 {
    height: 120px !important;
}

/* --- NÚT GỬI & NHẬP LẠI PREMIUM --- */
.btn-submit-premium {
    background: linear-gradient(135deg, #4ca4df 0%, #0067b8 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 28px;
    border-radius: 8px;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 103, 184, 0.2);
    transition: all 0.3s ease;
}

.btn-submit-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 103, 184, 0.4);
    color: #ffffff;
}

.btn-reset-premium {
    background: #f1f5f9;
    color: #475569;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 22px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    transition: all 0.25s ease;
}

.btn-reset-premium:hover {
    background: #e2e8f0;
    color: #1e293b;
}

/* Responsive cấu trúc lại trên màn hình di động */
@media (max-width: 991px) {
    .contact-form-content {
        padding: 25px;
    }
    .contact-map-holder,
    .contact-map-holder iframe {
        min-height: 380px; /* Giảm chiều cao bản đồ trên mobile */
    }
}
/*Trang con*/
/*Hearder_bosung*/
/* Đường gạch phân cách giữa mạng xã hội và ngôn ngữ */
.topbar-divider {
    width: 1px;
    height: 14px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 0 16px;
}

/* Cấu trúc khu vực chứa cờ */
.language-flags-wrapper {
    gap: 12px; /* Khoảng cách giữa 2 lá cờ */
}

.flag-item {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
    transition: all 0.25s ease;
}

/* Định dạng kích thước lá cờ */
.flag-item img {
    width: 24px;   /* Độ rộng vừa vặn, thanh lịch trên topbar */
    height: 16px;  /* Tỉ lệ chuẩn của cờ */
    object-fit: cover;
    border-radius: 2px; /* Bo tròn nhẹ góc lá cờ nhìn rất xịn */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    filter: grayscale(0%); /* Mặc định cờ chưa chọn sẽ sáng rõ màu */
    opacity: 1;
    transition: all 0.25s ease;
}

/* --- HIỆU ỨNG KHI LÁ CỜ ĐƯỢC CHỌN (ACTIVE) --- */
.flag-item.active {
    pointer-events: none; /* Khóa không cho click lại vào ngôn ngữ đang dùng */
}
.flag-item.active img {
    opacity: 0.45;        /* Cờ active tự động mờ đi một chút theo yêu cầu */
    filter: contrast(90%); /* Giảm nhẹ độ tương phản để tạo cảm giác chìm xuống */
}

/* --- HIỆU ỨNG HOVER VÀO LÁ CỜ CHƯA CHỌN --- */
.flag-item:not(.active):hover img {
    transform: translateY(-1.5px); /* Nhấc nhẹ lá cờ lên khi đưa chuột vào */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35); /* Đổ bóng đậm hơn kích thích click */
}
/*Hearder_bosung*/
/*footer*/
.footer-social-icons img {
    height: 26px;
}


/* ==========================================
   FOOTER PREMIUM GRADIENT (THEO IMAGE_A6FA17)
========================================== */
.main-footer-premium {
    /* Đổ màu gradient chuyển sắc mượt mà từ xanh sáng sang xanh navy */
/*    background: linear-gradient(135deg, #5eb3e0 0%, #0763b7 50%, #001473 100%);*/
    background: #011D7B;
    padding: 70px 0 30px 0;
    position: relative;
    overflow: hidden;
}

/* Thêm hiệu ứng họa tiết sinh vật biển ẩn chìm hai bên góc nền */
.main-footer-premium::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Bạn có thể thay bằng file hình mực/bạch tuộc nét mảnh màu trắng */
/*    background-image: url('images/footer-watermark-pattern.png'); */
    background-repeat: no-repeat;
    background-position: left center, right center;
    background-size: contain;
    opacity: 0.06; /* Độ mờ cực nhẹ chỉ vừa đủ ẩn hiện */
    pointer-events: none;
    z-index: 1;
}

.z-index-2 {
    position: relative;
    z-index: 2;
}

/* Các hộp chứa nội dung thông tin */
.footer-premium-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 15px;
}

/* Vòng tròn bọc icon phía trên tiêu đề */
.footer-icon-circle {
    width: 54px;
    height: 54px;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #ffffff;
    font-size: 22px;
    transition: all 0.3s ease;
}
.footer-premium-box:hover .footer-icon-circle {
    background-color: #ffffff;
    color: #0c436b;
    transform: translateY(-4px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* Tiêu đề mục */
.footer-premium-title {
    font-size: 16px;
    font-weight: 750;
    color: #ffffff;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    position: relative;
}
/* Đường gạch nhỏ dưới chân tiêu đề giống hình mẫu */
.footer-premium-title::after {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.4);
    margin: 8px auto 0 auto;
}

/* Nội dung chữ text trong footer */
.footer-premium-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    font-weight: 500;
}
.footer-premium-text p {
    margin-bottom: 0;
}

/* Nút liên kết Whatsapp chuyên nghiệp */
.premium-whatsapp-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 8px 18px;
    border-radius: 30px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
}
.premium-whatsapp-link i {
    color: #25D366; /* Giữ màu xanh lá đặc trưng của Whatsapp để nhận diện */
    font-size: 16px;
}
.premium-whatsapp-link:hover {
    background-color: #ffffff;
    color: #0c436b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* --- LOGO TRUNG TÂM & SOCIAL ICONS --- */
.footer-logo-premium-wrap {
    max-width: 160px;
}
.footer-logo-premium {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

/* Các nút mạng xã hội vuông nền trắng bo góc nhẹ */
.footer-social-premium-icons {
    display: flex;
    gap: 12px;
}
.footer-social-premium-icons a {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: #ffffff;
    padding: 3px;
    border-radius: 50%; /* Bo góc khối như facebook/linkedin gốc */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.footer-social-premium-icons a img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.footer-social-premium-icons a:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 15px rgba(255, 255, 255, 0.2);
}

/* --- ĐƯỜNG DƯỚI ĐÁY COPYRIGHT --- */
.footer-premium-bottom {
    margin-top: 50px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.copyright-premium-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0;
}

/* Responsive tối ưu trên giao diện Mobile */
@media (max-width: 991px) {
    .main-footer-premium {
        padding: 50px 0 25px 0;
    }
    .footer-premium-bottom {
        margin-top: 35px;
    }
}

/*footer*/


/* ==========================================
   PRODUCT DETAIL COMPONENT (IMAGE_A34FA5)
========================================== */
/* Breadcrumb */
.product-breadcrumb-wrapper .breadcrumb-item,
.product-breadcrumb-wrapper .breadcrumb-item a {
    font-size: 13px;
    color: #64748b;
    text-decoration: none;
}
.product-breadcrumb-wrapper .breadcrumb-item.active {
    color: #0284c7;
    font-weight: 600;
}

/* Khung ảnh đại diện lớn */
.main-product-image-box {
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    padding-top: 100%; /* Giữ khung ảnh chính vuông vắn 1:1 */
}
.main-product-image-box .main-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Danh sách các ảnh thu nhỏ bên dưới */
.thumb-img-box {
    border: 1px solid #e2e8f0;
    border-radius: 2px;
    padding: 4px;
    background: #ffffff;
    cursor: pointer;
    position: relative;
    padding-top: 100%;
    transition: all 0.2s ease;
}
.thumb-img-box img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}
/* Hiệu ứng viền màu cam nổi bật cho ảnh Thumbnail đang active giống hình mẫu */
.thumb-img-box.active,
.thumb-img-box:hover {
    border-color: #f26522; 
    box-shadow: 0 0 0 1px #f26522;
}

/* Khối chữ thông tin bên phải */
.detail-product-name {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.first-review-link {
    font-size: 13.5px;
    color: #38bdf8;
    transition: color 0.2s ease;
}
.first-review-link:hover {
    color: #0284c7;
}

.detail-short-description {
    font-size: 14.5px;
    color: #475569;
    line-height: 1.6;
}

/* Nút hành động gửi yêu cầu màu xanh lam sáng đặc trưng */
.btn-send-inquiry {
    display: inline-flex;
    align-items: center;
    background-color: #009fe3; /* Đúng màu xanh cyan sáng của hình mẫu */
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 3px 10px rgba(0, 159, 227, 0.15);
}
.btn-send-inquiry:hover {
    background-color: #0082ba;
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 159, 227, 0.3);
}

/* Các vòng tròn mạng xã hội chia sẻ */
.share-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
}
.share-social-icons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.share-social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #cbd5e1;
    border-radius: 50%; /* Bo tròn xoe */
    color: #64748b;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.share-social-icons a:hover {
    background-color: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

/* Tinh chỉnh responsive thu nhỏ trên điện thoại */
@media (max-width: 767px) {
    .detail-product-name {
        font-size: 22px;
    }
    .btn-send-inquiry {
        width: 100%; /* Trên mobile nút tự động giãn rộng ra full cho dễ bấm */
        justify-content: center;
    }
}


/* ==========================================================================
   PREFIX COMPONENT VERSION 2: ISOLATED PRODUCT DETAIL STYLES (.pdetail-v2)
   ========================================================================== */

/* 1. KHỐI BANNER BREADCRUMB ĐẦU TRANG */
.pdetail-v2-banner-breadcrumb {
    position: relative;
    padding: 60px 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.pdetail-v2-banner-breadcrumb .pdetail-v2-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.65); /* Phủ lớp xám tối sang trọng */
    z-index: 1;
}
.pdetail-v2-banner-breadcrumb .breadcrumb {
    padding: 0;
    margin: 0;
    background: transparent;
}
.pdetail-v2-banner-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.6);
    content: " / ";
}

/* 2. KHU VỰC THƯ VIỆN HÌNH ẢNH (SLIDER & THUMBNAIL) */
.pdetail-v2-gallery-box .pdetail-v2-main-image-wrap {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    border-radius: 6px;
    padding: 8px;
    position: relative;
    overflow: hidden;
    padding-top: 75%; /* Tỉ lệ vàng hiển thị ảnh thiết bị */
}
.pdetail-v2-gallery-box .pdetail-v2-main-image-wrap img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
}

/* Định hình cụm slider thumbnails phụ */
.pdetail-v2-gallery-box .pdetail-v2-thumb-item {
    padding: 4px;
}
.pdetail-v2-gallery-box .pdetail-v2-thumb-card {
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #ffffff;
    padding-top: 100%; /* Giữ khung thumbnail vuông vắn */
    position: relative;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.pdetail-v2-gallery-box .pdetail-v2-thumb-card img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}
/* Hiệu ứng kích hoạt viền cam nổi bật */
.pdetail-v2-gallery-box .pdetail-v2-thumb-card.zoomGalleryActive,
.pdetail-v2-gallery-box .pdetail-v2-thumb-card:hover {
    border-color: #f26522;
    box-shadow: 0 0 0 1px #f26522;
}

/* Khối các nút MXH san sẻ dưới ảnh */
.pdetail-v2-social-share-group {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    justify-content: center;
}
.pdetail-v2-social-share-group .pdetail-v2-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.pdetail-v2-social-share-group .pdetail-v2-share-btn:hover {
    background-color: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
    transform: translateY(-2px);
}

/* 3. KHỐI THÔNG TIN CHI TIẾT SẢN PHẨM (CỘT PHẢI) */
.pdetail-v2-info-summary .pdetail-v2-main-title {
    font-size: 26px;
    font-weight: 700;
    color: #1e293b; /* Màu xanh navy đậm đà */
    margin-bottom: 12px;
    line-height: 1.3;
}
.pdetail-v2-info-summary .pdetail-v2-stars-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #ffbc0b; /* Màu vàng chuẩn sao đánh giá */
}
.pdetail-v2-info-summary .pdetail-v2-short-desc {
    font-size: 14.5px;
    color: #475569;
    line-height: 1.6;
    margin: 20px 0;
}
.pdetail-v2-info-summary .pdetail-v2-price-box {
    background-color: #f8fafc;
    padding: 12px 20px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 20px;
}
.pdetail-v2-info-summary .pdetail-v2-price-value {
    font-size: 24px;
    font-weight: 700;
    color: #ef4444; /* Màu đỏ nổi bật cho giá */
    margin-bottom: 0;
}

/* 4. KHỐI TABS THÔNG TIN CHI TIẾT (NỘI DUNG CHÍNH) */
.pdetail-v2-tabs-section .nav-tabs {
    border-bottom: 2px solid #e2e8f0;
}
.pdetail-v2-tabs-section .nav-tabs .nav-link {
    border: none;
    color: #64748b;
    font-size: 15px;
    padding: 12px 24px;
    position: relative;
    background: transparent;
    transition: color 0.2s ease;
}
.pdetail-v2-tabs-section .nav-tabs .nav-link.active {
    color: #f26522; /* Cam thương hiệu */
    font-weight: 700;
}
.pdetail-v2-tabs-section .nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #f26522;
}
.pdetail-v2-tabs-section .pdetail-v2-tab-body {
    padding: 25px 0;
    font-size: 15px;
    line-height: 1.7;
    color: #334155;
}

/* 5. KHỐI SẢN PHẨM LIÊN QUAN (RELATED PRODUCTS) */
.pdetail-v2-related-section .pdetail-v2-section-heading {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 25px;
    border-bottom: 1px solid #e2e8f0;
}
.pdetail-v2-related-section .pdetail-v2-section-heading::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 2px;
    background-color: #f26522;
}

/* Thẻ card sản phẩm liên quan */
.pdetail-v2-product-item-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    transition: all 0.3s ease;
}
.pdetail-v2-product-item-card .pdetail-v2-img-container {
    width: 100%;
    padding-top: 100%;
    position: relative;
    margin-bottom: 12px;
    overflow: hidden;
}
.pdetail-v2-product-item-card .pdetail-v2-img-container img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.4s ease;
}
.pdetail-v2-product-item-card .pdetail-v2-prod-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin: 8px 0;
    line-height: 1.4;
}
.pdetail-v2-product-item-card .pdetail-v2-prod-price {
    font-size: 14px;
    font-weight: 700;
    color: #ef4444;
    margin-top: auto;
}

/* Hiệu ứng tương tác khối liên quan */
.pdetail-v2-product-item-card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
    transform: translateY(-2px);
}
.pdetail-v2-product-item-card:hover .pdetail-v2-prod-title {
    color: #f26522;
}
.pdetail-v2-product-item-card:hover .pdetail-v2-img-container img {
    transform: translate(-50%, -50%) scale(1.04);
}

/* 6. TINH CHỈNH ĐÁP ỨNG TRÊN ĐIỆN THOẠI (RESPONSIVE) */
@media (max-width: 767px) {
    .pdetail-v2-banner-breadcrumb {
        padding: 35px 0;
    }
    .pdetail-v2-info-summary .pdetail-v2-main-title {
        font-size: 20px;
        margin-top: 15px;
    }
    .pdetail-v2-tabs-section .nav-tabs .nav-link {
        padding: 10px 15px;
        font-size: 14px;
    }
}



/* ==========================================================================
   CUSTOM STYLE CHO CỤM THUMBNAIL (SLICK SLIDER + MAGIC ZOOM PLUS)
   ========================================================================== */

/* 1. Khung bọc danh sách - Tạo khoảng trống phía trên vừa đủ */
#list-product-thumb {
    margin-top: 15px !important;
    padding: 2px 0;
}

/* 2. Style cho từng item slide */
#list-product-thumb .pdetail-v2-thumb-item {
    padding: 0 6px; /* Tạo khoảng cách (gutter) giữa các ô ảnh thu nhỏ */
    outline: none;  /* Khử đường viền outline mặc định của slick khi click */
}

/* 3. Thẻ chứa link (Khung hình vuông tỉ lệ 1:1) */
#list-product-thumb .pdetail-v2-thumb-card {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 100%; /* Đảm bảo khung luôn vuông tuyệt đối bất kể kích thước màn hình */
    background-color: #ffffff;
    border: 1px solid #e2e8f0; /* Viền xám mỏng tinh tế */
    border-radius: 6px;        /* Bo góc nhẹ hiện đại */
    overflow: hidden;
    cursor: pointer;
    outline: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 4. Căn giữa và xử lý ảnh bên trong khung vuông */
#list-product-thumb .pdetail-v2-thumb-card img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    max-width: 90%;  /* Để thừa khoảng trống (padding) bên trong cho ảnh thở */
    max-height: 90%;
    width: auto !important; /* Khử việc Slick ép tràn 100% chiều ngang làm méo ảnh */
    height: auto !important;
    object-fit: contain;
    transition: transform 0.3s ease;
    border-radius: 10px;
}

/* 5. Hiệu ứng Hover & Trạng thái Active khi chọn ảnh (mz-thumb-selected) */
#list-product-thumb .pdetail-v2-thumb-card:hover,
#list-product-thumb .pdetail-v2-thumb-card.mz-thumb-selected {
    border-color: #033691  !important; /* Đổi sang màu cam thương hiệu */
/*    box-shadow: 0 0 0 1px #f26522, 0 4px 12px rgba(242, 101, 34, 0.15); */
}

/* Tạo hiệu ứng zoom nhẹ ảnh thumbnail khi đưa chuột vào */
#list-product-thumb .pdetail-v2-thumb-card:hover img {
    transform: translate(-50%, -50%) scale(1.05);
}


/* ==========================================================================
   CUSTOM STYLE CHO 2 NÚT BẤM TRÁI - PHẢI CỦA THUMBNAIL SLIDER
   ========================================================================== */

/* Thiết lập khung chứa thumbnail có khoảng cách 2 bên để chứa nút */
.product-detail-slider-horizontal {
    position: relative;
    padding: 0 30px; /* Tạo khoảng trống 2 bên cho nút bấm đứng */
}

/* Style chung cho cả 2 nút */
.pdetail-v2-slick-prev,
.pdetail-v2-slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 28px;
    height: 28px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
    padding: 0;
}

/* Vị trí nút Trái */
.pdetail-v2-slick-prev {
    left: 0px;
}

/* Vị trí nút Phải */
.pdetail-v2-slick-next {
    right: 0px;
}

/* Hiệu ứng Hover lên nút */
.pdetail-v2-slick-prev:hover,
.pdetail-v2-slick-next:hover {
    background-color: #033691  ;
    border-color: #033691  ;
    color: #ffffff;
}

/* Hiệu ứng làm mờ/ẩn nút khi slide đã chạm giới hạn đầu/cuối (Do dùng infinite: false) */
.pdetail-v2-slick-prev.slick-disabled,
.pdetail-v2-slick-next.slick-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none; /* Khóa không cho click khi đã vô hiệu */
}


a.send-inquiry {
    width: 230px;
    height: 40px;
    display: -webkit-flex;
    flex-flow: row;
    align-items: center;
    background-color: #001473 ;
    color: #f2fcff;
    font-size: 15px;
    font-weight: 600;
    margin: 20px 0 0 0;
    justify-content: center;
    text-decoration: none;
}



/**/
.products-detail .social-block .social-btns .btn {
    display: inline-block;
    background-color: #fff;
    width: 40px;
    height: 40px;
    line-height: 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, .1);
    opacity: .99;
    padding: 5px;
    border: 1px solid #f0f1f4;
}
.products-detail .social-block .social-btns .btn:before {
    content: '';
    width: 150%;
    height: 150%;
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 90%;
    left: -120%;
}
.products-detail .social-block .social-btns .btn.facebook:before {
    background-color: #3b5998;
}
.products-detail .social-block .social-btns .btn .fab {
    font-size: 20px;
    vertical-align: middle;
    -webkit-transform: scale(.8);
    transform: scale(.8);
}
.products-detail .social-block .social-btns .btn.facebook .fab {
    color: #3b5998;
}
.products-detail .social-block img {
    width: 30px;
    margin-right: 10px;
    position: relative;
    z-index: 9;
}
.products-detail .social-block .social-btns .btn .fab {
    font-size: 20px;
    vertical-align: middle;
    -webkit-transform: scale(.8);
    transform: scale(.8)
}

.products-detail .social-block .social-btns .btn.facebook:before {
    background-color: #3b5998
}

.products-detail .social-block .social-btns .btn.facebook .fab {
    color: #3b5998
}

.products-detail .social-block .social-btns .btn.twitter:before {
    background-color: #3cf
}

.products-detail .social-block .social-btns .btn.twitter .fab {
    color: #3cf
}

.products-detail .social-block .social-btns .btn.google:before {
    background-color: #dc4a38
}

.products-detail .social-block .social-btns .btn.google .fab {
    color: #dc4a38
}

.products-detail .social-block .social-btns .btn.dribbble:before {
    background-color: #f26798
}

.products-detail .social-block .social-btns .btn.dribbble .fab {
    color: #f26798
}

.products-detail .social-block .social-btns .btn.skype:before {
    background-color: #00aff0
}

.products-detail .social-block .social-btns .btn.skype .fab {
    color: #00aff0
}

.products-detail .social-block .social-btns .btn:focus:before,.products-detail .social-block .social-btns .btn:hover:before {
    top: -25%;
    left: -25%
}

.products-detail .social-block .social-btns .btn:focus .fab,.products-detail .social-block .social-btns .btn:hover .fab {
    color: #fff;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.products-detail .social-block .social-btns .btn:hover img {
    filter: saturate(8)
}

.products-detail .social-block .social-btns .btn, .products-detail .social-block .social-btns .btn:before, .products-detail .social-block .social-btns .btn .fab
{
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
    -webkit-transition-timing-function: cubic-bezier(.31, -.105, .43, 1.59);
    transition-timing-function: cubic-bezier(.31, -.105, .43, 1.59);
}

/**/

/*tab*/

/* ==========================================================================
   MODERN TABS & ARTICLE CONTENT STYLE (pdetail-v2)
   ========================================================================== */

/* Khung bọc khu vực Tab */
.pdetail-v2-tabs-section {
    background-color: #f6f6f6;
    border-top: 1px solid #f1f5f9;
}

/* Thanh menu tab tối giản */
.pdetail-v2-nav-tabs {
    display: flex;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    border-bottom: 2px solid #f1f5f9; /* Đường thắt nền xám nhạt */
}

.pdetail-v2-tab-item {
    margin-right: 2rem;
}

/* Định dáng chữ nút Tab */
.pdetail-v2-tab-link {
    display: block;
    padding: 12px 4px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #64748b; /* Màu xám tinh tế khi chưa chọn */
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;
}

.pdetail-v2-tab-link i {
    font-size: 1.2rem;
    vertical-align: -2px;
}

/* Hiệu ứng Hover nút tab */
.pdetail-v2-tab-link:hover {
    color: #0f172a; /* Đậm lên khi di chuột */
}

/* Trạng thái Tab đang được chọn (Active) */
.pdetail-v2-tab-link.active {
    color: #033892; /* Màu cam thương hiệu */
    text-transform: uppercase;
    font-size: 18px;
}

/* Tạo đường gạch chân hiệu ứng mượt mà dưới chữ khi active */
.pdetail-v2-tab-link::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Đè khít lên đường viền xám tổng thể */
    left: 0;
    width: 0;
    height: 2px;
    background-color: #033892;
    transition: width 0.3s ease;
}
.pdetail-v2-tab-link.active::after {
    width: 100%;
}

/* Khung nội dung */
.pdetail-v2-tab-pane {
    display: none;
}
.pdetail-v2-tab-pane.active {
    display: block;
}

/* Animation mượt khi chuyển đổi qua lại */
.animate-fade-in {
    animation: pdetailFadeIn 0.4s ease-in-out forwards;
}

@keyframes pdetailFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   STYLE CHI TIẾT BÀI VIẾT (Fix lỗi text thô từ bộ soạn thảo admin)
   -------------------------------------------------------------------------- */
.pdetail-v2-article-content {
    font-size: 1.025rem;
    line-height: 1.7;
    color: #334155; /* Màu chữ xám đen bảo vệ mắt người đọc */
}

.pdetail-v2-article-content p {
    margin-bottom: 1.25rem;
}

/* Xử lý hình ảnh do Admin chèn vào không bao giờ tràn hoặc vỡ khung hình */
.pdetail-v2-article-content img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
    border-radius: 6px;
    margin: 10px auto;
    display: block;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

/* Định dạng bảng (Table) trong nội dung chi tiết nếu có thông số kỹ thuật */
.pdetail-v2-article-content table {
    width: 100% !important;
    max-width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
    background-color: #ffffff;
}

.pdetail-v2-article-content table td, 
.pdetail-v2-article-content table th {
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    font-size: 0.95rem;
}

.pdetail-v2-article-content table tr:nth-child(even) {
    background-color: #f8fafc; /* Màu nền xen kẽ cho bảng dễ đọc */
}

.pdetail-v2-article-content table th {
    background-color: #f1f5f9;
    font-weight: 600;
    color: #0f172a;
}
.sp_khaclienquan h3.header {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
}
/*tab*/



.menu_mobile
{
    display: none;

}
.khung1_left {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.name_tts
{
    color: #fff; font-size: 24px; letter-spacing: 1px;
    font-weight: 700;
}


.paging_chung {
    margin-top: 2rem;
    text-align: right;
    display: block;
}
.paging_chung a
{
    display: inline-block;
    height: 30px;
    width: 30px;
    line-height:30px;
    border:solid 1px var(--theme-main);
    text-align: center;
    color: #000    ;
}

.paging_chung span
{
    display: inline-block;
    height: 30px;
    width: 30px;
    line-height:30px;
    border:solid 1px var(--theme-main);
    text-align: center;
    color: red;
}
.footer-whatsapp-wrap {
    flex-direction: column;
    display: flex;
}

.footer-whatsapp-wrap a {
    margin-bottom: 10px;
}
.namechung {
    font-size: 16px;
}



@media only screen and (min-width: 1366px) {
    .container-fluid {
        max-width: 90%;
        margin-right: auto;
        margin-left: auto;
    }
}

@media only screen and (min-width: 1px) and (max-width: 1199px)
{   
    #navbarNav
    {
        display: none!important;
    }
    .menu_mobile
    {
        display: block;
    }
}

@media only screen and (min-width: 1px) and (max-width: 1024px)
{


}
@media only screen and (min-width: 1px) and (max-width: 991px)
{


}
@media only screen and (min-width: 1px) and (max-width: 768px)
{


}
@media only screen and (min-width: 1px) and (max-width: 500px)
{   
    .name_tts
    {
        font-size: 17px;
    }
    .main-title 
    {
        font-size: 23px;
    }
}