/* =========================================================
   KHOA CUA SÀI GÒN - Brand layer (Navy + Gold)
   Port bo mau tu KetSatSaiGon, ap len base theme dung chung.
   File nay nap CUOI CUNG trong bundle css-website.
   ========================================================= */

:root {
    --kz-navy: #0f2237;
    --kz-navy-2: #1b3a5c;
    --kz-navy-3: #1a3a5c;
    --kz-gold: #c8a45a;
    --kz-gold-2: #dbb96e;
    --kz-gold-dark: #9a7328;
    --kz-gold-soft: rgba(200, 164, 90, .12);
    --kz-ink: #b0c4d8;
    --kz-ink-2: #8aa8c4;
    --kz-red: #c53030;
}

/* ============ HEADER ============ */
.bg-black,
.header-top-area,
.header-mid-area,
.header-mid-area.bg-black,
.header-bottom-area,
.header-bottom-area.sticky-header,
.header-bottom-area.sticky-header.sticky,
.sticky-header.sticky,
.header-bottom-area .social-follow-box {
    background: var(--kz-navy) !important;
    opacity: 1 !important;
}

.header-bottom-area {
    border-bottom: 3px solid var(--kz-gold) !important;
}

.header-top-area,
.header-top-area a,
.header-mid-area .phone,
.header-mid-area .phone span {
    color: var(--kz-gold) !important;
}

.top-search-btn,
.searchbox .search-form-input button {
    background: var(--kz-gold) !important;
    border-color: var(--kz-gold) !important;
    color: var(--kz-navy) !important;
    font-weight: 700 !important;
}

.top-search-btn:hover,
.searchbox .search-form-input button:hover {
    background: var(--kz-gold-2) !important;
}

/* ============ MENU ============ */
.main-menu-area nav > ul > li > a,
.main-menu-area ul li a {
    color: #fff !important;
}

.main-menu-area nav > ul > li > a:hover,
.main-menu-area ul li a:hover,
.main-menu-area nav > ul > li.active > a,
.main-menu-area ul li.active > a {
    color: var(--kz-gold) !important;
}

.dropdown_menu,
.mega-menu {
    background: var(--kz-navy) !important;
    border-top: 2px solid var(--kz-gold) !important;
}

.dropdown_menu li a,
.mega-menu li a {
    color: var(--kz-ink) !important;
}

.dropdown_menu li a:hover,
.mega-menu li a:hover {
    color: var(--kz-gold) !important;
    background: var(--kz-gold-soft) !important;
}

/* Mobile menu */
.mean-container .mean-bar,
.mean-container .mean-nav {
    background: var(--kz-navy) !important;
}

.mean-container .mean-nav ul li a {
    color: var(--kz-ink) !important;
    border-top: 1px solid rgba(200, 164, 90, .1) !important;
}

.mean-container .mean-nav ul li a:hover {
    color: var(--kz-gold) !important;
    background: var(--kz-gold-soft) !important;
}

.mean-container .mean-nav ul li a.mean-expand {
    color: var(--kz-gold) !important;
    border-left: 1px solid rgba(200, 164, 90, .15) !important;
}

.mean-container a.meanmenu-reveal,
.mean-container a.meanmenu-reveal span {
    color: var(--kz-gold) !important;
}

.mean-container a.meanmenu-reveal span {
    background: var(--kz-gold) !important;
}

.mobile-menu nav ul li a {
    color: var(--kz-ink) !important;
}

.mobile-menu nav ul li a:hover {
    color: var(--kz-gold) !important;
}

/* ============ LOGO SÀI GÒN ============ */
/* Font chuan tieng Viet — CHI cho logo, khong dung toi menu/noi dung.
   Segoe UI o weight 800 bi Windows gia lap net dam lam be dau. */
.logo-kz,
.logo-kz-icon,
.logo-kz-txt,
.logo-kz-txt .l1,
.logo-kz-txt .l2 {
    font-family: 'Be Vietnam Pro', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.logo-kz {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none !important;
    padding: 6px 0;
}

.logo-kz-icon {
    width: 60px;
    height: 60px;
    background: var(--kz-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kz-navy);
    font-weight: 900;
    font-size: 20px;
    letter-spacing: -.5px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(200, 164, 90, .35);
}

.logo-kz-txt { display: inline-block; }
.logo-kz-txt .l1, .logo-kz-txt .l2 { display: block; }

.logo-kz-txt .l1 {
    font-size: 21px;
    font-weight: 800;
    color: var(--kz-gold);
    line-height: 1.35; /* line-height:1 + overflow:hidden lam dau chu IN HOA tieng Viet bi xen mat */
    letter-spacing: .4px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    white-space: nowrap;
}

.logo-kz-txt .l2 {
    font-size: 11px;
    color: rgba(255, 255, 255, .85);
    margin-top: 2px;
    line-height: 1.4;
    letter-spacing: .5px;
    text-transform: uppercase;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .logo-kz-icon { width: 46px; height: 46px; font-size: 16px; }
    .logo-kz-txt .l1 { font-size: 18px; }
    .logo-kz-txt .l2 { font-size: 11px; letter-spacing: .8px; }
}

/* ============ NUT / CTA ============ */
.default-btn,
.button-review,
.newsletter-inner .newletter-input .btn,
.plantmore-product-add-cart > a,
.cart-page-total > a,
.checkout-payment .button-continue-payment,
.li-btn-3 a {
    background: var(--kz-navy) !important;
    border-color: var(--kz-navy) !important;
    color: #fff !important;
}

.default-btn:hover,
.button-review:hover,
.newsletter-inner .newletter-input .btn:hover,
.plantmore-product-add-cart > a:hover,
.cart-page-total > a:hover,
.checkout-payment .button-continue-payment:hover,
.li-btn-3 a:hover {
    background: var(--kz-gold) !important;
    border-color: var(--kz-gold) !important;
    color: var(--kz-navy) !important;
}

.kz-btn-gold {
    display: inline-block;
    background: var(--kz-gold);
    color: var(--kz-navy) !important;
    font-weight: 700;
    padding: 11px 26px;
    border-radius: 6px;
    border: none;
    letter-spacing: .3px;
    transition: background .2s;
}

.kz-btn-gold:hover { background: var(--kz-gold-2); }

.kz-btn-navy {
    display: inline-block;
    background: var(--kz-navy);
    color: #fff !important;
    font-weight: 700;
    padding: 11px 26px;
    border-radius: 6px;
    border: 1px solid var(--kz-navy);
    transition: all .2s;
}

.kz-btn-navy:hover { background: var(--kz-navy-2); }

/* ============ TIEU DE MUC ============ */
.section-title h2,
.li-section-title h2,
.product-area .section-title h2 {
    color: var(--kz-navy) !important;
}

.kz-heading {
    position: relative;
    display: inline-block;
    color: var(--kz-navy);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding-bottom: 10px;
    margin-bottom: 18px;
}

.kz-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    background: var(--kz-gold);
}

/* ============ BREADCRUMB / PHAN TRANG ============ */
.breadcrumb-area {
    background: #f2f5f8 !important;
    border-bottom: 1px solid #e2e8f0;
}

.breadcrumb-list li a { color: var(--kz-navy) !important; }
.breadcrumb-list li a:hover,
.breadcrumb-list li.active { color: var(--kz-gold-dark) !important; }

.pagination-box > li.active a,
.pagination-box > li a:hover {
    background: var(--kz-navy) !important;
    border-color: var(--kz-navy) !important;
    color: #fff !important;
}

/* ============ THE SAN PHAM ============ */
.single-product-wrap,
.product_desc {
    border-color: #e2e8f0;
}

/* An thanh "Gio hang" hover cua theme goc — troi ra duoi card thanh dai trang de len footer
   (trang chu da an rieng, day la ban an TOAN CUC cho ca carousel SP tuong tu o trang chi tiet) */
.single-product-wrap .add-actions {
    display: none !important;
}

/* An toan bo co quoc gia (Duc/Nhat) o goc card SP — theo yeu cau chu shop 2026-09-04.
   Muon hien lai: xoa rule nay (du lieu Flag trong DB van giu nguyen). */
.single-product-wrap .label-product,
.product-image .label-product {
    display: none !important;
}

.single-product-wrap:hover {
    box-shadow: 0 6px 22px rgba(15, 34, 55, .12);
}

.product_desc .product_desc_info .product_name a { color: var(--kz-navy) !important; }
.product_desc .product_desc_info .product_name a:hover { color: var(--kz-gold-dark) !important; }

.price-box .new-price,
.price-box span.new-price,
.kz-price {
    color: var(--kz-red) !important;
    font-weight: 700;
}

.price-box .old-price { color: #94a3b8 !important; }

.product-label,
.sticker,
.kz-badge {
    background: var(--kz-navy) !important;
    color: #fff !important;
}

.kz-badge-gold {
    background: var(--kz-gold) !important;
    color: var(--kz-navy) !important;
    font-weight: 700;
}

/* ============ LINK CHUNG ============ */
a { color: var(--kz-navy); }
a:hover { color: var(--kz-gold-dark); }

#scrollUp {
    background: var(--kz-gold) !important;
    color: var(--kz-navy) !important;
}

@media screen and (max-width: 768px) {
    #scrollUp { bottom: 70px !important; }
}

/* ============ FOOTER ============ */
.footer-area,
.footer-top,
.footer-static-top,
.footer-bottom,
.footer-area .copyright {
    background: var(--kz-navy) !important;
    color: var(--kz-ink) !important;
}

/* Tieu de cot footer: CHI mot gach vang, dat tren the h3/h4 ben trong.
   Truoc day luat ap cho ca khung .footer-title lan h3 ben trong -> ra 2 gach. */
.footer-area .footer-title h3,
.footer-area .footer-title h4,
.footer-area .time-title {
    border-bottom: 2px solid var(--kz-gold);
    display: inline-block;
    padding-bottom: 7px;
}

.footer-area a { color: var(--kz-ink) !important; }
.footer-area a:hover { color: var(--kz-gold) !important; }
.footer-area .copyright a { color: var(--kz-gold) !important; }

/* Khoi USP tren footer (port tu KetSatSaiGon) */
.kz-usp {
    background: var(--kz-navy-3);
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.kz-usp-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.kz-usp-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 180px;
    padding: 8px 12px;
}

.kz-usp-icon {
    width: 40px;
    height: 40px;
    background: rgba(200, 164, 90, .15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kz-usp-icon i { font-size: 18px; color: var(--kz-gold); }

.kz-usp-text strong {
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.kz-usp-text span {
    color: var(--kz-ink-2);
    font-size: 12px;
    line-height: 1.3;
}

/* =========================================================
   TRANG CHU - Hero / USP / Luoi danh muc / Luoi nhu cau
   ========================================================= */

/* ---- HERO ---- */
.kz-hero {
    background: linear-gradient(135deg, #0b1a2b 0%, #0f2237 45%, #16324f 100%);
    position: relative;
    overflow: hidden;
    padding: 58px 0 54px;
}

.kz-hero::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 164, 90, .18) 0%, rgba(200, 164, 90, 0) 70%);
    pointer-events: none;
}

.kz-hero-inner { position: relative; z-index: 2; max-width: 900px; }

.kz-hero-eyebrow {
    display: inline-block;
    background: rgba(200, 164, 90, .14);
    border: 1px solid rgba(200, 164, 90, .35);
    color: var(--kz-gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.kz-hero h2 {
    color: #fff;
    font-size: 38px;
    line-height: 1.25;
    font-weight: 800;
    margin: 0 0 14px;
    letter-spacing: .2px;
}

.kz-hero h2 em { color: var(--kz-gold); font-style: normal; }

.kz-hero p {
    color: var(--kz-ink);
    font-size: 15px;
    line-height: 1.75;
    margin: 0 0 26px;
    max-width: 700px;
}

.kz-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.kz-hero-cta a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .2px;
    transition: all .2s;
    text-decoration: none !important;
}

.kz-hero-cta .c-gold { background: var(--kz-gold); color: var(--kz-navy) !important; }
.kz-hero-cta .c-gold:hover { background: var(--kz-gold-2); transform: translateY(-2px); }
.kz-hero-cta .c-line { border: 1px solid rgba(200, 164, 90, .55); color: var(--kz-gold) !important; }
.kz-hero-cta .c-line:hover { background: rgba(200, 164, 90, .12); }

.kz-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.kz-hero-stats div strong {
    display: block;
    color: var(--kz-gold);
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
}

.kz-hero-stats div span {
    color: var(--kz-ink-2);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .6px;
}

@media (max-width: 767px) {
    .kz-hero { padding: 38px 0 34px; }
    .kz-hero h2 { font-size: 26px; }
    .kz-hero-stats { gap: 20px; }
    .kz-hero-stats div strong { font-size: 20px; }
}

/* ---- DAI USP ---- */
.kz-usp-bar { background: #fff; border-bottom: 1px solid #e6ebf1; padding: 18px 0; }

.kz-usp-bar .kz-usp-grid { gap: 6px; }

.kz-usp-bar .kz-usp-icon { background: rgba(15, 34, 55, .06); }
.kz-usp-bar .kz-usp-icon i { color: var(--kz-gold-dark); }
.kz-usp-bar .kz-usp-text strong { color: var(--kz-navy); }
.kz-usp-bar .kz-usp-text span { color: #64748b; }

/* ---- LUOI DANH MUC (hang) ---- */
.kz-section { padding: 46px 0; }
.kz-section.alt { background: #f5f7fa; }

.kz-section-head { text-align: center; margin-bottom: 30px; }

.kz-section-head h2 {
    color: var(--kz-navy);
    font-size: 26px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin: 0 0 12px;
}

.kz-section-head h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: var(--kz-gold);
    margin: 12px auto 0;
}

.kz-section-head p { color: #64748b; font-size: 14px; margin: 0; }

.kz-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

.kz-cat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 16px;
    text-decoration: none !important;
    transition: all .2s;
}

.kz-cat-card:hover {
    border-color: var(--kz-gold);
    box-shadow: 0 6px 18px rgba(15, 34, 55, .1);
    transform: translateY(-2px);
}

.kz-cat-ic {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--kz-navy);
    color: var(--kz-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 800;
}

.kz-cat-card:hover .kz-cat-ic { background: var(--kz-gold); color: var(--kz-navy); }

.kz-cat-name {
    color: var(--kz-navy);
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.35;
    display: block;
}

.kz-cat-count { color: #94a3b8; font-size: 12px; }

/* ---- LUOI CHON THEO NHU CAU ---- */
.kz-need-block { margin-bottom: 26px; }

.kz-need-title {
    color: var(--kz-navy);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin: 0 0 14px;
    padding-left: 12px;
    border-left: 3px solid var(--kz-gold);
}

.kz-need-grid { display: flex; flex-wrap: wrap; gap: 10px; }

.kz-need-grid a {
    display: inline-block;
    background: #fff;
    border: 1px solid #dbe3ec;
    color: var(--kz-navy) !important;
    font-size: 13.5px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 999px;
    text-decoration: none !important;
    transition: all .18s;
}

.kz-need-grid a:hover {
    background: var(--kz-navy);
    border-color: var(--kz-navy);
    color: var(--kz-gold) !important;
}

/* =========================================================
   TRANG CHI TIET SAN PHAM - the thong so Navy/Gold
   ========================================================= */
.product-info .product-title {
    color: var(--kz-navy);
    font-size: 25px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 14px;
    padding-bottom: 12px;
    position: relative;
}

.product-info .product-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 3px;
    background: var(--kz-gold);
}

/* Bang thong so -> the */
.product-info table.table {
    border: 1px solid #dbe3ec !important;
    border-radius: 10px;
    overflow: hidden;
    border-collapse: separate !important;
    border-spacing: 0;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 34, 55, .05);
    margin-bottom: 18px;
}

.product-info table.table td {
    border: none !important;
    border-bottom: 1px solid #eef2f6 !important;
    padding: 10px 14px !important;
    vertical-align: top;
    font-size: 14px;
    line-height: 1.55;
    color: #24303f;
}

.product-info table.table tr:last-child td { border-bottom: none !important; }
.product-info table.table tr:nth-child(even) td { background: #fafbfd; }

.product-info table.table td.thuoc-tinh-ruou {
    background: #f2f5f8 !important;
    color: var(--kz-navy) !important;
    font-weight: 700;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .3px;
    /* KHONG dung nowrap: nhan dai nhu "Do day cua - do cua" se tran ra ngoai o */
    white-space: normal;
    word-break: break-word;
    border-right: 1px solid #e4eaf1 !important;
    width: 165px;
}

/* Hang gia noi bat */
.product-info table.table tr#bang-gia td {
    background: linear-gradient(90deg, rgba(200, 164, 90, .14), rgba(200, 164, 90, .03)) !important;
    border-top: 1px solid rgba(200, 164, 90, .35) !important;
    border-bottom: 1px solid rgba(200, 164, 90, .35) !important;
}

.product-info table.table tr#bang-gia td.thuoc-tinh-ruou {
    background: rgba(200, 164, 90, .22) !important;
    color: var(--kz-navy) !important;
}

.product-info table.table tr#bang-gia .new-price {
    color: var(--kz-red) !important;
    font-size: 23px !important;
    font-weight: 800 !important;
    letter-spacing: -.3px;
}

.product-info table.table tr#bang-gia .old-price { color: #94a3b8 !important; }

.product-info table.table td a { color: var(--kz-navy) !important; font-weight: 600; }
.product-info table.table td a:hover { color: var(--kz-gold-dark) !important; }

/* Tieu de trong phan mo ta */
#description h2 {
    color: var(--kz-navy);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.35;
    margin: 30px 0 14px;
    padding: 2px 0 2px 14px;
    border-left: 4px solid var(--kz-gold);
}

#description h3 { color: var(--kz-navy-2); font-weight: 700; }

#description table { border-color: #dbe3ec; }
#description table th {
    background: var(--kz-navy) !important;
    color: #fff !important;
    border-color: var(--kz-navy-2) !important;
}

/* Bang gia trong mo ta */
.price-table-h2 {
    color: var(--kz-navy);
    border-left: 4px solid var(--kz-gold);
    padding-left: 14px;
}

/* San pham lien quan */
.sp-tuong-tu {
    color: var(--kz-navy);
    font-weight: 800;
    text-transform: uppercase;
    border-left: 4px solid var(--kz-gold);
    padding-left: 14px;
}

@media (max-width: 767px) {
    .product-info .product-title { font-size: 20px; }
    .product-info table.table td.thuoc-tinh-ruou { width: 118px; font-size: 11.5px; white-space: normal; }
    .product-info table.table td { padding: 8px 10px !important; font-size: 13px; }
    .product-info table.table tr#bang-gia .new-price { font-size: 19px; }
    #description h2 { font-size: 18px; }
}

/* =========================================================
   NOI DUNG SAN PHAM (sinh tu thuoc tinh) - Navy/Gold
   ========================================================= */
.kz-feature-list { margin: 14px 0 6px; }

.kz-feature-list h4 {
    color: var(--kz-navy);
    font-size: 15.5px;
    font-weight: 700;
    margin: 16px 0 6px;
    padding-left: 12px;
    border-left: 3px solid var(--kz-gold);
    line-height: 1.4;
}

.kz-feature-list p {
    margin: 0 0 4px;
    padding-left: 15px;
    color: #3a4655;
    line-height: 1.75;
}

.kz-adv-list {
    counter-reset: kzadv;
    list-style: none;
    padding: 0;
    margin: 14px 0;
}

.kz-adv-list > li {
    counter-increment: kzadv;
    position: relative;
    padding: 12px 14px 12px 52px;
    margin-bottom: 10px;
    background: #f8fafc;
    border: 1px solid #e4eaf1;
    border-left: 3px solid var(--kz-gold);
    border-radius: 6px;
    line-height: 1.7;
    color: #3a4655;
}

.kz-adv-list > li::before {
    content: counter(kzadv);
    position: absolute;
    left: 14px;
    top: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--kz-navy);
    color: var(--kz-gold);
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kz-adv-list > li strong { color: var(--kz-navy); }

@media (max-width: 767px) {
    .kz-feature-list h4 { font-size: 14.5px; }
    .kz-feature-list p { padding-left: 12px; }
    .kz-adv-list > li { padding: 10px 12px 10px 46px; }
}

/* =========================================================
   MOBILE: bang rong trong phan mo ta SP tu cuon ngang
   (truoc day bang so sanh 520px lam ca trang bi day sang phai)
   ========================================================= */
@media (max-width: 767px) {
    #description table,
    .description-content table,
    .tab-content table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Giu cot khong bi bop qua hep khi cuon */
    #description table th,
    #description table td,
    .description-content table th,
    .description-content table td {
        min-width: 110px;
    }

    /* Anh trong mo ta khong duoc vuot khung */
    #description img,
    .description-content img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* =========================================================
   MOBILE: chan tran ngang toan trang
   Nguyen nhan: badge gio hang dat right:-4px + thanh nut day
   duoi cung khong gioi han be rong -> trang bi day sang phai.
   ========================================================= */
@media (max-width: 767px) {
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* Badge so luong gio hang: khong duoc loi ra ngoai mep phai */
    .mobile-cart-count {
        right: 0 !important;
    }

    /* Thanh nut co dinh duoi cung: khoa dung be rong man hinh */
    .mobile-bottom-bar {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        left: 0 !important;
        right: auto !important;
    }

    .mobile-bottom-bar .mobile-bottom-item {
        min-width: 0 !important;
        flex: 1 1 0 !important;
    }
}

/* =========================================================
   MOBILE: logo khong duoc chiem het hang, day nut gio hang ra ngoai
   ========================================================= */
@media (max-width: 767px) {
    .logo-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .logo-row .logo {
        flex: 1 1 auto;
        min-width: 0;          /* cho phep co lai trong flex */
        overflow: hidden;
    }

    .logo-row .mobile-cart-btn {
        flex: 0 0 auto;        /* nut gio hang giu nguyen kich thuoc */
    }

    .logo-kz {
        max-width: 100%;
        gap: 9px;
    }

    .logo-kz-txt {
        min-width: 0;
        overflow: hidden;
    }

    .logo-kz-txt .l1 {
        font-size: 15px;
        letter-spacing: .2px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .logo-kz-txt .l2 {
        font-size: 9.5px;
        letter-spacing: .3px;
        margin-top: 3px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Man hinh rat hep: bo dong phu duoi logo cho gon */
@media (max-width: 400px) {
    .logo-kz-txt .l2 { display: none; }
    .logo-kz-icon { width: 40px; height: 40px; font-size: 14px; }
}

/* =========================================================
   VA LOI THEO PHAN HOI CHU SHOP
   ========================================================= */

/* 1. Menu xo xuong: muc dau tien (dang active) bi chu navy tren nen navy -> tang hinh */
.dropdown_menu li a,
.mega-menu li a,
.main-menu-area ul li ul li a {
    color: var(--kz-ink) !important;
}

.dropdown_menu li.active > a,
.mega-menu li.active > a,
.main-menu-area ul li ul li.active > a,
.dropdown_menu li a.active,
.main-menu-area nav > ul > li > ul li.active > a {
    color: var(--kz-gold) !important;
    background: rgba(200, 164, 90, .12) !important;
}

/* 2. Header: logo khong duoc de len khoi hotline */
.header-mid-area .row {
    align-items: center;
}

.header-mid-area .logo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.header-mid-area .logo {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
}

.logo-kz {
    max-width: 100%;
}

.logo-kz-txt {
    min-width: 0;
    overflow: hidden;
}

.logo-kz-txt .l1,
.logo-kz-txt .l2 {
    overflow: hidden;
    text-overflow: ellipsis;
}

.hot-line-area {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-left: 10px;
}

/* Tren man hinh vua (992-1300px) thu nho logo de du cho hotline */
@media (min-width: 992px) and (max-width: 1300px) {
    .logo-kz-icon { width: 48px; height: 48px; font-size: 16px; }
    .logo-kz-txt .l1 { font-size: 18px; }
    .logo-kz-txt .l2 { font-size: 10.5px; letter-spacing: .5px; }
}

/* 3. Dong ban quyen cuoi footer: bo khoi mau xam thua ben canh */
.footer-area .footer-bottom .copyright {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    display: block;
}

.footer-area .footer-bottom .row > div {
    background: transparent !important;
}

/* =========================================================
   THE SAN PHAM: cao bang nhau o MOI trang (danh muc + trang loc)
   Truoc day trang loc (SaleOff) the cao thap le te, khong giong trang danh muc.
   ========================================================= */
.shop-product-wrap .single-product-wrap,
.product-area .single-product-wrap,
.shop-products-wrapper .single-product-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #e6ebf1;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
    transition: box-shadow .2s, transform .2s;
}

.shop-product-wrap .single-product-wrap:hover,
.shop-products-wrapper .single-product-wrap:hover {
    box-shadow: 0 8px 20px rgba(15, 34, 55, .1);
    transform: translateY(-2px);
}

/* Khung anh vuong 1:1 (anh SP la 600x600) -> hien tron anh, khong cat, moi the van thang hang */
.shop-product-wrap .single-product-wrap .product-image,
.shop-products-wrapper .single-product-wrap .product-image {
    flex: 0 0 auto;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
}

/* The <a> boc giua phai lap day khung, neu khong max-height cua img mat tac dung */
.shop-product-wrap .single-product-wrap .product-image > a,
.shop-products-wrapper .single-product-wrap .product-image > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.shop-product-wrap .single-product-wrap .product-image img,
.shop-products-wrapper .single-product-wrap .product-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.shop-product-wrap .single-product-wrap .product_desc,
.shop-products-wrapper .single-product-wrap .product_desc {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 10px 12px 14px;
}

/* Ten SP chiem 2 dong -> gia luon thang hang */
.shop-product-wrap .product_desc_info h4,
.shop-products-wrapper .product_desc_info h4,
.shop-product-wrap .product_desc_info .product_name,
.shop-products-wrapper .product_desc_info .product_name {
    min-height: 42px;
    font-size: 14px;
    line-height: 1.35;
    margin-bottom: 6px;
}

/* Gia day xuong day the */
.shop-product-wrap .price-box,
.shop-products-wrapper .price-box {
    margin-top: auto;
    padding-top: 6px;
}

/* Hang the bang nhau chieu cao */
.shop-product-wrap .row,
.shop-products-wrapper .row {
    display: flex;
    flex-wrap: wrap;
}

.shop-product-wrap .row > [class*="col-"],
.shop-products-wrapper .row > [class*="col-"] {
    display: flex;
}

.shop-product-wrap .row > [class*="col-"] > *,
.shop-products-wrapper .row > [class*="col-"] > * {
    width: 100%;
}

/* Banner dau trang chu — anh full chieu ngang, tu co theo man hinh */
.kz-banner-top { line-height: 0; background: var(--kz-navy); border-bottom: 3px solid var(--kz-gold); }
.kz-banner-top a { display: block; }
.kz-banner-top img { width: 100%; height: auto; display: block; }

/* ---- Huy hieu so luong tren gio hang ----
   Truoc day nen #0f2237 nam trong header cung mau navy nen gan nhu tang hinh.
   Doi sang gold + chu navy + vien navy de tach khoi nen o moi trang thai. */
.shopping-cart-box a .item-cart-inner .item-cont {
    background: var(--kz-gold, #c8a45a) !important;
    color: var(--kz-navy, #0f2237) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    height: 18px !important;
    line-height: 18px !important;
    min-width: 18px;
    width: auto !important;
    padding: 0 5px;
    border-radius: 9px !important;
    left: 17px !important;
    top: 1px !important;
    box-shadow: 0 0 0 2px var(--kz-navy, #0f2237);
}

/* Ban mobile cung quy tac */
.mobile-cart-count {
    background: var(--kz-gold, #c8a45a) !important;
    color: var(--kz-navy, #0f2237) !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 2px var(--kz-navy, #0f2237);
}

/* ---- Bang chuyen "San pham khoa tuong tu" ----
   Ten SP dai ngan khac nhau -> the cao thap khac nhau -> gia moi the mot cao do.
   Ep cac the cao bang nhau va day khoi gia xuong day the. */
.product-active-3.owl-carousel .owl-stage { display: flex; }
.product-active-3.owl-carousel .owl-item { display: flex; height: auto; }
.product-active-3.owl-carousel .owl-item > .col { display: flex; width: 100%; }
.product-active-3 .single-product-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.product-active-3 .single-product-wrap .product_desc,
.product-active-3 .single-product-wrap .product_desc_info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
/* Khoi gia luon nam sat day -> gia thang hang giua cac the */
.product-active-3 .single-product-wrap .price-box {
    margin-top: auto;
    padding-top: 8px;
}
/* Khung anh vuong 1:1 cho moi bang chuyen SP (anh goc 600x600).
   Truoc day khung chi co height:210px nen khong vuong -> anh 600x600 tran ngang
   roi bi overflow:hidden xen mat hai ben. */
.product-active-2 .single-product-wrap .product-image,
.product-active-3 .single-product-wrap .product-image,
.product-active-4 .single-product-wrap .product-image {
    aspect-ratio: 1 / 1;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
}

/* The <a> boc giua phai lap day khung, neu khong max-height cua img mat tac dung */
.product-active-2 .single-product-wrap .product-image > a,
.product-active-3 .single-product-wrap .product-image > a,
.product-active-4 .single-product-wrap .product-image > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.product-active-2 .single-product-wrap .product-image img,
.product-active-3 .single-product-wrap .product-image img,
.product-active-4 .single-product-wrap .product-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ---- Dai "DOI TAC" o trang chu — the logo anh tren nen trang ---- */
.dt-brand-wrap {
    text-align: center;
    margin-top: 40px;
    padding: 34px 0 40px;
    border-top: 1px solid #eee;
}

.dt-brand-title {
    margin: 0 0 22px;
    font-size: 0;
    line-height: 0;
}

.dt-brand-title span {
    display: inline-block;
    padding: 9px 26px;
    border-radius: 4px;
    background: var(--kz-navy, #0f2237);
    color: var(--kz-gold, #c8a45a);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .08em;
}

.dt-brand-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    max-width: 1180px;
    margin: 0 auto;
}

.dt-brand-item.dt-has-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 172px;
    height: 88px;
    padding: 12px 18px;
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(15, 34, 55, .06);
}

.dt-brand-item.dt-has-logo img {
    max-width: 132px;
    max-height: 50px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.dt-brand-item.dt-has-logo:hover {
    background: #fff;
    border-color: var(--kz-gold, #c8a45a);
    box-shadow: 0 4px 12px rgba(15, 34, 55, .12);
    transform: translateY(-2px);
}

@media (max-width: 640px) {
    .dt-brand-list { gap: 10px; }
    .dt-brand-item.dt-has-logo {
        width: calc(50% - 5px);
        height: 74px;
        padding: 10px 14px;
    }
}

.dt-brand-item {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid #e2e6ec;
    border-radius: 3px;
    background: #f5f6f8;
    color: var(--kz-navy, #0f2237);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.dt-brand-item:hover {
    background: var(--kz-navy, #0f2237);
    color: var(--kz-gold, #c8a45a);
    border-color: var(--kz-navy, #0f2237);
    text-decoration: none;
}

/* ---- Dong "Mien phi lap dat tai nha" tren the san pham ----
   .van-chuyen la inline-flex nen khong an theo text-align cua the cha,
   bi lech trai trong khi cac dong con lai deu can giua. */
.van-chuyen {
    display: flex !important;
    justify-content: center;
    text-align: center;
}


/* =========================================================
   TRANG CHI TIET SP — restyle 2026-09-04 (lam khac khoacua99)
   Scope theo class .single-product-page tren wrapper, khong dung trang khac
   ========================================================= */

/* Nen xam nhat, khu dau trang (anh + thong tin + cot cam ket) thanh the trang bo goc */
.single-product-page .content-wraper { background: #f4f6f9; }

.single-product-page .single-product-area {
    background: #fff;
    border: 1px solid #e6ebf1;
    border-radius: 16px;
    padding: 22px 10px;
    margin-top: 16px;
    box-shadow: 0 6px 24px rgba(15, 34, 55, .06);
}

/* Tab "Mo ta / Khuyen mai / Danh gia" -> pill dong bo voi dai thuong hieu */
.single-product-page .discription-tab-menu ul.nav { border-bottom: none; gap: 8px; }

.single-product-page .discription-tab-menu ul.nav li a {
    border-radius: 999px !important;
    border: 1px solid #d9e0e8 !important;
    background: #fff !important;
    color: #0f2237 !important;
    font-weight: 700;
    padding: 8px 18px !important;
}

.single-product-page .discription-tab-menu ul.nav li a.active,
.single-product-page .discription-tab-menu ul.nav li.active a {
    background: #0f2237 !important;
    color: #dbb96e !important;
    border-color: #0f2237 !important;
}

/* Muc luc inline (Gia / Thong so / Tinh nang...) -> chip nho */
.single-product-page .product-toc-inline a {
    display: inline-flex;
    align-items: center;
    background: #f2f5f8;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 5px 12px;
    margin: 3px 2px;
    color: #1b3a5c !important;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none !important;
}

.single-product-page .product-toc-inline a:hover { border-color: #c8a45a; color: #9a7328 !important; }

/* Heading trong bai mo ta: bo kieu gach trai navy cua KC99 -> gach chan gold ngan */
.single-product-page .description-content h2 {
    font-size: 20px;
    font-weight: 800;
    color: #0f2237;
    padding-bottom: 8px;
    position: relative;
}

.single-product-page .description-content h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 3px;
    background: #c8a45a;
    border-radius: 2px;
}

/* Bang thong so: o nhan navy nhat + vien phai gold, dong chan zebra */
.single-product-page .table-bordered td { border-color: #e6ebf1 !important; padding: 9px 12px; }

.single-product-page .table-bordered td.thuoc-tinh-ruou {
    background: #f2f5f8;
    color: #0f2237;
    font-weight: 700;
    border-right: 2px solid #c8a45a !important;
}

.single-product-page .table-bordered tbody tr:nth-child(even) td:not(.thuoc-tinh-ruou) { background: #fafbfd; }

/* FAQ -> card bo tron, mo thi vien gold */
.single-product-page .faq-section details,
.single-product-page .faq-item {
    background: #fff;
    border: 1px solid #e6ebf1;
    border-radius: 10px;
    margin-bottom: 8px;
}

.single-product-page .faq-section details[open],
.single-product-page .faq-item[open] { border-color: #c8a45a; }