:root{
    /* --- Color System --- */

    --primary-color:#0066cc; /* Màu chủ đạo (Topbar, Header CTA, Nav) */
    --primary-hover:#0052a3; /* Màu hover cho tông chủ đạo */
    --accent-color:#0073e6; /* Màu điểm nhấn (Link, Tab Active, Border hover) */
    --price-color:#d71921; /* Màu hiển thị giá / Khuyến mãi */

    --text-main:#222222; /* Màu chữ chính */
    --text-muted:#666666; /* Màu chữ phụ / Subtitle */
    --text-light:#888888; /* Màu chữ nhạt / Gạch ngang giá cũ */
    --text-white:#ffffff; /* Chữ trắng */

    --bg-main:#ffffff; /* Nền chính */
    --bg-light:#f5f9ff; /* Nền phụ nhạt (Card hover, Box giá, Box báo giá) */
    --bg-dark:#1f2933; /* Nền Footer */
    --bg-tab:#f1f5f9; /* Nền Tab inactive */
    --tab-active-bg:#eaf4ff;
    --tab-active-color:#0066cc;
    --tab-border-active:#0066cc;

    --border-color:#dce3eb; /* Viền xám xanh nhạt tiêu chuẩn */
    --border-dashed:#d9dee5; /* Viền nét đứt */

    /* --- Typography & Layout --- */

    --font-sans:Helvetica, sans-serif;
    --max-width:1140px;
    --max-width-narrow:1140px;

    --radius-sm:4px;
    --radius-md:6px;
    --radius-lg:8px;

    --transition:all 0.25s ease;
}

*, *::before, *::after{
    box-sizing:border-box;
}

body{
    margin:0;
    padding:0;
    font-family:var(--font-sans);
    font-size:14px;
    line-height:1.5;
    color:var(--text-main);
    background-color:var(--bg-main);
    -webkit-font-smoothing:antialiased;
}

a{
    color:var(--accent-color);
    text-decoration:none;
    transition:var(--transition);
}

a:hover{
    color:var(--primary-color);
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

.head-bar-container{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;
    background-color:var(--primary-color);
    color:#ffffff;
    font-size:13px;
    box-shadow:0 2px 5px rgba(0, 0, 0, 0.1);
}

.head-bar-content{
    width:100%;
    max-width:var(--max-width-narrow);
    margin:0 auto;
    padding:6px 15px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
}

.left-box{
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.right-box ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
}

.right-box li{
    display:flex;
    align-items:center;
    gap:4px;
    white-space:nowrap;
}

.right-box li span{
    font-weight:600;
    opacity:0.9;
}

@media (min-width:768px){
    .head-bar-content{
        flex-direction:row; /* Chuyển thành hàng ngang trên PC */
        justify-content:space-between;
        padding:8px 15px;
    }

    .left-box{
        text-align:left;
    }

    .right-box ul{
        justify-content:flex-end;
        gap:20px;
    }
}

.header-container{
    width:100%;
    background-color:#ffffff;
    border-bottom:1px solid #e5e5e5;

}

.header{
    width:100%;
}

.header-content{
    width:100%;
    max-width:var(--max-width-narrow);
    margin:0 auto;
    padding:12px 15px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}

.logo-box .logo{
    display:block;
    line-height:0;
}

.logo-box img{
    width:212px;
    height:76px;
    object-fit:contain;
}

.top-head-search{
    width:100%;
}

.top-head-search form,
.top-head-search .form-search{
    display:flex;
    position:relative;
    width:100%;
}

.top-head-search input[type="text"],
.top-head-search .input-text{
    width:100%;
    height:40px;
    padding:0 45px 0 15px;
    border:2px solid #e1e1e1;
    border-radius:4px;
    font-size:14px;
    outline:none;
    transition:border-color 0.2s ease;
}

.top-head-search input[type="text"]:focus{
    border-color:var(--primary-color);
}

.top-head-search button.button,
.top-head-search button[type="submit"]{
    position:absolute;
    right:0;
    top:0;
    height:100%;
    width:45px;
    background-color:var(--primary-color);
    border:none;
    color:#fff;
    border-radius:0 4px 4px 0;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.cta-box{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    width:100%;
    font-size:13px;
    font-weight:600;
}

.cta-box a{
    color:#333333;
    text-decoration:none;
    transition:color 0.2s ease;
}

.cta-box a:hover{
    color:var(--primary-color);
}

.cta-box > div:first-child a{
    display:inline-block;
    padding:8px 14px;
    background-color:#f5f5f5;
    border:1px solid #ddd;
    border-radius:4px;
    color:var(--primary-color);
}

.cta-box > div:first-child a:hover{
    background-color:var(--primary-color);
    color:#ffffff;
    border-color:var(--primary-color);
}

.cta-box > div:last-child a{
    color:var(--primary-color);
    font-size:15px;
    font-weight:700;
    margin-left:4px;
}

@media (min-width:768px){
    .header-container{
       /* margin-top:35px;*/
    }

    .header-content{
        flex-direction:row;
        justify-content:space-between;
        padding:15px;
        gap:20px;
    }

    .logo-box{
        flex-shrink:0;
    }

    .top-head-search{

        flex-grow:1;
        max-width:500px;
    }

    .cta-box{
        width:auto;
        flex-shrink:0;
        justify-content:flex-end;
        gap:20px;
    }
}

.nav-container{
    background-color:var(--primary-color); /* Màu nền đỏ chủ đạo */
    width:100%;
    position:relative;
    z-index:999;
}

/* Thẻ UL danh sách cấp 0 (#nav) - Khung 1140px & Căn giữa */
#nav{
    max-width:var(--max-width-narrow);
    margin:0 auto;
    padding:0 15px;
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    box-sizing:border-box;
}

/* Reset chung cho các UL danh sách con */
#nav ul{
    list-style:none;
    margin:0;
    padding:0;
}

/* ==========================================
   LEVEL 0 (DANH MỤC CẤP CAO NHẤT)
   ========================================== */
#nav li.level0{
    position:relative;
}

#nav li.level0 > a{
    display:block;
    padding:12px 16px;
    color:#ffffff;
    font-size:14px;
    font-size:12px;
    font-weight:700;
    text-decoration:none;
    text-transform:uppercase;
    white-space:nowrap;
    transition:background-color 0.2s ease, color 0.2s ease;
}

/* Hover/Active cho Menu Cấp 0 */
#nav li.level0:hover > a,
#nav li.level0.active > a{
    background-color:var(--primary-hover);
    color:#ffffff;
}

/* ==========================================
   LEVEL 1 (DROPDOWN MENU CẤP 1)
   ========================================== */
#nav ul.level0{
    position:absolute;
    top:100%;
    left:0;
    min-width:260px;
    background-color:#ffffff;
    box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);
    border-top:3px solid var(--primary-color);
    border-radius:0 0 4px 4px;

    /* Ẩn mặc định, chỉ hiện khi hover */
    display:none;
    z-index:1000;
}

/* Mở Dropdown Cấp 1 khi di chuột vào Level 0 */
#nav li.level0:hover > ul.level0{
    display:block;
}

#nav li.level1{
    position:relative;
    border-bottom:1px solid #f1f1f1;
}

#nav li.level1:last-child{
    border-bottom:none;
}

#nav li.level1 > a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 15px;
    color:#333333;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    transition:background-color 0.2s ease, color 0.2s ease;
}

#nav li.level1:hover > a{
    background-color:#f8f9fa;
    color:var(--primary-color);
}

/* Thêm mũi tên chỉ sang phải nếu Level 1 có danh mục con (parent) */
#nav li.level1.parent > a::after{

    font-size:16px;
    line-height:1;
    color:#888888;
}

#nav li.level1.parent:hover > a::after{
    color:var(--primary-color);
}

/* ==========================================
   LEVEL 2 & LEVEL 3 (SUBMENU FLYOUT CẤP 2, 3)
   ========================================== */
#nav ul.level1,
#nav ul.level2{
    position:absolute;
    top:0;
    left:100%; /* Đẩy submenu sang cạnh phải của menu cha */
    min-width:230px;
    background-color:#ffffff;
    box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);
    border-left:2px solid var(--primary-color);
    border-radius:0 4px 4px 0;

    /* Ẩn mặc định */
    display:none;
    z-index:1001;
}

/* Hiển thị Submenu khi hover vào các thẻ con tương ứng */
#nav li.level1:hover > ul.level1,
#nav li.level2:hover > ul.level2{
    display:block;
}

#nav li.level2 > a,
#nav li.level3 > a,
#nav li.level4 > a{
    display:block;
    padding:9px 15px;
    color:#444444;
    font-size:13px;
    font-weight:400;
    text-decoration:none;
    border-bottom:1px solid #f5f5f5;
    transition:background-color 0.2s ease, color 0.2s ease;
}

#nav li.level2:hover > a,
#nav li.level3:hover > a,
#nav li.level4:hover > a{
    background-color:#f8f9fa;
    color:var(--primary-color);
    padding-left:18px;
}

/* ==========================================
   MOBILE & TABLET RESPONSIVE (Dưới 992px)
   ========================================== */
@media (max-width:991px){
    #nav{
        flex-direction:column;
        padding:0;
    }

    #nav li.level0 > a{
        padding:10px 15px;
        border-bottom:1px solid rgba(255, 255, 255, 0.1);
    }

    /* Trên thiết bị di động, bỏ position absolute để dàn xếp dọc */
    #nav ul.level0,
    #nav ul.level1,
    #nav ul.level2{
        position:static !important;
        width:100%;
        box-shadow:none;
        border:none;
        background-color:#f9f9f9;
        display:block !important;
        padding-left:25px;
    }
    #nav li.level1 > a{
        font-weight:normal;
    }

    #nav li.level0:hover > ul.level0,
    #nav li.level1:hover > ul.level1,
    #nav li.level2:hover > ul.level2{
        display:block;
    }

    #nav li.level1 > a,
    #nav li.level2 > a{
        padding-left:25px;
    }
}

/* ==========================================
   CATEGORY PRODUCTS GRID & PAGINATION CSS
   ========================================== */

/* Container chính */
.category-products{
    width:100%;
    margin:0 auto;
    padding:15px 0;
    box-sizing:border-box;
}

/* 1. PRODUCT GRID LAYOUT */
.products-grid,
.product-item-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr); /* Default 4 cột trên Desktop lớn */
    gap:16px;
    list-style:none;
    padding:0;
    margin:0;
}

/* ==========================================================================
   PRODUCT ITEM GRID (.product-item-grid) - MOBILE FIRST (NO IMPORTANT)
   ========================================================================== */

/* 1. Mặc định cho Mobile (< 576px): 1 Cột */
ul.product-item-grid,
div.product-item-grid,
.product-item-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
    padding:0;
    margin:0;
    list-style:none;
}

/* 2. Mobile lớn / Tablet nhỏ (>= 576px): 2 Cột */
@media (min-width:576px){
    ul.product-item-grid,
    div.product-item-grid,
    .product-item-grid{
        grid-template-columns:repeat(2, 1fr);
        gap:12px;
    }
}

/* 3. Tablet (>= 768px): 3 Cột */
@media (min-width:768px){
    ul.product-item-grid,
    div.product-item-grid,
    .product-item-grid{
        grid-template-columns:repeat(3, 1fr);
        gap:15px;
    }
}

/* 4. Laptop / Desktop nhỏ (>= 992px): 4 Cột */
@media (min-width:992px){
    ul.product-item-grid,
    div.product-item-grid,
    .product-item-grid{
        grid-template-columns:repeat(4, 1fr);
    }
}

/* 5. Desktop lớn (>= 1200px): Trả về 5 Cột trên 1 Hàng */
@media (min-width:1200px){
    ul.product-item-grid,
    div.product-item-grid,
    .product-item-grid{
        grid-template-columns:repeat(5, 1fr);
    }
}

/* Mỗi item sản phẩm */
.products-grid .item,
.product-item-grid .item{
    display:flex;
    box-sizing:border-box;
}

/* Wrapper chứa toàn bộ thông tin sản phẩm (Card) */
.product-item-grid .item-wrapper,
.products-grid .item-wrapper{
    display:flex;
    flex-direction:column;
    width:100%;
    background-color:#ffffff;
    border:1px solid #e5e5e5;
    border-radius:6px;
    padding:12px;
    transition:all 0.25s ease;
    box-sizing:border-box;
}

.product-item-grid .item-wrapper:hover,
.products-grid .item-wrapper:hover{
    border-color:#d0d0d0;
    box-shadow:0 4px 12px rgba(0, 0, 0, 0.08);
    transform:translateY(-2px);
}

/* Ảnh sản phẩm */
.product-item-grid .product-image,
.products-grid .product-image{
    display:block;
    width:100%;
    text-align:center;
    overflow:hidden;
    margin-bottom:10px;
}

.product-item-grid .product-image img,
.products-grid .product-image img{
    max-width:100%;
    height:auto;
    aspect-ratio:1 / 1;
    object-fit:contain;
    transition:transform 0.3s ease;
}

.product-item-grid .item-wrapper:hover .product-image img,
.products-grid .item-wrapper:hover .product-image img{
    transform:scale(1.04);
}

/* Tên sản phẩm */
.product-item-grid .product-name,
.products-grid .product-name{
    font-size:14px;
    line-height:1.4;
    margin:0 0 8px 0;
    font-weight:600;
    text-align:center;
    /*height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;*/
    -webkit-box-orient:vertical;
}

.product-item-grid .product-name a,
.products-grid .product-name a{
    color:#333333;
    text-decoration:none;
    transition:color 0.2s ease;
}

.product-item-grid .product-name a:hover,
.products-grid .product-name a:hover{
    color:#0066cc;
}

/* Phần thông tin & giá (Đẩy xuống cuối card) */
.product-item-grid .product-info,
.products-grid .product-info{
    margin-top:auto;
    display:flex;
    flex-direction:column;
}

/* Hộp hiển thị giá */
.product-item-grid .price-box,
.products-grid .price-box{
    margin-top:6px;
    justify-content:center;
}

/* Giá liên hệ / Custom Price */
.product-item-grid .custom-rezo-price,
.products-grid .custom-rezo-price{
    font-size:14px;
    font-weight:600;
    color:#d9534f; /* Màu nổi bật cho Giá liên hệ */
}

/* Giá hiển thị bằng tiền mặt */
.product-item-grid .regular-price .price,
.products-grid .regular-price .price{
    font-size:15px;
    font-weight:700;
    color:#e4393c;
}

/* ==========================================
   2. PAGINATION / TOOLBAR BOTTOM
   ========================================== */

.toolbar-bottom{
    margin-top:30px;
    padding-top:15px;
    border-top:1px solid #eee;
}

.toolbar{
    display:flex;
    justify-content:flex-end;
    align-items:center;
}

.pages ol{
    display:flex;
    align-items:center;
    gap:6px;
    list-style:none;
    padding:0;
    margin:0;
}

.pages li{
    display:inline-block;
}

/* Nút phân trang */
.pages li a,
.pages li.current{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:34px;
    height:34px;
    padding:0 6px;
    border:1px solid #ddd;
    border-radius:4px;
    font-size:14px;
    color:#555555;
    text-decoration:none;
    background-color:#fff;
    box-sizing:border-box;
    transition:all 0.2s ease;
}

/* Hover các con số */
.pages li a:hover{
    background-color:#f5f5f5;
    border-color:#bbb;
    color:#0066cc;
}

/* Trang hiện tại (Active) */
.pages li.current{
    background-color:#0066cc;
    border-color:#0066cc;
    color:#ffffff;
    font-weight:bold;
}

/* Nút Next */
.pages li a.i-next{
    padding:0 10px;
}

.pages li a.i-next img{
    vertical-align:middle;
}

/* ==========================================
   3. RESPONSIVE BREAKPOINTS
   ========================================== */

/* Màn hình Tablet / PC nhỏ (< 992px) */
@media (max-width:991px){
    .products-grid{
        grid-template-columns:repeat(3, 1fr); /* 3 cột */
        gap:12px;
    }
}

/* Màn hình Mobile lớn (< 768px) */
@media (max-width:767px){
    .products-grid{
        grid-template-columns:repeat(2, 1fr); /* 2 cột */
        gap:10px;
    }

    .products-grid .product-name{
        font-size:13px;

    }

    .toolbar{
        justify-content:center; /* Căn giữa phân trang trên mobile */
    }
}

/* Màn hình Mobile nhỏ (< 480px) */
@media (max-width:479px){
    .products-grid{
        grid-template-columns:repeat(2, 1fr); /* Vẫn giữ 2 cột tiện xem sản phẩm */
        gap:8px;
    }

    .products-grid .item-wrapper{
        padding:8px;
    }
}

/* ==========================================
   COL2-LEFT LAYOUT CSS (MAGENTO 1.x / 2.x)
   ========================================== */
.main-container.col1-layout .main{


}

.main-container.col2-left-layout .main,
.main-container.col2-right-layout .main{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    max-width:var(--max-width-narrow);
    margin:0 auto;
    padding:0 15px;
    box-sizing:border-box;
}

.main-container .breadcrumbs{
    width:100%;
    margin-bottom:15px;
    max-width:var(--max-width-narrow);
    margin:0 auto;
}

.main-container.col2-left-layout .col-left,
.main-container.col2-right-layout .col-right{
    order:1;
    width:25%;
    flex-shrink:0;
    box-sizing:border-box;
}

/* Nội dung chính nằm bên phải */
.main-container.col2-left-layout .col-main,
.main-container.col2-right-layout .col-main{
    order:2; /* Hiển thị sau */
    flex:1; /* Tự động lấy phần chiều rộng còn lại (~75%) */
    min-width:0; /* Ngăn vỡ layout do content tràn */
    box-sizing:border-box;
}

.main-container.col2-right-layout .col-main{
    order:1;
}

.main-container.col2-right-layout .col-right{
    order:2;
}

/* ==========================================
   4. RESPONSIVE BREAKPOINTS
   ========================================== */

/* Khi vào màn hình Mobile/Tablet nhỏ (< 768px) */
@media (max-width:767px){
    .main-container.col2-left-layout .main,
    .main-container.col2-right-layout .main{
        flex-direction:column; /* Chuyển về 1 cột */
        gap:15px;
    }

    .main-container.col2-right-layout .col-right,
    .main-container.col2-right-layout .col-main,
    .main-container.col2-left-layout .col-left,
    .main-container.col2-left-layout .col-main{
        width:100%;
    }

    /* Đẩy danh sách sản phẩm lên trước, bộ lọc Sidebar xuống dưới trên Mobile */
    .main-container.col2-left-layout .col-main,
    .main-container.col2-right-layout .col-main{
        order:1;
    }

    .main-container.col2-left-layout .col-left,
    .main-container.col2-right-layout .col-right{
        order:2;
    }
}

/* ==========================================
   BREADCRUMBS STYLES
   ========================================== */

.breadcrumbs{
    padding:10px 0;
    margin-bottom:15px;
    font-size:13px;
    line-height:1.4;
    color:#666666;
}

/* Danh sách link liên kết */
.breadcrumbs ul{

    align-items:center;
    list-style:none;
    padding:0;
    margin:0;
}

.breadcrumbs li{
    display:inline;
    align-items:center;
}

/* Định dạng các đường dẫn thẻ a */
.breadcrumbs a{
    color:#555555;
    text-decoration:none;
    transition:color 0.2s ease;
}

.breadcrumbs a:hover{
    color:#0066cc; /* Màu khi rê chuột vào link */
    text-decoration:underline;
}

/* Ký tự phân cách (Dấu gạch /) */
.breadcrumbs span{
    margin:0 8px;
    color:#999999;
    font-size:12px;
    user-select:none; /* Ngăn bôi đen dấu phân cách */
}

/* Mục hiện tại (Trang/Danh mục đang đứng) */
.breadcrumbs strong{
    color:#555;
    font-weight:600;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width:767px){
    .breadcrumbs{
        font-size:12px;
        padding:8px 0;
    }

    .breadcrumbs span{
        margin:0 5px;
    }
}

/* ==========================================================================
   MAGENTO LAYERED NAVIGATION (.block-layered-nav) - UNIVERALLY STYLED
   ========================================================================== */

/* 1. Khung chứa tổng của Layered Nav (Áp dụng cho cả col-left, col-right, CMS) */
.block-layered-nav{
    background-color:var(--bg-main, #ffffff) !important;
    border:1px solid var(--border-color, #e5e5e5) !important;
    border-radius:var(--radius-lg, 8px) !important;
    padding:20px !important;
    margin-bottom:20px !important;
    box-sizing:border-box !important;
    box-shadow:0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

/* Reset danh sách DL trong khối bộ lọc */
.block-layered-nav dl#narrow-by-list{
    margin:0 !important;
    padding:0 !important;
}

/* 2. Tiêu đề các nhóm bộ lọc (<dt>) - Tiêu chuẩn gạch chân đỏ đồng bộ */
.block-layered-nav dl#narrow-by-list dt{
    font-size:15px !important;
    font-weight:700 !important;
    color:var(--text-main, #222222) !important;
    text-transform:uppercase !important;
    margin:18px 0 12px 0 !important;
    padding-bottom:6px !important;
    border-bottom:2px solid var(--primary-color, #b80000) !important;
    font-family:var(--font-sans, Arial, Helvetica, sans-serif) !important;
    display:block !important;
}

.block-layered-nav dl#narrow-by-list dt:first-of-type{
    margin-top:0 !important;
}

/* 3. Khối danh sách các tùy chọn bộ lọc (<dd>) */
.block-layered-nav dl#narrow-by-list dd{
    margin:0 0 16px 0 !important;
    padding:0 !important;
}

.block-layered-nav dl#narrow-by-list dd ol{
    list-style:none !important;
    padding:0 !important;
    margin:0 !important;
}

.block-layered-nav dl#narrow-by-list dd ol li{
    padding:6px 0 !important;
    border-bottom:1px dashed var(--border-color, #eee) !important;
    font-size:13.5px !important;
    line-height:1.4 !important;
}

.block-layered-nav dl#narrow-by-list dd ol li:last-child{
    border-bottom:none !important;
}

/* 4. Link & Hiệu ứng Hover */
.block-layered-nav dl#narrow-by-list dd ol li a{
    color:var(--text-muted, #555555) !important;
    text-decoration:none !important;
    display:flex !important;
    align-items:center !important;
    transition:var(--transition, all 0.2s ease) !important;
}

.block-layered-nav dl#narrow-by-list dd ol li a::before{
    font-size:14px;
    font-weight:bold;
    color:var(--text-light);
    margin-right:8px;
    transition:transform 0.2s ease, color 0.2s ease;
}

.block-layered-nav dl#narrow-by-list dd ol li a:hover{
    color:var(--primary-color);
    padding-left:4px;
}

.block-layered-nav dl#narrow-by-list dd ol li a:hover::before{
    color:var(--primary-color);
}

/* Format giá (.price) */
.block-layered-nav dl#narrow-by-list dd ol li a .price{
    font-weight:600 !important;
}

/* ==========================================
   CURRENTLY SHOPPING BY (ACTIVE FILTERS)
   ========================================== */

/* Khối tổng chứa danh sách lọc đang chọn */
.block-layered-nav .currently{
    background-color:#f8f9fa;
    border:1px solid #e9ecef;
    border-radius:6px;
    padding:12px;
    margin-bottom:12px;
}

/* Tiêu đề ẩn/hiện nếu có hoặc khoảng cách danh sách */
.block-layered-nav .currently ol{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:8px;
}

/* Mỗi item bộ lọc đang active dạng Tag/Badge */
.block-layered-nav .currently li{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background-color:#ffffff;
    border:1px solid #dee2e6;
    border-radius:4px;
    padding:6px 10px;
    font-size:13px;
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.03);
    transition:all 0.2s ease;
}

.block-layered-nav .currently li:hover{
    border-color:#ced4da;
}

/* Nhãn bộ lọc (Category, Price...) */
.block-layered-nav .currently .label{
    font-weight:600;
    color:#495057;
    margin-right:4px;
}

/* Giá trị lọc */
.block-layered-nav .currently .value{
    color:#0066cc;
    font-weight:500;
    flex:1;
    word-break:break-word;
}

/* Nút xóa item (Biến chữ 'Remove This Item' thành nút X) */
.block-layered-nav .currently .btn-remove{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    margin-left:8px;
    border-radius:50%;

    color:#868e96;
    text-decoration:none;
    transition:all 0.2s ease;
    flex-shrink:0;
}

.block-layered-nav .currently .btn-remove::before{

}

.block-layered-nav .currently .btn-remove:hover{
    background-color:#ff4d4f;
    color:#ffffff;
}

/* Nút Clear All (Xóa tất cả) */
.block-layered-nav .actions{
    text-align:right;
    margin-top:8px;
}

.block-layered-nav .actions a{
    display:inline-block;
    font-size:12px;
    color:#dc3545;
    text-decoration:none;
    font-weight:600;
    padding:4px 8px;
    border-radius:4px;
    transition:all 0.2s ease;
}

.block-layered-nav .actions a:hover{
    background-color:#fff5f5;
    text-decoration:underline;
}

/* ==========================================
   PRODUCT ITEM CARD STYLES
   ========================================== */

/* Khối bao ngoài của 1 sản phẩm */
.item{
    list-style:none;
    box-sizing:border-box;
}

.item-wrapper{
    background:#ffffff;
    border:1px solid #e5e5e5;
    border-radius:8px;
    padding:12px;
    display:flex;
    flex-direction:column;
    height:100%;
    transition:all 0.3s ease;
    position:relative;
    box-sizing:border-box;
}

.item-wrapper:hover{
    border-color:#0066cc;
    box-shadow:0 4px 12px rgba(0, 0, 0, 0.08);
    transform:translateY(-2px);
}

/* 1. ĐỊNH DẠNG ẢNH SẢN PHẨM */
.product-image{
    display:block;
    text-align:center;
    overflow:hidden;
    border-radius:4px;
    margin-bottom:10px;
}

.product-image img{
    max-width:100%;
    height:auto;
    display:block;
    margin:0 auto;
    transition:transform 0.3s ease;
}

.item-wrapper:hover .product-image img{
    transform:scale(1.04); /* Zoom nhẹ ảnh khi hover */
}

/* 2. TÊN SẢN PHẨM */
.products-grid .product-name{
    /* display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     height: 38px;*/
}

.product-name{
    font-size:14px;
    font-weight:600;
    line-height:1.4;
    margin:0 0 8px 0;

}

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

.product-name a:hover{
    color:#0066cc;
}

/* 3. KHỐI THÔNG TIN SẢN PHẨM & GIÁ */
.product-info{
    margin-top:auto; /* Đẩy giá xuống đáy card nếu tên ngắn */
}

/* ==========================================
   4. CHUYÊN SÂU PRICE BOX (GIÁ THƯỜNG / GIÁ KHUYẾN MÃI)
   ========================================== */

.price-box{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:6px 10px;
    margin-top:6px;
}

/* Ẩn các nhãn "Regular Price:", "Special Price" mặc định của Magento cho gọn gàng */
.price-box .price-label{
    display:none;
}
.refer-price-label{
    color:var(--text-main);
    font-weight:normal;
}

/* Trường hợp 1: Giá gốc (Regular Price - Khi KHÔNG có khuyến mãi) */
.price-box .regular-price{
    margin:0;
}

.price-box .regular-price .price{
    font-size:16px;
    font-weight:700;
    color:#d71921; /* Màu đỏ nổi bật cho giá */
}

/* Trường hợp 2: Có khuyến mãi (Bao gồm Giá cũ & Giá khuyến mãi) */

/* Giá khuyến mãi (Giá mới) */
.price-box .special-price{
    margin:0;
    order:1; /* Hiển thị trước */
}

.price-box .special-price .price{
    font-size:16px;
    font-weight:700;
    color:#d71921; /* Màu đỏ nổi bật cho giá đặc biệt */
}

/* Giá cũ (Giá gạch ngang) */
.price-box .old-price{
    margin:0;
    order:2; /* Hiển thị sau giá khuyến mãi */
}

.price-box .old-price .price{
    font-size:13px;
    color:#888888;
    text-decoration:line-through; /* Dấu gạch ngang giá cũ */
    font-weight:400;
}

/* ==========================================
   FOOTER STYLES
   ========================================== */

/* Outer Wrapper (Thường dùng background tối màu) */
.footer-container{
    background-color:#222222;
    color:#cccccc;
    font-size:13.5px;
    line-height:1.6;
    padding-top:40px;
    margin-top:40px;
    border-top:solid 4px var(--primary-color);
}

/* Inner Container */
.footer-container .footer{
    max-width:var(--max-width-narrow);
    margin:0 auto;
    padding:0 15px;
    box-sizing:border-box;
}

.footer-content .fa{
    color:var(--primary-color);
}

/* Layout 3 cột cho nội dung Footer */
.footer-container .footer-content{
    display:grid;
    grid-template-columns:2fr 1fr 1fr; /* Cột địa chỉ rộng gấp đôi 2 cột thông tin */
    gap:30px;
}

/* Fix đè style do lặp class .footer-content ở cấp con */
.footer-container .footer-content .footer-content{
    display:block;
}

/* Cột 1: Địa chỉ & Giới thiệu */
.company-address-box{
    color:#bbbbbb;
}

/* Tiêu đề các khối (H3) */
.footer-container h3{
    color:#ffffff;
    font-size:15px;
    font-weight:700;
    text-transform:uppercase;
    margin:0 0 15px 0;
    padding-bottom:8px;
    position:relative;
    letter-spacing:0.5px;
}

/* Gạch chân dưới tiêu đề H3 */
.footer-container h3::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:35px;
    height:2px;
    background-color:#0066cc;
}

/* Danh sách menu link */
.footer-container ul{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-container ul li{
    margin-bottom:8px;
}

.footer-container ul li a{
    color:#aaaaaa;
    text-decoration:none;
    transition:all 0.2s ease;
    display:inline-block;
}

.footer-container ul li a:hover{
    color:#ffffff;
    padding-left:4px; /* Hiệu ứng dịch chuyển nhẹ khi hover */
}

/* ==========================================
   BOTTOM FOOTER & COPYRIGHT
   ========================================== */

.bottom-footer{
    margin-top:35px;
    padding:15px 0;
    border-top:1px solid #333333;
    text-align:center;
}

.bottom-footer address{
    font-style:normal;
    color:#888888;
    font-size:12.5px;
    margin:0;
}

.footer{
    background:#222;
    color:#aaa;
    padding:45px 0 30px;
}

.footer .container{
    display:grid;
    grid-template-columns:45% 27.5% 27.5%;
    gap:40px;
}

.footer h3{
    color:#fff;
    font-size:16px;
    font-weight:700;
    margin-bottom:25px;
    position:relative;
    padding-bottom:12px;
}

.footer h3:after{
    content:"";
    width:40px;
    height:3px;
    background:var(--primary-color);
    position:absolute;
    left:0;
    bottom:0;
}

.footer p{
    line-height:1.8;
    margin:0 0 10px;
    font-size:14px;
}

.footer ul{
    padding:0;
    margin:0;
    list-style:none;
}

.footer ul li{
    margin-bottom:12px;
}

.footer ul li a{
    color:#aaa;
    text-decoration:none;
}

.footer ul li a:hover{
    color:#fff;
}

.footer-phone strong{
    color:#fff;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

/* Tablet (< 992px) */
@media (max-width:991px){
    .footer-container .footer-content{
        grid-template-columns:1fr 1fr; /* Chuyển thành 2 cột */
        gap:25px;
    }

    .company-address-box{
        grid-column:span 2; /* Cột địa chỉ chiếm trọn hàng đầu */
    }
}

/* Mobile (< 576px) */
@media (max-width:575px){
    .footer-container{
        padding-top:25px;
    }

    .footer-container .footer-content{
        grid-template-columns:1fr; /* Chuyển hoàn toàn về 1 cột */
        gap:20px;
    }

    .company-address-box{
        grid-column:span 1;
    }
}

/* ==========================================================================
   1. LAYOUT TỔNG THỂ VÀ PHẦN TRÊN (PRODUCT ESSENTIAL)
   ========================================================================== */

.product-view{
    max-width:var(--max-width);
    margin:0 auto;
    box-sizing:border-box;
}

/* Khung chứa form chi tiết */
#product_addtocart_form{
    display:flex;
    flex-wrap:wrap;
}

/* Đặt cột ảnh bên trái */


/* Đặt cột thông tin bên phải */
.product-view .product-shop{
    flex:1;
    min-width:0;
    order:2;
    margin-top:30px;
}

/* Styling Cột Ảnh */
.product-img-box .product-image{
    border:1px solid #e5e5e5;
    border-radius:8px;
    padding:10px;
    background:#ffffff;
    margin-bottom:12px;
    text-align:center;
}

.product-img-box .product-image img{
    max-width:100%;
    height:auto;
    display:block;
    margin:0 auto;
}

/* Thumbnails (More Views) */
.more-views ul{
    display:flex;
    gap:10px;
    list-style:none;
    padding:0;
    margin:0;
    flex-wrap:wrap;
}

.more-views li a{
    display:block;
    border:1px solid #e0e0e0;
    border-radius:4px;
    padding:3px;
    transition:border-color 0.2s ease;
}

.more-views li a:hover{
    border-color:#0066cc;
}

.more-views img{
    display:block;
    width:60px;
    height:60px;
    object-fit:cover;
}

/* Styling Cột Thông Tin Sản Phẩm */
.product-shop .product-name h1{
    font-size:22px;
    font-weight:700;
    line-height:1.3;
    margin:0 0 12px 0;
    color:#111111;
}

.product-shop .no-rating{
    font-size:13px;
    margin-bottom:15px;
}

.product-shop .no-rating a{
    color:#0066cc;
    text-decoration:none;
}

/* Giá Liên hệ / Custom Price */
.product-shop .price-box.custom-price{
    background:#f8f9fa;
    border-left:4px solid #0066cc;
    padding:10px 15px;
    margin-bottom:20px;
    border-radius:0 6px 6px 0;
}

.custom-rezo-price{
    font-size:18px;
    font-weight:700;
    color:#d71921;
}

/* Thông số bổ sung (Xuất xứ, Bảo hành) */
/* ==========================================================================
   ADDITIONAL ATTRIBUTES BADGES (.additional-box)
   ========================================================================== */

/* Khung chứa các badge */
.additional-box{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:10px !important;
    margin:12px 0 !important;
}

/* Mỗi thẻ Badge (Wrapper) */
.additional-box .add-wrapper{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:6px 14px;
    background-color: var(--bg-light) ;
    border-radius:20px;
    font-size:13px;
    line-height:1.4;
    color:#333333;
    font-weight:500;
    box-sizing:border-box;
    white-space:nowrap;
    border:solid 1px var(--border-color);
}

/* Biểu tượng Icon Checkmark tròn phía trước badge */
/*
.additional-box .add-wrapper::before {
    content: "✓" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 15px !important;
    height: 15px !important;
    border: 1px solid #666666 !important;
    border-radius: 50% !important;
    font-size: 10px !important;
    font-weight: bold !important;
    color: #666666 !important;
    margin-right: 4px !important;
}
*/

/* Ẩn Label gốc (Xuất xứ, Bảo hành) hoặc cho hiển thị nối liền với Data */
.additional-box .add-wrapper .add-label{
    display:inline-block !important;
    color:#555555 !important;
}

/* Thêm dấu hai chấm hoặc khoảng trắng sau Label */
.additional-box .add-wrapper .add-label::after{
    content:":";
    margin-right:4px;
}

/* Giá trị dữ liệu (Data) */
.additional-box .add-wrapper .add-data{
    display:inline-block;
    font-weight:600;
    color:#222222;
}

/* ==========================================================================
   QUOTE REQUEST BOX (KHỐI YÊU CẦU BÁO GIÁ - ISOLATED CLASS)
   ========================================================================== */

.rq-request-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    background-color: var(--bg-light);
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    padding:20px 24px;
    margin:20px 0;
}

/* --- Khối bên trái (Icon + Text) --- */
.rq-info{
    display:flex;
    align-items:center;
    gap:16px;
    flex:1;
}

.rq-icon{
    width:64px;
    height:64px;
    border-radius:50%;
    border:1px solid var(--border-color);
    background-color:var(--bg-main);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.rq-icon .fa{
    font-size:30px;
    color:var(--primary-color, #b80000);
}

.rq-title{
    color:var(--primary-color, #b80000);
    font-size:18px;
    font-weight:700;
    margin:0 0 4px 0;
    letter-spacing:0.5px;
    text-transform:uppercase;
}

.rq-desc{
    color:#444444;
    font-size:13.5px;
    line-height:1.4;
    margin:0;
}

/* --- Khối bên phải (Nút bấm) --- */
.rq-actions{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}

.rq-btn-call,
.rq-btn-quote{
    width:100%;
    height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:8px;
    font-size:13.5px;
    transition:var(--transition, all 0.25s ease);
    box-sizing:border-box;
}

.rq-btn-call .fa,
.rq-btn-quote .fa{
    font-size:15px;
}

/* Nút "LIÊN HỆ NGAY" (Màu đỏ) */
.rq-btn-call{
    background-color:var(--primary-color, #b80000);
    color:#ffffff;
    font-weight:700;
    text-transform:uppercase;
    border:1px solid var(--primary-color, #b80000);
}

.rq-btn-call:hover{
    background-color:var(--primary-hover, #900000);
    border-color:var(--primary-hover, #900000);
    color:#ffffff;
}

/* Nút "Yêu cầu báo giá" (Trắng viền nhạt) */
.rq-btn-quote{
    background-color:#ffffff;
    color:var(--primary-color, #b80000);
    font-weight:600;
    border:1px solid #e0e0e0;
}

.rq-btn-quote:hover{
    border-color:var(--primary-color, #b80000);
    color:var(--primary-hover, #900000);
    background-color:#fff9f9;
}

/* Chú thích phía dưới nút */
.rq-note-text{
    font-size:12px;
    color:#888888;
    text-align:center;
}
.rq-request-box{
    flex-direction:column;
    align-items:stretch;
    padding:16px;
    gap:16px;
}

.rq-info{
    flex-direction:column;
    text-align:center;
}

.rq-actions{
    width:100%;
}


/* ==========================================================================
   SHORT DESCRIPTION (TỔNG QUAN SẢN PHẨM)
   ========================================================================== */

/* Khối tổng quan phía trên */
.short-description{
    margin-top:15px;
    padding-top:15px;
    border-top:1px dashed var(--border-dashed);
}

/* Tiêu đề "Tổng quan" (h2.quick-view-title) */
.short-description .quick-view-title,
.product-collateral h2.title{
    font-size:15px;
    text-transform:uppercase;
    font-weight:700;
    color:var(--text-main);
    margin:0 0 12px 0;
    line-height:1.3;
}

/* Nội dung WYSIWYG (.std) */
.short-description .std{
    font-size:13.5px;
    line-height:1.6;
    color:var(--text-main);
}

/* Đoạn văn bản mô tả ngắn (nếu có) */
.short-description .std p{
    margin:0 0 10px 0;
}

.short-description .std p strong,
.short-description .std strong{
    font-weight:700;
    color:#111111;
}

/* Danh sách Bullet Point (ul / ol) trong khối tổng quan */
.short-description .std ul,
.short-description .std ol{
    margin:0 0 12px 0;
    padding-left:18px;
    list-style-type:disc;
}

.short-description .std li{
    margin-bottom:6px;
    color:var(--text-main);
    line-height:1.5;
}

.short-description .std li:last-child{
    margin-bottom:0;
}

.mini-products-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
    gap:15px;
    list-style:none;
    padding:0;
    margin:0;
}

.mini-products-grid .item{
    box-sizing:border-box;
}

.mini-products-grid .item-wrapper{
    border:1px solid #e5e5e5;
    border-radius:6px;
    padding:10px;
    height:100%;
    display:flex;
    flex-direction:column;
    background:#ffffff;
    transition:all 0.2s ease;
}

.mini-products-grid .item-wrapper:hover{
    border-color:#0066cc;
    box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);
}

.mini-products-grid .product-image{
    text-align:center;
    margin-bottom:8px;
}

.mini-products-grid .product-image img{
    max-width:100%;
    height:auto;
}

.mini-products-grid .product-name{
    font-size:13px;
    line-height:1.3;
    margin:0 0 6px 0;

}

.mini-products-grid .product-name a{
    color:#333333;
    text-decoration:none;
}

.mini-products-grid .product-name a:hover{
    color:#0066cc;
}

.mini-products-grid .price-box{
    margin-top:auto;
    font-size:13px;
    font-weight:bold;
    color:#d71921;
    justify-content:center;
}

/* ==========================================================================
   PRODUCT NAV TABS (CHUẨN HTML BOX-PRODUCT-CONTAINER)
   ========================================================================== */

/* Khối chứa toàn bộ phần tab & nội dung */
.box-product-container{
    width:100%;

}

/* --- Khối sticky chứa danh sách Tab --- */
.box-product-nav-sticky{
    position:sticky;
    top:0;
    z-index:99;
    background-color:#ffffff;
    border-bottom:2px solid #eeeeee;
    display:none;
}

/* Danh sách Tab ngang */
.box-product-nav{
    display:flex;
    align-items:center;
    gap:8px;
    list-style:none;
    padding:0;
    margin:0;
}

/* Ô Tab mặc định */
.box-product-nav li{
    margin:0;
    padding:0;
}

.box-product-nav li a.tab-name{
    display:block;
    padding:12px 22px;
    background:var(--bg-tab);
    color:var(--text-muted);
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    text-decoration:none;
    border-radius:6px 6px 0 0;
    position:relative;
    transition:all 0.2s ease-in-out;
    white-space:nowrap;
}

/* Hover vào Tab */
.box-product-nav li a.tab-name:hover{
    color:var(--tab-active-color);
}

.box-product-nav li.active a.tab-name,
.box-product-nav li a.tab-name.active{
    background-color:var(--bg-tab);
    color:var(--tab-active-color);
}


.box-product-nav li.active a.tab-name::after,
.box-product-nav li a.tab-name.active::after{
    content:"";
    position:absolute;
    bottom:-2px;
    left:0;
    width:100%;
    height:3px;
    background-color:var(--tab-active-bg);
    border-radius:2px 2px 0 0;
}

.box-product-nav li.active a.tab-name{
    background:var(--tab-active-bg);
    color:var(--tab-active-color);
    border-color:var(--tab-border-active);
}

.box-product-nav li.active a.tab-name::after{
    content:"";
    position:absolute;
    bottom:-2px;
    left:0;
    width:100%;
    height:3px;
    background-color:var(--primary-color);
    border-radius:2px 2px 0 0;
}



/* ==========================================================================
   NỘI DUNG CHI TIẾT (KHÔNG BÓ KHUNG, THOÁNG ĐÃNG)
   ========================================================================== */

.box-product{
    padding-top:20px;
}

.box-collateral{

}
@media (max-width: 991px){
    .box-collateral{display:block !important; margin-bottom:20px;}
}

/* Ẩn tiêu đề h2 trùng lặp nếu đã dùng thanh tab bấm chuyển */
.box-collateral .title{

}

.descr-wrapper{
    border:none;
    background:transparent;
}

.product-description-content{
    font-size:14.5px;
    line-height:1.7;
    color:#333333;
}

.product-description-content p{
    margin-bottom:15px;
}

.product-description-content img{
    max-width:100%;
    height:auto !important;
    display:block;
    margin:15px 0;
    border-radius:4px;
}

.product-description-content.thong_so_ki_thuat {
    margin-top: 20px;
}

.product-description-content.thong_so_ki_thuat table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 14px;
}

.product-description-content.thong_so_ki_thuat th,
.product-description-content.thong_so_ki_thuat td {
    padding: 10px 15px;
    border: 1px solid #e5e5e5;
    text-align: left;
    vertical-align: middle;
    line-height: 1.6;
}

.product-description-content.thong_so_ki_thuat thead th {
    font-weight: 600;
    text-align: center;
}

.product-description-content.thong_so_ki_thuat tbody th {

    font-weight: 600;
}

.product-description-content.thong_so_ki_thuat tbody td {

}

/* ==========================================================================
   SẢN PHẨM LIÊN QUAN (MINI PRODUCTS GRID)
   ========================================================================== */

.mini-products-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:15px;
    list-style:none;
    padding:0;
    margin:0;
}

.mini-products-grid .item .item-wrapper{
    background:#ffffff;
    border:1px solid #eeeeee;
    border-radius:6px;
    padding:12px;
    text-align:center;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    transition:all 0.25s ease;
}

.mini-products-grid .item .item-wrapper:hover{
    border-color:var(--primary-color);
    box-shadow:0 4px 12px rgba(0, 0, 0, 0.08);
}

.mini-products-grid .product-image img{
    width:100%;
    height:auto;
    object-fit:contain;
}

.mini-products-grid .product-name{
    font-size:13px;
    font-weight:500;
    line-height:1.4;
    margin:10px 0 6px 0;

}

.mini-products-grid .product-name a{
    color:#333333;
    text-decoration:none;
}

.mini-products-grid .product-name a:hover{
    color:var(--primary-color);
}

.mini-products-grid .custom-rezo-price{
    color:#b80000;
    font-weight:700;
    font-size:13.5px;
}
#product_addtocart_form{
    flex-direction:column;
}

/* Responsive */
@media (max-width:992px){
    .mini-products-grid{
        grid-template-columns:repeat(3, 1fr);
    }
}

@media (max-width:600px){
    .box-product-nav-sticky{
        overflow-x:auto;
        display:none;
    }

    .mini-products-grid{
        grid-template-columns:repeat(2, 1fr);
        gap:10px;
    }
}

.product-view .product-img-box{

}

.product-collateral h2.title{

}

.short-description .quick-view-title,
.product-collateral h2.title{
    border-bottom:solid 3px var(--primary-color);
    padding-bottom:8px;
}


.mini-products-grid{
    grid-template-columns:repeat(2, 1fr);
}


/* ==========================================================================
   OPENMAGE / MAGENTO 1 - RECENTLY VIEWED PRODUCTS (SIDEBAR BLOCK)
   ========================================================================== */

/* Override class mặc định của Magento để khớp giao diện phẳng */
.block-list.block-viewed.sidebar-block{
    background-color:var(--bg-main);
    border-radius:var(--radius-lg);
    padding:18px 20px;
    margin-bottom:24px;
    border:1px solid var(--border-color);
    box-sizing:border-box;
}

/* Override Tiêu đề */
.block-list.block-viewed.sidebar-block .block-title{
    font-size:16px !important;
    font-weight:700 !important;
    color:var(--text-main, #333333) !important;
    margin-bottom:12px !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    border:none !important;
    padding:0 0 10px 0 !important;
    border-bottom:2px solid var(--primary-color, #b80000) !important;
    background:transparent !important;
    font-family:var(--font-sans, Arial, Helvetica, sans-serif) !important;
    text-transform:none !important;
}

/* Icon mắt xem trước tiêu đề */
.block-list.block-viewed.sidebar-block .block-title .fa-eye{
    color:var(--primary-color, #b80000) !important;
    font-size:17px !important;
}

/* Danh sách UL sản phẩm vừa xem */
.block-list.block-viewed.sidebar-block ul.viewed-product-list{
    list-style:none !important;
    padding:0 !important;
    margin:0 !important;
}

.block-list.block-viewed.sidebar-block ul.viewed-product-list li.item{
    margin:0 !important;
    padding:0 !important;
    border-bottom:1px dashed var(--border-dashed, #dddddd) !important;
    background:transparent !important;
}

.block-list.block-viewed.sidebar-block ul.viewed-product-list li.item:last-child{
    border-bottom:none !important;
}

/* Thẻ A Link sản phẩm */
.block-list.block-viewed.sidebar-block ul.viewed-product-list li.item a{
    display:flex !important;
    align-items:flex-start !important;
    gap:8px !important;
    padding:10px 0 !important;
    font-size:13.5px !important;
    font-family:var(--font-sans, Arial, Helvetica, sans-serif) !important;
    color:var(--text-main, #333333) !important;
    text-decoration:none !important;
    transition:var(--transition, all 0.25s ease) !important;
    line-height:1.45 !important;
}

/* Icon mũi tên trước tên sản phẩm */
.block-list.block-viewed.sidebar-block ul.viewed-product-list li.item a .fa-angle-right{
    font-size:14px !important;
    color:var(--text-light, #888888) !important;
    margin-top:2px !important;
    flex-shrink:0 !important;
    transition:var(--transition, all 0.25s ease) !important;
}

/* Hiệu ứng Hover tên sản phẩm */
.block-list.block-viewed.sidebar-block ul.viewed-product-list li.item a:hover{
    color:var(--primary-color, #b80000) !important;
    padding-left:4px !important;
}

.block-list.block-viewed.sidebar-block ul.viewed-product-list li.item a:hover .fa-angle-right{
    color:var(--primary-color, #b80000) !important;
}

/* ==========================================================================
   BACK TO TOP BUTTON (#fbacktop) - SQUARE DESIGN
   ========================================================================== */

#fbacktop,
.fbacktop{
    position:fixed !important;
    right:20px !important;
    bottom:50px !important;
    z-index:9999 !important;

    width:38px !important;
    height:38px !important;
    border-radius:4px !important;

    background-color:rgba(0, 102, 204, 0.6);
    color:#ffffff !important;
    border:none !important;
    outline:none !important;
    cursor:pointer !important;
    display:none; /* jQuery fadeIn() sẽ tự chuyển thành display: block khi scroll > 200px */

    /* Căn giữa icon */
    padding:0 !important;
    text-align:center !important;
    line-height:38px !important;
    box-shadow:0 2px 8px rgba(0, 0, 0, 0.2) !important;
    transition:background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* Style cho icon FontAwesome bên trong */
#fbacktop .fa,
.fbacktop .fa{
    font-size:14px !important;
    color:#ffffff !important;
    line-height:inherit !important;
    vertical-align:middle !important;
}

/* Hiệu ứng Hover */
#fbacktop:hover,
.fbacktop:hover{
    background-color:var(--primary-color);
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   MOBILE MENU BAR (MOBILE-FIRST)
   ========================================================================== */

/* 1. Style mặc định cho Mobile & Tablet (< 992px) */
.mobile-menu-bar{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    background-color:var(--primary-color, #b80000) !important;
    color:#ffffff !important;
    padding:10px 15px !important;

    cursor:pointer !important;
    user-select:none !important;
    margin-bottom:10px !important;
}

/* Khối icon và chữ bên trong */
.mobile-menu-bar .menu-icon{
    display:flex !important;
    align-items:center !important;
    gap:10px !important; /* Khoảng cách giữa icon và chữ */
    font-size:15px !important;
    font-weight:700 !important;
    text-transform:uppercase !important;
}

/* Icon Hamburger fa-bars */
.mobile-menu-bar .menu-icon .fa-bars{
    font-size:16px !important;
    line-height:1 !important;
}

/* 2. Responsive: Bắt đầu từ Desktop (>= 992px) thì ẨN HOÀN TOÀN */
@media (min-width:992px){
    .mobile-menu-bar{
        display:none !important;
    }
}

/* ==========================================================================
   MOBILE MENU TOGGLE (#nav.active) - MOBILE FIRST
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MẶC ĐỊNH CHO MOBILE / TABLET (< 992px)
   -------------------------------------------------------------------------- */

/* Nút Bar bật/tắt menu trên mobile */
.mobile-menu-bar{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    background-color:var(--primary-color, #b80000) !important;
    color:#ffffff !important;
    padding:10px 15px !important;
    cursor:pointer !important;
    user-select:none !important;
    margin-bottom:0px !important;
}

.mobile-menu-bar .menu-icon{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    font-size:15px !important;
    font-weight:700 !important;
    text-transform:uppercase !important;
}

.mobile-menu-bar .menu-icon .fa-bars{
    font-size:16px !important;
    line-height:1 !important;
}

/* Mặc định trên Mobile: MENU #NAV BỊ ẨN */
#nav{
    display:none !important;
}

/* KHI CLICK VÀO BAR: JS thêm class .active -> MENU #NAV HIỂN THỊ */
#nav.active{
    display:block !important;
    background-color:#ffffff !important;
    border:1px solid #e5e5e5 !important;
    border-top:none !important;
    border-radius:0 0 4px 4px !important;
    padding:8px 0 !important;
    margin:0 0 15px 0 !important;
    list-style:none !important;
}

/* Format danh sách link trong #nav khi mở trên mobile */
#nav.active li{
    display:block !important;
    width:100% !important;
    float:none !important;
    border-bottom:1px dashed #eee !important;
}

#nav.active li:last-child{
    border-bottom:none !important;
}

#nav.active li a{
    display:block;
    padding:10px 15px;
    color:#333333;
    font-size:14px;
    text-decoration:none;
}

#nav.active li a:hover{
    background-color:#f8f9fa !important;
    color:var(--primary-color, #b80000) !important;
}

/* --------------------------------------------------------------------------
   2. TRÊN DESKTOP (Từ 992px trở lên)
   -------------------------------------------------------------------------- */
@media (min-width:992px){
    /* Ẩn nút mobile bar */
    .mobile-menu-bar{
        display:none !important;
    }

    /* Trả lại trạng thái hiển thị hàng ngang ban đầu cho #nav trên desktop */
    #nav{
        display:flex !important; /* Hoặc block !important tùy thuộc vào layout desktop của bạn */
        background:transparent !important;
        border:none !important;
        padding:0 !important;
        margin:0 auto;
    }
}

/* ==========================================================================
   HOME SERVICES COMMITMENT (.home-services-block) - MOBILE FIRST
   ========================================================================== */

/* Khung tổng */
.home-services-block{
    display:grid;
    grid-template-columns:1fr; /* Mặc định Mobile: 1 cột */
    gap:15px;
    background-color:#ffffff;
    border:1px solid #e8e8e8;
    border-radius:8px;
    padding:15px;
    margin-bottom:25px;
    box-sizing:border-box;
}

/* Từng ô dịch vụ */
.home-services-block .service-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px 5px;
}

/* Khung Icon màu đỏ */
.home-services-block .service-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    flex-shrink:0;
}

.home-services-block .service-icon .fa{
    font-size:26px;
    color:var(--primary-color, #b80000);
    line-height:1;
}

/* Khung thông tin văn bản */
.home-services-block .service-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.home-services-block .service-title{
    font-size:13.5px;
    font-weight:700;
    color:#111111;
    line-height:1.3;
    margin-bottom:2px;
}

.home-services-block .service-desc{
    font-size:12px;
    color:#666666;
    line-height:1.3;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Mobile lớn / Tablet nhỏ (>= 576px): Chia 2 cột */
@media (min-width:576px){
    .home-services-block{
        grid-template-columns:repeat(2, 1fr);
        gap:20px;
        padding:18px 20px;
    }
}

/* Desktop (>= 992px): Dàn đều 4 cột trên 1 hàng */
@media (min-width:992px){
    .home-services-block{
        grid-template-columns:repeat(4, 1fr);
        gap:15px;
        padding:15px 20px;
    }

    .home-services-block .service-item{
        padding:0;
    }
}

.home-category-products .category-title h2{
    border-bottom:2px solid var(--primary-color);
    padding-bottom:8px;
    margin-bottom:16px;
    text-transform:uppercase;
    font-size:18px;
}

.home-category-products .category-title .fa{
    color:var(--primary-color);
}

/* ==========================================
   LAYOUT CHÍNH MAGENTO 1 (2 COLUMNS)
   ========================================== */
.main{
    display:flex;
    flex-wrap:wrap;
    max-width:var(--max-width-narrow);
    padding:0 15px;
    margin-left: auto;
    margin-right: auto;
}

.col-main{
    min-width:0;
}
.main-container.col1-layout .main .col-main{
    width:100%;
}
.col-right.sidebar{
    width:320px;
    flex-shrink:0;
}

/* ==========================================
   PAGE TITLE
   ========================================== */
.page-title{
    margin-bottom:24px;
    border-bottom:2px solid #e2e8f0;
    padding-bottom:12px;
}

.page-title h1{
    font-size:1.75rem;
    font-weight:700;
    color:#0f172a;
    margin:0;
}

/* ==========================================
   FORM CONTACT (#contactForm)
   ========================================== */
#contactForm{
    background:#ffffff;
    border-radius:12px;
    padding:28px;
    border:1px solid #e2e8f0;
    box-shadow:0 4px 20px rgba(0, 0, 0, 0.03);
}

#contactForm .fieldset{
    border:none;
    padding:0;
    margin:0 0 20px 0;
}

#contactForm .legend{
    font-size:1.15rem;
    font-weight:600;
    color:#1e293b;
    margin-bottom:20px;
    padding-bottom:8px;
    border-bottom:1px dashed #cbd5e1;
    float:none;
    width:100%;
}

#contactForm .form-list{
    list-style:none;
    padding:0;
    margin:0;
}

#contactForm .form-list > li{
    margin-bottom:18px;
}

/* Chia 2 cột cho Tên & Email */
#contactForm .form-list .fields{
    display:flex;
    gap:16px;
}

#contactForm .form-list .fields .field{
    flex:1;
    min-width:0;
}

#contactForm label{
    display:block;
    font-size:0.875rem;
    font-weight:600;
    color:#475569;
    margin-bottom:6px;
}

#contactForm label.required em{
    color:#ef4444;
    font-style:normal;
    margin-right:4px;
}

#contactForm .input-box{
    width:100%;
}

#contactForm input.input-text,
#contactForm textarea{
    width:100%;
    padding:10px 14px;
    font-size:0.95rem;
    color:#0f172a;
    background-color:#f8fafc;
    border:1px solid #cbd5e1;
    border-radius:6px;
    outline:none;
    box-sizing:border-box;
    transition:all 0.2s ease;
}

#contactForm input.input-text:focus,
#contactForm textarea:focus{
    border-color:#2563eb;
    background-color:#ffffff;
    box-shadow:0 0 0 3px rgba(37, 99, 235, 0.15);
}

#contactForm li.wide textarea{
    min-height:120px;
    resize:vertical;
}

/* BUTTONS SET */
#contactForm .buttons-set{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:20px;
    padding-top:16px;
    border-top:1px solid #f1f5f9;
}

#contactForm .buttons-set .required{
    margin:0;
    font-size:0.8rem;
    color:#64748b;
}

/* Clear style mặc định Magento button */
#contactForm button.button{
    background:transparent;
    border:none;
    padding:0;
    cursor:pointer;
}

#contactForm button.button > span{
    display:inline-block;
    background-color:#2563eb;
    color:#ffffff;
    font-weight:600;
    font-size:0.9rem;
    padding:10px 28px;
    border-radius:6px;
    transition:background-color 0.2s ease, transform 0.1s ease;
}

#contactForm button.button > span > span{
    background:transparent;
    padding:0;
}

#contactForm button.button:hover > span{
    background-color:#1d4ed8;
}

/* ==========================================
   SIDEBAR (BÀI VIẾT MỚI)
   ========================================== */
.sidebar-block{
    background:#ffffff;
    border-radius:12px;
    padding:20px;
    border:1px solid #e2e8f0;
    box-shadow:0 4px 20px rgba(0, 0, 0, 0.03);
}

.sidebar-block .block-title{
    font-size:1.1rem;
    font-weight:700;
    color:#0f172a;
    padding-bottom:12px;
    margin-bottom:16px;
    border-bottom:2px solid #2563eb;
    display:flex;
    align-items:center;
    gap:8px;
}

.sidebar-block .block-title i{
    color:#2563eb;
}

.recent-post-list{
    list-style:none;
    padding:0;
    margin:0;
}

.recent-post-list li{
    padding:10px 0;
    border-bottom:1px solid #f1f5f9;
}

.recent-post-list li:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.recent-post-list a{
    display:flex;
    align-items:flex-start;
    gap:8px;
    color:#334155;
    text-decoration:none;
    font-size:0.875rem;
    line-height:1.4;
    transition:color 0.2s ease;
}

.recent-post-list a i{
    color:#94a3b8;
    margin-top:3px;
    transition:transform 0.2s ease, color 0.2s ease;
}

.recent-post-list a:hover{
    color:#2563eb;
}

.recent-post-list a:hover i{
    color:#2563eb;
    transform:translateX(3px);
}
.rating-box .rating{
    float: left;
    height: 13px;
    background: url(https://vienthongthientan.com/skin/frontend/default/thientan/images/bkg_rating.gif) 0 100% repeat-x;
}
.rating-box {
    width: 69px;
    height: 13px;
    font-size: 0;
    line-height: 0;
    background: url(https://vienthongthientan.com/skin/frontend/default/thientan/images/bkg_rating.gif) 0 0 repeat-x;
    text-indent: -999em;
    overflow: hidden;
}
.ratings .rating-box, .ratings .amount{
    display:inline-flex;
}
/* Khung chứa tổng thể */
.ratings {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #666;
}
.product-item-grid .ratings,
.products-grid .ratings
.mini-products-grid ratings{
    justify-content: center;
}

.rating-box {
    width: 69px;
    height: 13px;
    position: relative;
    display: inline-block;
    background: url("https://thietbianhung.com/skin/frontend/default/anhung/images/bkg_rating.gif") 0 0 repeat-x;
}

.rating-box .rating {
    height: 13px;
    position: absolute;
    top: 0;
    left: 0;
    background: url("https://thietbianhung.com/skin/frontend/default/anhung/images/bkg_rating.gif") 0 100% repeat-x;
}

.review-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.review-wrapper {
    display: flex;
    flex-direction: column;
}
.review-summary {
    font-weight: 600;
}
.rating-point {
    display: flex;
    align-items: center;
}

.ratings-table {
    border-collapse: collapse;
    border-spacing: 0;
}
.ratings-table td {
    padding: 0;
}
.review-content {
    line-height: 1.5;
    word-break: break-word;
}
.other-info {
    color: #6b6b6b;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.other-info .date {
    font-style:italic;
}


@media (min-width: 768px) {
    .rq-info,
    .rq-request-box{
        flex-direction:unset;
        text-align: left;
    }
    .rq-actions{
        width:200px;
    }

}
@media (min-width:992px){
    #product_addtocart_form{
        flex-direction:unset;
    }
    .product-view .product-img-box{
        flex:0 0 450px;
        max-width:450px;
        order:1;
    }
    .product-view .product-shop{
        margin-left:40px;
    }
    .box-collateral .title{
        display:none;
    }
    .box-product-nav-sticky{
        display:block;
    }
    .mini-products-grid{
        grid-template-columns: repeat(5, 1fr);
    }

}
@media (min-width: 1024px) {
    .box-product-container{
        margin-top:30px;
    }
    .product-view .product-shop{
        margin-top:0;
    }
    .product-essential{
        margin-top:15px;
    }
}

.block-layered-nav dl#narrow-by-list dd ol li a::before,
#nav li.level1.parent > a::after{
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.block-layered-nav dl#narrow-by-list dd ol li a::before{
    content: "\f105";
}
#nav li.level1.parent > a::after{
    content: "\f105";
}

/**
 * OpenMage
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magento.com so we can send you a copy immediately.
 *
 * @category    design
 * @package     base_default
 * @copyright   Copyright (c) 2006-2020 Magento, Inc. (https://www.magento.com)
 * @license     https://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */

/* Widgets =============================================================================== */
.widget { display:inline; }
.widget .widget-title { clear:both; padding:15px 0 0; margin:0 0 7px; }
.widget .widget-title h2 { font-size:15px; font-weight:bold; color:#e25203; }

.widget .mini-products-images-list .product-image { display:block; width:76px; height:76px; border:1px solid #a9a9a9; margin:0 auto; }
.widget .mini-products-images-list li.item { float:left; width:77px; height:77px; }

/* Widget: Catalog New Proructs List */
.widget-new-products { display:block; }
.col-main .widget-new-products { margin:7px 0; }
.widget-new-products .products-grid .product-image,
.widget-new-products .products-list .product-image { width:85px; height:85px; }
.widget-new-products .products-list .product-shop { margin-left:100px; }
.sidebar .widget-new-products .block { font-size:11px; line-height:1.25; }
.sidebar .widget-new-products .block-title strong { background:url(https://thietbianhung.com/skin/frontend/base/default/images/widgets/i_widget-new.gif) 0 1px no-repeat; padding-left:21px; color:#dc5033; }

/* Widget: Recently Viewed Proructs */
.widget-viewed { display:block; }
.col-main .widget-viewed { margin:7px 0; }
.widget-viewed .products-grid .product-image,
.widget-viewed .products-list .product-image { width:85px; height:85px; }
.widget-viewed .products-list .product-shop { margin-left:100px; }
.sidebar .widget-viewed .block { font-size:11px; line-height:1.25; }
.sidebar .widget-viewed .block-title strong { background:url(https://thietbianhung.com/skin/frontend/base/default/images/widgets/i_block-list.gif) 0 0 no-repeat; padding-left:21px; }

/* Widget: Recently Compared Proructs */
.widget-compared { display:block;}
.col-main .widget-compared { margin:7px 0; }
.widget-compared .products-grid .product-image,
.widget-compared .products-list .product-image { width:85px; height:85px; }
.widget-compared .products-list .product-shop { margin-left:100px; }
.sidebar .widget-compared .block { font-size:11px; line-height:1.25; }
.sidebar .widget-compared .block-title strong { background:url(https://thietbianhung.com/skin/frontend/base/default/images/widgets/i_block-list.gif) 0 0 no-repeat; padding-left:21px; }

/* Widget: CMS Static Block */
.widget-static-block {}
.sidebar .widget-static-block { display:block; margin:0 0 15px; }

/* Widgets: Links Common Styles */
.top-container .widget a { padding:0 0 0 7px; }

.bottom-container .widget a { padding:0 3px; }

/* Widget: Catalog Product Link */
.widget-product-link-inline { display:inline; }

.col-main .widget-product-link { display:block; text-align:right; margin:7px 0; }
.col-main .widget-product-link a { background:url(https://thietbianhung.com/skin/frontend/base/default/images/widgets/i_widget-link.gif) 100% 4px no-repeat; padding-right:15px; }

.sidebar .widget-product-link { display:block; margin:0 0 15px; padding:0 10px; }
.sidebar .widget-product-link a { background:url(https://thietbianhung.com/skin/frontend/base/default/images/widgets/i_widget-link.gif) 100% 4px no-repeat; padding:0 15px 0 0; }

/* Widget: Catalog Category Link */
.widget-category-link-inline { display:inline; }

.col-main .widget-category-link { display:block; text-align:right; margin:7px 0; }
.col-main .widget-category-link a { background:url(https://thietbianhung.com/skin/frontend/base/default/images/widgets/i_widget-link.gif) 100% 4px no-repeat; padding-right:15px; }

.sidebar .widget-category-link { display:block; margin:0 0 15px; padding:0 10px; }
.sidebar .widget-category-link a { background:url(https://thietbianhung.com/skin/frontend/base/default/images/widgets/i_widget-link.gif) 100% 4px no-repeat; padding:0 15px 0 0; }

/* Widget: CMS Page Link */
.widget-cms-link-inline { display:inline; }

.col-main .widget-cms-link { display:block; text-align:right; margin:7px 0; }
.col-main .widget-cms-link a { background:url(https://thietbianhung.com/skin/frontend/base/default/images/widgets/i_widget-link.gif) 100% 4px no-repeat; padding-right:15px; }

.sidebar .widget-cms-link { display:block; margin:0 0 15px; padding:0 10px; }
.sidebar .widget-cms-link a { background:url(https://thietbianhung.com/skin/frontend/base/default/images/widgets/i_widget-link.gif) 100% 4px no-repeat; padding:0 15px 0 0; }
/* ======================================================================================= */

body.compensate-for-scrollbar{overflow:hidden}.fancybox-active{height:auto}.fancybox-is-hidden{left:-9999px;margin:0;position:absolute!important;top:-9999px;visibility:hidden}.fancybox-container{-webkit-backface-visibility:hidden;height:100%;left:0;outline:none;position:fixed;-webkit-tap-highlight-color:transparent;top:0;-ms-touch-action:manipulation;touch-action:manipulation;transform:translateZ(0);width:100%;z-index:99992}.fancybox-container *{box-sizing:border-box}.fancybox-bg,.fancybox-inner,.fancybox-outer,.fancybox-stage{bottom:0;left:0;position:absolute;right:0;top:0}.fancybox-outer{-webkit-overflow-scrolling:touch;overflow-y:auto}.fancybox-bg{background:#1e1e1e;opacity:0;transition-duration:inherit;transition-property:opacity;transition-timing-function:cubic-bezier(.47,0,.74,.71)}.fancybox-is-open .fancybox-bg{opacity:.9;transition-timing-function:cubic-bezier(.22,.61,.36,1)}.fancybox-caption,.fancybox-infobar,.fancybox-navigation .fancybox-button,.fancybox-toolbar{direction:ltr;opacity:0;position:absolute;transition:opacity .25s ease,visibility 0s ease .25s;visibility:hidden;z-index:99997}.fancybox-show-caption .fancybox-caption,.fancybox-show-infobar .fancybox-infobar,.fancybox-show-nav .fancybox-navigation .fancybox-button,.fancybox-show-toolbar .fancybox-toolbar{opacity:1;transition:opacity .25s ease 0s,visibility 0s ease 0s;visibility:visible}.fancybox-infobar{color:#ccc;font-size:13px;-webkit-font-smoothing:subpixel-antialiased;height:44px;left:0;line-height:44px;min-width:44px;mix-blend-mode:difference;padding:0 10px;pointer-events:none;top:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fancybox-toolbar{right:0;top:0}.fancybox-stage{direction:ltr;overflow:visible;transform:translateZ(0);z-index:99994}.fancybox-is-open .fancybox-stage{overflow:hidden}.fancybox-slide{-webkit-backface-visibility:hidden;display:none;height:100%;left:0;outline:none;overflow:auto;-webkit-overflow-scrolling:touch;padding:44px;position:absolute;text-align:center;top:0;transition-property:transform,opacity;white-space:normal;width:100%;z-index:99994}.fancybox-slide:before{content:"";display:inline-block;font-size:0;height:100%;vertical-align:middle;width:0}.fancybox-is-sliding .fancybox-slide,.fancybox-slide--current,.fancybox-slide--next,.fancybox-slide--previous{display:block}.fancybox-slide--image{overflow:hidden;padding:44px 0}.fancybox-slide--image:before{display:none}.fancybox-slide--html{padding:6px}.fancybox-content{background:#fff;display:inline-block;margin:0;max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch;padding:44px;position:relative;text-align:left;vertical-align:middle}.fancybox-slide--image .fancybox-content{animation-timing-function:cubic-bezier(.5,0,.14,1);-webkit-backface-visibility:hidden;background:transparent;background-repeat:no-repeat;background-size:100% 100%;left:0;max-width:none;overflow:visible;padding:0;position:absolute;top:0;transform-origin:top left;transition-property:transform,opacity;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:99995}.fancybox-can-zoomOut .fancybox-content{cursor:zoom-out}.fancybox-can-zoomIn .fancybox-content{cursor:zoom-in}.fancybox-can-pan .fancybox-content,.fancybox-can-swipe .fancybox-content{cursor:grab}.fancybox-is-grabbing .fancybox-content{cursor:grabbing}.fancybox-container [data-selectable=true]{cursor:text}.fancybox-image,.fancybox-spaceball{background:transparent;border:0;height:100%;left:0;margin:0;max-height:none;max-width:none;padding:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.fancybox-spaceball{z-index:1}.fancybox-slide--iframe .fancybox-content,.fancybox-slide--map .fancybox-content,.fancybox-slide--pdf .fancybox-content,.fancybox-slide--video .fancybox-content{height:100%;overflow:visible;padding:0;width:100%}.fancybox-slide--video .fancybox-content{background:#000}.fancybox-slide--map .fancybox-content{background:#e5e3df}.fancybox-slide--iframe .fancybox-content{background:#fff}.fancybox-iframe,.fancybox-video{background:transparent;border:0;display:block;height:100%;margin:0;overflow:hidden;padding:0;width:100%}.fancybox-iframe{left:0;position:absolute;top:0}.fancybox-error{background:#fff;cursor:default;max-width:400px;padding:40px;width:100%}.fancybox-error p{color:#444;font-size:16px;line-height:20px;margin:0;padding:0}.fancybox-button{background:rgba(30,30,30,.6);border:0;border-radius:0;box-shadow:none;cursor:pointer;display:inline-block;height:44px;margin:0;padding:10px;position:relative;transition:color .2s;vertical-align:top;visibility:inherit;width:44px}.fancybox-button,.fancybox-button:link,.fancybox-button:visited{color:#ccc}.fancybox-button:hover{color:#fff}.fancybox-button:focus{outline:none}.fancybox-button.fancybox-focus{outline:1px dotted}.fancybox-button[disabled],.fancybox-button[disabled]:hover{color:#888;cursor:default;outline:none}.fancybox-button div{height:100%}.fancybox-button svg{display:block;height:100%;overflow:visible;position:relative;width:100%}.fancybox-button svg path{fill:currentColor;stroke-width:0}.fancybox-button--fsenter svg:nth-child(2),.fancybox-button--fsexit svg:first-child,.fancybox-button--pause svg:first-child,.fancybox-button--play svg:nth-child(2){display:none}.fancybox-progress{background:#ff5268;height:2px;left:0;position:absolute;right:0;top:0;transform:scaleX(0);transform-origin:0;transition-property:transform;transition-timing-function:linear;z-index:99998}.fancybox-close-small{background:transparent;border:0;border-radius:0;color:#ccc;cursor:pointer;opacity:.8;padding:8px;position:absolute;right:-12px;top:-44px;z-index:401}.fancybox-close-small:hover{color:#fff;opacity:1}.fancybox-slide--html .fancybox-close-small{color:currentColor;padding:10px;right:0;top:0}.fancybox-slide--image.fancybox-is-scaling .fancybox-content{overflow:hidden}.fancybox-is-scaling .fancybox-close-small,.fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small{display:none}.fancybox-navigation .fancybox-button{background-clip:content-box;height:100px;opacity:0;position:absolute;top:calc(50% - 50px);width:70px}.fancybox-navigation .fancybox-button div{padding:7px}.fancybox-navigation .fancybox-button--arrow_left{left:0;left:env(safe-area-inset-left);padding:31px 26px 31px 6px}.fancybox-navigation .fancybox-button--arrow_right{padding:31px 6px 31px 26px;right:0;right:env(safe-area-inset-right)}.fancybox-caption{background:linear-gradient(0deg,rgba(0,0,0,.85) 0,rgba(0,0,0,.3) 50%,rgba(0,0,0,.15) 65%,rgba(0,0,0,.075) 75.5%,rgba(0,0,0,.037) 82.85%,rgba(0,0,0,.019) 88%,transparent);bottom:0;color:#eee;font-size:14px;font-weight:400;left:0;line-height:1.5;padding:75px 44px 25px;pointer-events:none;right:0;text-align:center;z-index:99996}@supports (padding:max(0px)){.fancybox-caption{padding:75px max(44px,env(safe-area-inset-right)) max(25px,env(safe-area-inset-bottom)) max(44px,env(safe-area-inset-left))}}.fancybox-caption--separate{margin-top:-50px}.fancybox-caption__body{max-height:50vh;overflow:auto;pointer-events:all}.fancybox-caption a,.fancybox-caption a:link,.fancybox-caption a:visited{color:#ccc;text-decoration:none}.fancybox-caption a:hover{color:#fff;text-decoration:underline}.fancybox-loading{animation:a 1s linear infinite;background:transparent;border:4px solid #888;border-bottom-color:#fff;border-radius:50%;height:50px;left:50%;margin:-25px 0 0 -25px;opacity:.7;padding:0;position:absolute;top:50%;width:50px;z-index:99999}@keyframes a{to{transform:rotate(1turn)}}.fancybox-animated{transition-timing-function:cubic-bezier(0,0,.25,1)}.fancybox-fx-slide.fancybox-slide--previous{opacity:0;transform:translate3d(-100%,0,0)}.fancybox-fx-slide.fancybox-slide--next{opacity:0;transform:translate3d(100%,0,0)}.fancybox-fx-slide.fancybox-slide--current{opacity:1;transform:translateZ(0)}.fancybox-fx-fade.fancybox-slide--next,.fancybox-fx-fade.fancybox-slide--previous{opacity:0;transition-timing-function:cubic-bezier(.19,1,.22,1)}.fancybox-fx-fade.fancybox-slide--current{opacity:1}.fancybox-fx-zoom-in-out.fancybox-slide--previous{opacity:0;transform:scale3d(1.5,1.5,1.5)}.fancybox-fx-zoom-in-out.fancybox-slide--next{opacity:0;transform:scale3d(.5,.5,.5)}.fancybox-fx-zoom-in-out.fancybox-slide--current{opacity:1;transform:scaleX(1)}.fancybox-fx-rotate.fancybox-slide--previous{opacity:0;transform:rotate(-1turn)}.fancybox-fx-rotate.fancybox-slide--next{opacity:0;transform:rotate(1turn)}.fancybox-fx-rotate.fancybox-slide--current{opacity:1;transform:rotate(0deg)}.fancybox-fx-circular.fancybox-slide--previous{opacity:0;transform:scale3d(0,0,0) translate3d(-100%,0,0)}.fancybox-fx-circular.fancybox-slide--next{opacity:0;transform:scale3d(0,0,0) translate3d(100%,0,0)}.fancybox-fx-circular.fancybox-slide--current{opacity:1;transform:scaleX(1) translateZ(0)}.fancybox-fx-tube.fancybox-slide--previous{transform:translate3d(-100%,0,0) scale(.1) skew(-10deg)}.fancybox-fx-tube.fancybox-slide--next{transform:translate3d(100%,0,0) scale(.1) skew(10deg)}.fancybox-fx-tube.fancybox-slide--current{transform:translateZ(0) scale(1)}@media (max-height:576px){.fancybox-slide{padding-left:6px;padding-right:6px}.fancybox-slide--image{padding:6px 0}.fancybox-close-small{right:-6px}.fancybox-slide--image .fancybox-close-small{background:#4e4e4e;color:#f2f4f6;height:36px;opacity:1;padding:6px;right:0;top:0;width:36px}.fancybox-caption{padding-left:12px;padding-right:12px}@supports (padding:max(0px)){.fancybox-caption{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}}}.fancybox-share{background:#f4f4f4;border-radius:3px;max-width:90%;padding:30px;text-align:center}.fancybox-share h1{color:#222;font-size:35px;font-weight:700;margin:0 0 20px}.fancybox-share p{margin:0;padding:0}.fancybox-share__button{border:0;border-radius:3px;display:inline-block;font-size:14px;font-weight:700;line-height:40px;margin:0 5px 10px;min-width:130px;padding:0 15px;text-decoration:none;transition:all .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.fancybox-share__button:link,.fancybox-share__button:visited{color:#fff}.fancybox-share__button:hover{text-decoration:none}.fancybox-share__button--fb{background:#3b5998}.fancybox-share__button--fb:hover{background:#344e86}.fancybox-share__button--pt{background:#bd081d}.fancybox-share__button--pt:hover{background:#aa0719}.fancybox-share__button--tw{background:#1da1f2}.fancybox-share__button--tw:hover{background:#0d95e8}.fancybox-share__button svg{height:25px;margin-right:7px;position:relative;top:-1px;vertical-align:middle;width:25px}.fancybox-share__button svg path{fill:#fff}.fancybox-share__input{background:transparent;border:0;border-bottom:1px solid #d7d7d7;border-radius:0;color:#5d5b5b;font-size:14px;margin:10px 0 0;outline:none;padding:10px 15px;width:100%}.fancybox-thumbs{background:#ddd;bottom:0;display:none;margin:0;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;padding:2px 2px 4px;position:absolute;right:0;-webkit-tap-highlight-color:rgba(0,0,0,0);top:0;width:212px;z-index:99995}.fancybox-thumbs-x{overflow-x:auto;overflow-y:hidden}.fancybox-show-thumbs .fancybox-thumbs{display:block}.fancybox-show-thumbs .fancybox-inner{right:212px}.fancybox-thumbs__list{font-size:0;height:100%;list-style:none;margin:0;overflow-x:hidden;overflow-y:auto;padding:0;position:absolute;position:relative;white-space:nowrap;width:100%}.fancybox-thumbs-x .fancybox-thumbs__list{overflow:hidden}.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar{width:7px}.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track{background:#fff;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,.3)}.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:10px}.fancybox-thumbs__list a{-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:rgba(0,0,0,.1);background-position:50%;background-repeat:no-repeat;background-size:cover;cursor:pointer;float:left;height:75px;margin:2px;max-height:calc(100% - 8px);max-width:calc(50% - 4px);outline:none;overflow:hidden;padding:0;position:relative;-webkit-tap-highlight-color:transparent;width:100px}.fancybox-thumbs__list a:before{border:6px solid #ff5268;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:all .2s cubic-bezier(.25,.46,.45,.94);z-index:99991}.fancybox-thumbs__list a:focus:before{opacity:.5}.fancybox-thumbs__list a.fancybox-thumbs-active:before{opacity:1}@media (max-width:576px){.fancybox-thumbs{width:110px}.fancybox-show-thumbs .fancybox-inner{right:110px}.fancybox-thumbs__list a{max-width:calc(100% - 10px)}}
/* ==========================================================================
   SIDEBAR BLOG SEARCH - CLEAN & MATCH DESIGN
   ========================================================================== */

/* 1. Khối khung chứa màu trắng ngoài cùng */
.block-popular-post.blog-search {
    background-color: var(--bg-main);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
}

/* 2. Tiêu đề Tìm kiếm với Icon đỏ */
.block-popular-post.blog-search .block-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    padding: 0;
    background: transparent;
    font-family: var(--font-sans);
    text-transform: none;
}

.block-popular-post.blog-search .block-title .fa-search {
    color: var(--primary-color);
    font-size: 18px;
}

/* 3. Form & Wrapper bọc Input + Button */
.blog-search-form {
    margin: 0;
    padding: 0;
    width: 100%;
}

.blog-search-form .search-input-wrapper {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* 4. Ô Input nhập từ khóa */
.blog-search-form input.input-text {
    width: 100%;
    height: 44px;
    line-height: 44px;
    padding: 0 48px 0 14px; /* Tạo khoảng trống bên phải cho nút bấm */
    font-size: 13.5px;
    font-family: var(--font-sans);
    color: var(--text-main);
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    outline: none;
    box-sizing: border-box;
    margin: 0;
    transition: var(--transition);
    -webkit-appearance: none;
}

.blog-search-form input.input-text::placeholder {
    color: var(--text-light);
    font-size: 13.5px;
}

/* Hiệu ứng Focus vào ô Input */
.blog-search-form input.input-text:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(184, 0, 0, 0.08);
}

/* 5. Nút submit đỏ nhỏ gọn nằm lọt góc phải */
.blog-search-form button.btn-search {
    position: absolute;
    right: 4px;
    top: 4px;
    bottom: 4px;
    width: 36px;
    height: 36px;
    background-color: var(--primary-color);
    border: none;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin: 0;
    outline: none;
    transition: var(--transition);
    z-index: 2;
}

.blog-search-form button.btn-search:hover {
    background-color: var(--primary-hover);
}

.blog-search-form button.btn-search:active {
    transform: scale(0.95);
}

.blog-search-form button.btn-search .fa-search {
    font-size: 14px;
    color: var(--text-white);
}

.sidebar-block {
    background-color: var(--bg-main);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
}

.sidebar-block .block-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    padding: 0 0 10px 0;
    border-bottom: 2px solid var(--primary-color);
    background: transparent;
    font-family: var(--font-sans);
    text-transform: none;
}

.sidebar-block .block-title .fa {
    color: var(--primary-color);
    font-size: 17px;
}

.sidebar-block ul.sidebar-block-content {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-block ul.sidebar-block-content li {
    margin: 0;
    padding: 0;
    border-bottom: 1px dashed var(--border-dashed);
}

.sidebar-block ul.sidebar-block-content li:last-child {
    border-bottom: none;
}

.sidebar-block ul.sidebar-block-content li a {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 0;
    font-size: 13.5px;
    font-family: var(--font-sans);
    color: var(--text-main);
    text-decoration: none;
    transition: var(--transition);
    line-height: 1.45;
}

.sidebar-block ul.category-list li a {
    align-items: center;
}

.sidebar-block ul.sidebar-block-content li a .fa-angle-right {
    font-size: 14px;
    color: var(--text-light);
    margin-top: 2px;
    flex-shrink: 0;
    transition: var(--transition);
}

.sidebar-block ul.category-list li a .fa-angle-right {
    margin-top: 0;
}

.sidebar-block ul.sidebar-block-content li a:hover {
    color: var(--primary-color);
    padding-left: 4px;
}

.sidebar-block ul.sidebar-block-content li a:hover .fa-angle-right {
    color: var(--primary-color);
}

/* ==========================================================================
   BLOG DETAIL PAGE (.post-view) - TYPOGRAPHY & LAYOUT OPTIMIZATION
   ========================================================================== */

/* 1. Khung chứa bài viết chi tiết */
.post-view {
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    box-sizing: border-box;
    margin-bottom: 30px;
}

/* 2. Tiêu đề H1 bài viết */
.post-view h1 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-main);
    margin: 0 0 12px 0;
    font-family: var(--font-sans);
}

/* 3. Thanh thông tin Tác giả & Ngày đăng (.post-info) */
.post-view .post-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    color: var(--text-light);
}

.post-view .post-info span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Biểu tượng Icon bằng Pseudo-element */
.post-view .post-info .created-time-icon::before {
    content: "\f073"; /* Font Awesome Calendar */
    font-family: "FontAwesome";
    color: var(--primary-color);
}

.post-view .post-info .auhtor-icon::before {
    content: "\f007";
    font-family: "FontAwesome";
    color: var(--primary-color);
}

.post-view .post-info .auhtor-icon a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.post-view .post-info .auhtor-icon a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   NỘI DUNG BÀI VIẾT WYSIWYG (.blog-content)
   ========================================================================== */

.post-view article.blog-content {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-main);
    font-family: var(--font-sans);
    word-wrap: break-word;
}

/* Các thẻ văn bản Paragraph */
.post-view article.blog-content p {
    margin: 0 0 16px 0;
    line-height: 1.7;
}

/* Các cấp tiêu đề Heading bên trong bài viết */
.post-view article.blog-content h2,
.post-view article.blog-content h3,
.post-view article.blog-content h4 {
    color: var(--text-main);
    font-weight: 700;
    line-height: 1.35;
    margin: 28px 0 12px 0;
}

.post-view article.blog-content h2 {
    font-size: 20px;
    border-left: 4px solid var(--primary-color);
    padding-left: 10px;
}

.post-view article.blog-content h3 {
    font-size: 17.5px;
}

.post-view article.blog-content h4 {
    font-size: 15.5px;
}

/* Xử lý Ảnh chèn trong nội dung bài viết (Chống vỡ khung) */
.post-view article.blog-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 16px auto;
    border-radius: var(--radius-md);
}

/* Link liên kết trong bài */
.post-view article.blog-content a {
    color: var(--primary-color);
    text-decoration: underline;
    transition: var(--transition);
}

.post-view article.blog-content a:hover {
    color: var(--primary-hover);
}

/* Danh sách UL / OL */
.post-view article.blog-content ul,
.post-view article.blog-content ol {
    margin: 0 0 16px 0;
    padding-left: 24px;
}

.post-view article.blog-content li {
    margin-bottom: 6px;
}

/* Đoạn trích dẫn Blockquote */
.post-view article.blog-content blockquote {
    margin: 20px 0;
    padding: 14px 20px;
    background-color: var(--bg-light);
    border-left: 4px solid var(--primary-color);
    font-style: italic;
    color: var(--text-muted);
}

/* Bảng dữ liệu Table trong bài viết */
.post-view article.blog-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
}

.post-view article.blog-content table th,
.post-view article.blog-content table td {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    text-align: left;
}

.post-view article.blog-content table th {
    background-color: var(--bg-light);
    font-weight: 700;
}

/* Khối Code / Preformatted Text */
.post-view article.blog-content pre,
.post-view article.blog-content code {
    font-family: Consolas, Monaco, "Andale Mono", monospace;
    background-color: #272822;
    color: #f8f8f2;
    border-radius: var(--radius-md);
}

.post-view article.blog-content pre {
    padding: 14px 18px;
    overflow-x: auto;
    margin: 20px 0;
    line-height: 1.5;
}

.post-view article.blog-content code {
    padding: 2px 6px;
    font-size: 13.5px;
}

.post-view article.blog-content pre code {
    padding: 0;
    background: transparent;
}

/* Responsive Mobile */
@media screen and (max-width: 768px) {
    .post-view {
        padding: 16px;
    }

    .post-view h1 {
        font-size: 20px;
    }

    .post-view .post-info {
        align-items: flex-start;
        gap: 16px;
    }

    .post-view article.blog-content {
        font-size: 14.5px;
    }
}

/* ==========================================================================
   BLOG LISTING PAGE - CSS GRID LAYOUT
   ========================================================================== */

/* 1. Tiêu đề chính H1 */
.blog-main-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
    font-family: var(--font-sans);
}

/* 2. Danh sách bài viết */
.post-list-container .post-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

/* 3. Mỗi Card bài viết (Ép Grid 2 Cột) */
.post-list-container .post-list article.post-item {
    display: grid;
    grid-template-columns: 240px 1fr; /* Cột trái 240px (Ảnh), Cột phải (Nội dung) */
    grid-template-rows: auto;
    gap: 20px;
    align-items: start;
    padding: 16px;
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-sizing: border-box;
    transition: var(--transition);
    clear: both;
}

.post-list-container .post-list article.post-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Bài viết KHÔNG CÓ THUMBNAIL tự mở rộng 1 cột */
.post-list-container .post-list article.post-item.no-thumbnail {
    grid-template-columns: 1fr;
}

/* 4. Khung Cột Trái: Thumbnail */
.post-list-container .post-list article.post-item .post-thumbnail {
    grid-column: 1 / 2;
    width: 240px;
    height: 135px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--bg-light);
    margin: 0;
    padding: 0;
    float: none;
}

.post-list-container .post-list article.post-item .post-thumbnail a {
    display: block;
    width: 100%;
    height: 100%;
}

.post-list-container .post-list article.post-item .post-thumbnail img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 135px;
    object-fit: cover;
    display: block;
    margin: 0;
    float: none;
    transition: transform 0.3s ease;
}

.post-list-container .post-list article.post-item:hover .post-thumbnail img {
    transform: scale(1.05);
}

/* 5. Khung Cột Phải: Wrapper chứa H2, Meta, Short Content */
.post-list-container .post-list article.post-item .post-content-wrapper {
    grid-column: 2 / 3;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.post-list-container .post-list article.post-item.no-thumbnail .post-content-wrapper {
    grid-column: 1 / 2;
}

/* Tiêu đề bài viết H2 */
.post-list-container .post-list article.post-item .post-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 6px 0;
    font-family: var(--font-sans);
}

.post-list-container .post-list article.post-item .post-title a {
    color: var(--text-main);
    text-decoration: none;
    transition: var(--transition);
}

.post-list-container .post-list article.post-item .post-title a:hover {
    color: var(--primary-color);
}

/* Post Meta (Ngày tháng) */
.post-list-container .post-list article.post-item .post-meta {
    font-size: 12.5px;
    color: var(--text-light);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.post-list-container .post-list article.post-item .post-meta .fa {
    color: var(--primary-color);
}

/* Mô tả ngắn (Short Content) */
.post-list-container .post-list article.post-item .short-content {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Cắt tối đa 3 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Ẩn các ảnh WYSIWYG bị lọt vào short-content (nếu có) */
.post-list-container .post-list article.post-item .short-content img {
    display: none;
}

/* 6. Phân trang & Thông báo */
.blog-pager {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.no-posts-message {
    padding: 20px;
    background-color: var(--bg-light);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
}

/* 7. Responsive cho Mobile */
@media screen and (max-width: 768px) {
    .post-list-container .post-list article.post-item {
        grid-template-columns: 1fr; /* Mobile về 1 cột */
        gap: 12px;
        padding: 14px;
    }

    .post-list-container .post-list article.post-item .post-thumbnail {
        grid-column: 1 / 2;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .post-list-container .post-list article.post-item .post-thumbnail img {
        max-height: none;
    }

    .post-list-container .post-list article.post-item .post-content-wrapper {
        grid-column: 1 / 2;
    }

    .post-list-container .post-list article.post-item .post-title {
        font-size: 15.5px;
    }
}

/* ==========================================================================
   HOMEPAGE RECENT POSTS - HORIZONTAL CARD LAYOUT (MOBILE FIRST)
   ========================================================================== */

/* 1. Khung chứa chính */
.post-grid-block {
    margin-top: 25px;
    margin-bottom: 25px;
}

.post-grid-block .block-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    text-transform: uppercase;
    padding-bottom: 8px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--primary-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.post-grid-block .block-title .fa {
    color: var(--primary-color);
}

/* 2. Danh sách Grid
   - Mobile (< 768px): 1 cột (mỗi dòng 1 card)
   - Tablet (768px - 1199px): 2 hoặc 3 cột
   - Desktop lớn (>= 1200px): 5 cột nằm trên 1 hàng như trong ảnh
*/
.post-grid-block .post-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mặc định Mobile: 1 cột */
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 3. Từng Card Bài Viết Nằm Ngang (Grid 2 cột nội bộ: Cột trái Ảnh 85px - Cột phải Nội dung) */
.post-grid-block .post-grid .item {
    display: grid;
    grid-template-columns: 85px 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px;
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px; /* Bo góc mềm mại giống mẫu */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    transition: all 0.25s ease;
    box-sizing: border-box;
}

.post-grid-block .post-grid .item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* 4. Khung Ảnh Thumbnail Bên Trái */
.post-grid-block .post-grid .item .post-thumnail {
    width: 85px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    background-color: #f5f5f5;
    flex-shrink: 0;
}

.post-grid-block .post-grid .item .post-thumnail a {
    display: block;
    width: 100%;
    height: 100%;
}

.post-grid-block .post-grid .item .post-thumnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.post-grid-block .post-grid .item:hover .post-thumnail img {
    transform: scale(1.08);
}

/* 5. Khung Nội Dung Bên Phải (Ngày + Tiêu đề) */
.post-grid-block .post-grid .item .post-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0; /* Tránh tràn layout flex/grid */
}

/* Ngày tháng đăng bài */
.post-grid-block .post-grid .item .post-info .post-date {
    font-size: 11px;
    color: var(--primary-color);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.post-grid-block .post-grid .item .post-info .post-date .fa {
    font-size: 11px;
}

.post-grid-block .post-grid .item .post-info .post-date time {
    color: #d32f2f; /* Chữ ngày tháng màu đỏ nhạt */
}

/* Tiêu đề bài viết */
.post-grid-block .post-grid .item .post-info a.post-title {
    text-decoration: none;
    color: #222222;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
    transition: color 0.2s ease;
}

.post-grid-block .post-grid .item:hover .post-info a.post-title {
    color: var(--primary-color);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (MOBILE FIRST)
   ========================================================================== */

/* Tablet nhỏ (>= 600px): 2 Cột */
@media (min-width: 600px) {
    .post-grid-block .post-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet ngang / Laptop (>= 992px): 3 Cột */
@media (min-width: 992px) {
    .post-grid-block .post-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Màn hình lớn Desktop (>= 1200px): Dàn 5 Cột trên 1 Hàng */
@media (min-width: 1200px) {
    .post-grid-block .post-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
}

/* ============================================================
   1. MOBILE FIRST (Mặc định cho các màn hình nhỏ nhất)
   ============================================================ */

/* Container chính */
.related-post-products,
.related-posts{
    margin: 20px 0;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
}

/* Tiêu đề khối */
.related-post-products .block-title,
.related-posts .block-title{
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--primary-color);
    text-transform: uppercase;
}
.related-posts .related-posts-list{
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.related-posts .related-posts-list > li {
    width: 100%;
}
.related-posts .related-posts-list > li a,
.related-posts .related-posts-list > li a:visited,
.related-posts .related-posts-list > li a:active{
    color:var(--primary-color);
}
.related-posts .related-posts-list > li a:hover{
    color:var(--primary-hover);
    text-decoration:underline;
}
/* Danh sách dạng Grid: Mặc định 2 cột trên di động */
.related-post-products .products-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Thẻ chứa từng sản phẩm */
.related-post-products .item .product {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    padding: 10px;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
}

/* Hình ảnh sản phẩm */
.related-post-products .product-image {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
    overflow: hidden;
}

.related-post-products .product-image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Thông tin sản phẩm */
.related-post-products .details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

/* Tên sản phẩm (Rút gọn tối đa 2 dòng) */
.related-post-products .product-name {
    margin: 0 0 6px 0;
    font-size: 13px;
    line-height: 1.35;
}

.related-post-products .product-name a {
    color: #333;
    text-decoration: none;
}

/* Giá sản phẩm */
.related-post-products .price-box {
    margin-top: auto;
}

.related-post-products .price-box .price {
    font-size: 14px;
    font-weight: 700;
    color: #e60000;
}

.related-post-products .custom-rezo-price {
    font-size: 13px;
    font-weight: normal;
}

/* ============================================================
   2. TABLET (Từ 576px trở lên)
   ============================================================ */
@media (min-width: 576px) {
    .related-post-products {
        padding: 20px;
        margin: 25px 0;
    }

    .related-post-products .block-title {
        font-size: 17px;
        margin-bottom: 14px;
    }

    /* Tăng lên 3 cột */
    .related-post-products .products-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .related-post-products .item .product {
        padding: 12px;
    }

    .related-post-products .product-name {
        font-size: 14px;
    }

    .related-post-products .price-box .price {
        font-size: 15px;
    }
}

/* ============================================================
   3. DESKTOP (Từ 992px trở lên)
   ============================================================ */
@media (min-width: 992px) {
    .related-post-products {
        margin: 30px 0;
    }

    .related-post-products .block-title {
        font-size: 18px;
        margin-bottom: 16px;
    }

    /* Tăng lên 4 cột (hoặc tự động tràn cột nếu số lượng sản phẩm nhiều) */
    .related-post-products .products-list {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    /* Hiệu ứng Hover dành riêng cho Desktop */
    .related-post-products .item .product:hover {
        border-color: #0066cc;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
    }

    .related-post-products .item .product:hover .product-image img {
        transform: scale(1.05);
    }

    .related-post-products .product-name a:hover {
        color: #0066cc;
    }
}


.box-faq_product {
    width: 100%;
    padding-top: 10px;
}

.box-faq_product details.faq-box {
    display: block;
    border: none !important;
    background: transparent;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--border-color, #e2e8f0) !important;
}

.box-faq_product details.faq-box:last-child {
    border-bottom: none !important;
    margin-bottom: 0;
    padding-bottom: 0;
}
.box-faq_product summary {
    display: block;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-color, #111111);
    list-style: none;
    cursor: default;
    user-select: text;
    padding: 0;
    margin-bottom: 8px;
}

.box-faq_product summary::-webkit-details-marker {
    display: none;
}

.box-faq_product summary strong {
    font-weight: 700;
    color: var(--text-main, #b80000);
    display: block;
}

.box-faq_product .answer-content {
    padding: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-muted, #444444);
    background: transparent;
}

.box-faq_product .answer-content p {
    margin: 0 0 10px 0;
}

.box-faq_product .answer-content p:last-child {
    margin-bottom: 0;
}

.box-faq_product .title-faq_product {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color, #111111);
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary-color, #b80000);
}

@media (min-width: 769px) {
    .box-faq_product .title-faq_product {
        display: none !important;
    }

    .box-faq_product details.faq-box {
        margin-bottom: 28px;
        padding-bottom: 24px;
    }

    .box-faq_product summary {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .box-faq_product .answer-content {
        font-size: 14.5px;
    }
}
/**
 * PL_Quotation Module Styling - UI Theme Native Integration
 * Approach: Mobile-First Standard using CSS Variables & FontAwesome 4.7
 */

/* ==========================================================================
   1. BASE & MOBILE LAYOUT (Default SmartPhone View)
   ========================================================================== */

.quotation-view {
    margin: 10px 0 25px 0;
    font-family: var(--font-sans);
    color: var(--text-main);
    box-sizing: border-box;
}

.quotation-view *,
.quotation-view *:before,
.quotation-view *:after {
    box-sizing: inherit;
}

/* Page Title Header */
.quotation-view .page-title {
    border-bottom: 2px solid var(--primary-color);
    margin-bottom: 15px;
    padding-bottom: 6px;
}

.quotation-view .page-title h1 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    text-transform: uppercase;
    line-height: 1.3;
}

/* Bảng danh sách sản phẩm - Cuộn ngang mượt trên Mobile */
.quotation-items-table {
    margin-bottom: 12px;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-main);
}

.quotation-items-table table.data-table {
    width: 100%;
    border-collapse: collapse;
}

.quotation-items-table table.data-table th {
    background-color: var(--bg-light);
    color: var(--text-main);
    font-weight: 600;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    font-size: 13px;
    white-space: nowrap;
}

.quotation-items-table table.data-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    font-size: 13px;
}

.quotation-items-table table.data-table tr:last-child td {
    border-bottom: none;
}

.quotation-items-table .product-sku {
    color: var(--text-muted);
    font-size: 12px;
}

.quotation-items-table .product-name strong {
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.4;
    display: block;
}

/* Input số lượng */
.quotation-items-table input.qty {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 6px 4px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    width: 55px;
    height: 36px;
    outline: none;
    background: var(--bg-main);
    transition: var(--transition);
    -webkit-appearance: none;
}

.quotation-items-table input.qty:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(0, 115, 230, 0.15);
}

/* Nút Xóa - Tối ưu Icon FontAwesome 4.7 */
.quotation-items-table .btn-remove2 {
    color: var(--text-light);
    font-size: 15px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

/* Tự động chèn Icon FA 4.7 nếu template truyền thống dùng <a>Xóa</a> hoặc <a></a> */
.quotation-items-table .btn-remove2::before {
    font-family: 'FontAwesome';
    content: "\f1f8"; /* Unicode fa-trash-o / fa-trash */
    font-size: 16px;
}

/* Ẩn text cũ nếu có trong thẻ <a> */
.quotation-items-table .btn-remove2 span,
.quotation-items-table .btn-remove2 {
    font-size: 0; /* Giấu chữ cũ */
}

.quotation-items-table .btn-remove2::before {
    font-size: 16px; /* Giữ nguyên kích thước icon */
}

.quotation-items-table .btn-remove2:hover {
    color: var(--price-color);
    background-color: #fef2f2;
}

/* Nút Cập nhật số lượng */
.quotation-update-actions {
    margin-bottom: 20px;
    text-align: right;
}

.quotation-update-actions .btn-update {
    width: 100%;
    background: var(--bg-tab);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 10px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
}

.quotation-update-actions .btn-update:hover {
    background: var(--tab-active-bg);
    border-color: var(--accent-color);
    color: var(--primary-color);
}

/* Khối Form Thông tin người nhận */
.quotation-customer-info {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 15px;
}

.quotation-customer-info .legend {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 12px;
    text-transform: uppercase;
}

.quotation-customer-info .form-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quotation-customer-info .form-list li {
    margin-bottom: 12px;
}

.quotation-customer-info .form-list label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-main);
    margin-bottom: 4px;
}

.quotation-customer-info .form-list label em {
    color: var(--price-color);
    margin-right: 3px;
    font-style: normal;
}

.quotation-customer-info .input-box input.input-text,
.quotation-customer-info .input-box textarea {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
    background: var(--bg-main);
    color: var(--text-main);
    transition: var(--transition);
    -webkit-appearance: none;
}

.quotation-customer-info .input-box input.input-text:focus,
.quotation-customer-info .input-box textarea:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12);
}

.quotation-customer-info .input-box textarea {
    resize: vertical;
    min-height: 80px;
}

/* Nút Submit Gửi Báo Giá */
.quotation-submit-actions {
    margin-top: 15px;
}

.quotation-submit-actions .btn-submit-quote {
    width: 100%;
    background-color: var(--primary-color);
    border: none;
    color: var(--text-white);
    padding: 12px 15px;
    font-size: 15px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-transform: uppercase;
    transition: var(--transition);
}

.quotation-submit-actions .btn-submit-quote:hover {
    background-color: var(--primary-hover);
}

/* Màn hình giỏ hàng báo giá trống */
.quotation-empty {
    padding: 25px 15px;
    text-align: center;
    background: var(--bg-light);
    border: 1px dashed var(--border-dashed);
    border-radius: var(--radius-md);
}

.quotation-empty p {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 15px;
}

.quotation-empty .button {
    background-color: var(--primary-color);
    color: var(--text-white);
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    transition: var(--transition);
}

.quotation-empty .button:hover {
    background-color: var(--primary-hover);
}

.btn-quote .count-quote-item {
    color: #fff;
    background:var(--price-color);
    width: 20px;
    height: 20px;
    display: inline-flex;
    justify-content: center;
   border-radius:50%;
    font-weight:normal;
}
/* Styling riêng cho nút Thêm vào báo giá */
.rq-actions button.btn-add-to-quote {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    padding: 0 16px;
    margin-bottom: 10px;

    background-color: var(--primary-color, #0066cc);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-sm, 4px);

    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-sizing: border-box;
}
.rq-actions button.btn-add-to-quote::before {
    font-family: 'FontAwesome';
    content: "\f0fe";
    margin-right: 8px;
    font-size: 15px;
}
/* Thẻ span bên trong button kế thừa style */
.rq-actions button.btn-add-to-quote span {
    display: inline-block;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* Hiệu ứng Hover & Active */
.rq-actions button.btn-add-to-quote:hover {
    background-color: var(--primary-color, #004fb3);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.rq-actions button.btn-add-to-quote:active {
    transform: translateY(1px);
}

/* ==========================================================================
   SUCCESS MESSAGE STYLING
   ========================================================================== */

/* Reset thẻ <ul> thông báo */
ul.messages {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    width: 100%;
}

ul.messages li.success-msg {
    background-color: #f0fdf4; /* Nền xanh lục nhạt dịu mắt */
    border: 1px solid #bbf7d0;  /* Viền xanh lá mỏng */
    border-left: 4px solid #22c55e; /* Vạch điểm nhấn xanh lá nổi bật bên trái */
    border-radius: var(--radius-sm, 4px);
    padding: 12px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

ul.messages li.success-msg ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.messages li.success-msg li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* Thêm icon Checkmark thành công bằng FontAwesome 4.7 */
ul.messages li.success-msg li::before {
    font-family: 'FontAwesome';
    content: "\f00c"; /* fa-check */
    color: #16a34a;
    font-size: 15px;
    margin-right: 10px;
    flex-shrink: 0;
}

ul.messages li.success-msg span {
    color: #15803d;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

/* Tối ưu chữ vừa phải trên màn hình di động nhỏ */
@media screen and (max-width: 575px) {
    ul.messages li.success-msg {
        padding: 10px 12px;
    }

    ul.messages li.success-msg span {
        font-size: 13px;
    }
}


/* ==========================================================================
   2. TABLET BREAKPOINT (min-width: 600px)
   ========================================================================== */
@media screen and (min-width: 600px) {
    .quotation-view .page-title h1 {
        font-size: 20px;
    }

    .quotation-update-actions .btn-update {
        width: auto;
        padding: 8px 18px;
    }

    .quotation-customer-info {
        padding: 20px;
    }

    .quotation-customer-info .legend {
        font-size: 16px;
    }

    .quotation-submit-actions .btn-submit-quote {
        width: auto;
        padding: 12px 30px;
    }
}


/* ==========================================================================
   3. DESKTOP BREAKPOINT (min-width: 992px)
   ========================================================================== */
@media screen and (min-width: 992px) {
    .quotation-view {
        margin: 20px 0 40px 0;
    }

    .quotation-view .page-title h1 {
        font-size: 22px;
    }

    .quotation-items-table table.data-table th {
        font-size: 14px;
        padding: 12px 10px;
    }

    .quotation-items-table table.data-table td {
        font-size: 14px;
        padding: 12px 10px;
    }

    .quotation-customer-info .input-box input.input-text {
        max-width: 450px;
    }

    .quotation-customer-info .input-box textarea {
        max-width: 650px;
    }

    .quotation-items-table th.col-sku,
    .quotation-items-table td.col-sku {
        width: 18%;
        white-space: nowrap;
    }

    .quotation-items-table th.col-name,
    .quotation-items-table td.col-name {
        width: 52%;
    }

    .quotation-items-table th.col-qty,
    .quotation-items-table td.col-qty {
        width: 15%;
    }

    .quotation-items-table th.col-action,
    .quotation-items-table td.col-action {
        width: 15%;
    }
}