/* =====================================================================================================
   KINGLUX - kl2/product.css : trang Product + Search cua mau V4 (mockup v2 ban 5 : DanhMuc, SanPham, DienThoai-SanPham, MaiTuVan)
     kl2-cat-* : trang danh sach (nhom, khong gian, tim kiem, trang goc san pham)
     kl2-pd-*  : trang chi tiet san pham (khung cu .az-kl-pd cua style.css muc 12 van giu - o day chi them / chinh, khong viet lai)
   Nap SAU kl2.css (bien mau :root, lop dung chung kl2-card / kl2-ladder / kl2-qty ...). Cham >= 44px tren dien thoai.
   ===================================================================================================== */

/* ================================================================== TRANG DANH SACH */
.kl2-cat { padding: 22px 0 56px; }
.kl2-cat-in { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.kl2-cat-col { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 20px; }
.kl2-cat-aside { flex: 1 1 240px; max-width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.kl2-cat-main { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.kl2-cat-full { flex-basis: 100%; }

/* cot trai : nhom, khong gian, bo loc */
.kl2-cat-toggle { display: none; }
.kl2-cat-panel { display: flex; flex-direction: column; gap: 22px; }
.kl2-cat-nav { display: flex; flex-direction: column; gap: 2px; }
.kl2-cat-navh { font-family: var(--kl-font-h); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kl-gold); margin-bottom: 6px; }
.kl2-cat .kl2-cat-link { display: block; padding: 9px 0 9px 12px; border-left: 3px solid transparent; font-size: 16px; font-weight: 600; line-height: 1.3;
    color: var(--kl-gold) !important; text-decoration: none; }
.kl2-cat .kl2-cat-link:hover { color: var(--kl-gold2) !important; }
.kl2-cat .kl2-cat-link.kl2-on { color: #FFFFFF !important; font-weight: 800; border-left-color: var(--kl-gold); }
.kl2-cat .kl2-cat-sublink { padding-left: 26px; font-size: 14.5px; }
.kl2-cat-facets { background: var(--kl-panel); border: 1px solid var(--kl-line2); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; }
.kl2-cat-facets:empty { display: none; }
.kl2-cat-fs { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.kl2-cat-fs legend { float: none; width: auto; margin: 0 0 8px; padding: 0; font-size: 12.5px; font-weight: 800; letter-spacing: 0.12em; line-height: 1.3; color: var(--kl-gold); }
.kl2-cat-fv { display: flex; flex-wrap: wrap; gap: 6px; }
.kl2-cat-fbtn { min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--kl-line2); background: var(--kl-bg2); color: var(--kl-text); font-weight: 700; font-size: 14px; cursor: pointer; }
.kl2-cat-fbtn:hover { border-color: var(--kl-gold); }
.kl2-cat-fbtn[aria-pressed="true"] { border: 1.5px solid var(--kl-gold); background: rgba(236, 174, 32, 0.10); color: var(--kl-gold); }

/* dau cot phai */
.kl2-cat-crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--kl-muted); }
.kl2-cat .kl2-cat-crumb a { color: var(--kl-muted) !important; text-decoration: none; }
.kl2-cat .kl2-cat-crumb a:hover { color: var(--kl-gold2) !important; }
.kl2-cat-crumb [aria-current] { color: var(--kl-text); }
.kl2-cat-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 20px; }
.kl2-cat-tt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kl2-cat-h1 { margin: 0; font-family: var(--kl-font-h); font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; color: #FFFFFF; text-wrap: balance; }
.kl2-cat-h2 { margin: 18px 0 0; font-family: var(--kl-font-h); font-size: 20px; font-weight: 800; text-transform: uppercase; color: #FFFFFF; }
.kl2-cat .kl2-cat-sub { font-size: 14px; color: var(--kl-muted); }
.kl2-cat-sort select { height: 44px; border: 1px solid var(--kl-line2); border-radius: 12px; background: var(--kl-panel); color: var(--kl-text); padding: 0 12px;
    font-size: 14px; font-weight: 700; color-scheme: dark; cursor: pointer; max-width: 100%; }
.kl2-cat-sort select:focus-visible { outline: 2px solid var(--kl-gold2); outline-offset: 2px; }

/* loc nhanh (nhom / khong gian) */
.kl2-cat-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.kl2-cat-chips:empty { display: none; }
.kl2-cat-chips .kl2-chip { flex: none; min-height: 40px; height: auto; }
.kl2-cat-chips .kl2-chip[aria-pressed="true"] { border-color: var(--kl-gold); background: var(--kl-gold-bg); color: var(--kl-gold) !important; }
.kl2-cat-chips .kl2-chip small { font-size: 11.5px; font-weight: 800; color: var(--kl-faint); }
.kl2-cat-chipsep { flex: none; width: 1px; align-self: stretch; background: var(--kl-line2); margin: 4px 4px; }

/* luoi the */
.kl2-cat-grid { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.kl2-cat-card .kl2-card-img { background: #FFFFFF; }
.kl2-cat-card.kl2-on { border-color: var(--kl-gold); }
.kl2-cat-noimg { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #8C8C8C; }
.kl2-cat-card .kl2-card-code { font-size: 11.5px; letter-spacing: 0.05em; color: var(--kl-gold); }
.kl2-cat-cname { margin: 0; font-size: inherit; line-height: inherit; font-weight: inherit; }
.kl2-cat-card .kl2-card-name { font-size: 14.5px; }
.kl2-cat-card .kl2-price-row { margin-top: 2px; }
.kl2-cat-card .kl2-price { font-size: 20px; }
.kl2-cat-from, .kl2-cat-plabel { font-size: 12.5px; font-weight: 800; color: var(--kl-muted); }
.kl2-cat-card .kl2-member:empty { display: none; }
/* ban 003 : the hep (Tim kiem 3 cot) - nhan «Mai tu van:» khong tach cot rieng (ban 001 flex lam chu nhan xuong dong tung tu) */
.kl2-cat-card .kl2-mai-line { display: block; position: relative; padding-left: 29px; line-height: 1.35; }
.kl2-cat-card .kl2-mai-line::before { content: ""; position: absolute; left: 9px; top: 8px; width: 14px; height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ECAE20'%3E%3Cpath d='M10 2.5l1.6 4.9a3 3 0 0 0 1.9 1.9L18.5 11l-5 1.7a3 3 0 0 0-1.9 1.9L10 19.5l-1.6-4.9a3 3 0 0 0-1.9-1.9L1.5 11l5-1.7a3 3 0 0 0 1.9-1.9z'/%3E%3Cpath d='M19 1.5l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z'/%3E%3Cpath d='M19.5 16l.5 1.4 1.4.5-1.4.5-.5 1.4-.5-1.4-1.4-.5 1.4-.5z'/%3E%3C/svg%3E") no-repeat center / contain; }
.kl2-cat-card .kl2-mai-line:hover { border-color: var(--kl-gold-dim); }
.kl2-cat-incart { font-size: 12.5px; font-weight: 800; color: var(--kl-gold2); }
.kl2-cat-card .kl2-card-buy { flex-wrap: wrap; padding-top: 10px; }
.kl2-cat-card .kl2-qty { height: 44px; border-radius: 12px; flex: none; }
.kl2-cat-card .kl2-qty button { width: 44px; font-size: 20px; line-height: 1; }
.kl2-cat-card .kl2-qty button:hover { background: var(--kl-gold-bg); }
.kl2-cat-card .kl2-qty input { width: 44px; font-size: 16px; }
.kl2-cat-card .kl2-card-buy .kl2-btn { min-height: 44px; flex: 1 1 96px; }
.kl2-cat-card .kl2-btn.kl2-busy { opacity: 0.6; pointer-events: none; }

/* trong / phan trang / mo ta */
.kl2-cat-empty { background: var(--kl-panel); border: 1px solid var(--kl-line2); border-radius: 16px; padding: 22px; font-size: 15px; color: var(--kl-soft);
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.kl2-cat-empty b { color: #FFFFFF; }
.kl2-cat-empty-act { display: flex; flex-wrap: wrap; gap: 8px; }
.kl2-cat-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }
.kl2-cat .kl2-cat-pg { min-width: 44px; height: 44px; padding: 0 10px; box-sizing: border-box; border-radius: 12px; border: 1px solid var(--kl-line2); background: var(--kl-panel);
    color: var(--kl-text) !important; font-weight: 800; display: inline-grid; place-items: center; text-decoration: none; }
.kl2-cat a.kl2-cat-pg:hover { border-color: var(--kl-gold); color: var(--kl-gold) !important; }
.kl2-cat .kl2-cat-pg.kl2-on { border-color: var(--kl-gold); background: var(--kl-gold-bg); color: var(--kl-gold) !important; }
.kl2-cat .kl2-cat-gap { border-color: transparent; background: transparent; }
.kl2-cat-desc { background: var(--kl-panel); border: 1px solid var(--kl-line2); border-radius: 16px; padding: 24px 26px; color: var(--kl-soft); font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.kl2-cat-desc img, .kl2-cat-desc iframe { max-width: 100%; height: auto; border-radius: 12px; }
/* style.css cu to nen #000 cho chu trong .az-kl-description-group -> trong khung moi (nen #121212) de trong suot */
.kl2-cat-desc span, .kl2-cat-desc strong, .kl2-cat-desc p, .kl2-cat-desc h1, .kl2-cat-desc h2, .kl2-cat-desc h3, .kl2-cat-desc h4, .kl2-cat-desc h5, .kl2-cat-desc a { background-color: transparent; }
.kl2-cat-desc table { max-width: 100%; }

/* so sanh nhanh (nhom cap 2 - bang DataTable cua app.js) */
.kl2-cat-compare { background: var(--kl-panel); border: 1px solid var(--kl-line2); border-radius: 16px; }
.kl2-cat-compare > summary { min-height: 48px; padding: 0 18px; display: flex; align-items: center; cursor: pointer; font-weight: 800; color: var(--kl-gold); list-style: none; }
.kl2-cat-compare > summary::-webkit-details-marker { display: none; }
.kl2-cat-compare > summary::after { content: "+"; margin-left: auto; font-size: 20px; }
.kl2-cat-compare[open] > summary::after { content: "\2212"; }
.kl2-cat-compare-in { padding: 0 18px 18px; overflow-x: auto; }

/* thanh tong dinh day */
.kl2-cat-bar { position: sticky; bottom: 12px; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; background: var(--kl-panel);
    border: 1px solid var(--kl-gold); border-radius: 16px; padding: 12px 16px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6); }
.kl2-cat-bar-sum { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.kl2-cat .kl2-cat-bar-sum span { font-size: 13px; color: var(--kl-muted); }
.kl2-cat-bar-sum strong { font-size: 22px; font-weight: 900; color: var(--kl-gold); }
.kl2-cat .kl2-cat-bar-lum { font-size: 13.5px; font-weight: 800; color: var(--kl-gold); display: inline-flex; align-items: center; gap: 6px; }
.kl2-cat-bar .kl2-btn { margin-left: auto; }

/* the nhom / khong gian (trang goc, nhom DUAN) */
.kl2-cat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 18px; }
.kl2-cat .kl2-cat-tile { display: flex; flex-direction: column; gap: 8px; background: var(--kl-panel); border: 1px solid var(--kl-line2); border-radius: var(--kl-r-lg);
    overflow: hidden; padding-bottom: 14px; color: var(--kl-text) !important; text-decoration: none; }
.kl2-cat .kl2-cat-tile:hover { border-color: var(--kl-gold); }
.kl2-cat-tile-img { display: block; aspect-ratio: 4 / 3; background: #0E0E0E; }
.kl2-cat-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kl2-cat .kl2-cat-tile-name { padding: 0 14px; font-family: var(--kl-font-h); font-size: 15px; font-weight: 800; text-transform: uppercase; color: #FFFFFF; line-height: 1.3; }
.kl2-cat .kl2-cat-tile-sum { padding: 0 14px; font-size: 13px; color: var(--kl-muted); line-height: 1.45; }
.kl2-cat-tiles-kind .kl2-cat-tile-img { aspect-ratio: 16 / 9; }
.kl2-cat-tile-ph { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #2A2108, #0B0B0B 70%); }
.kl2-cat-tile-ph .kl2-lumen { width: 40px; height: 40px; }

@media (max-width: 959.98px) {
    .kl2-cat-in { gap: 16px; }
    .kl2-cat-aside { flex-basis: 100%; }
    .kl2-cat-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 16px; border-radius: 12px;
        border: 1px solid var(--kl-line2); background: var(--kl-panel); color: var(--kl-gold); font-weight: 800; font-size: 14.5px; cursor: pointer; }
    .kl2-cat-toggle::after { content: "+"; font-size: 20px; }
    .kl2-cat-toggle[aria-expanded="true"]::after { content: "\2212"; }
    .kl2-cat-panel { display: none; }
    .kl2-cat-panel.kl2-open { display: flex; }
    .kl2-cat .kl2-cat-link { padding-top: 12px; padding-bottom: 12px; }
}
@media (max-width: 640px) {
    .kl2-cat { padding-top: 14px; }
    .kl2-cat-grid { grid-template-columns: minmax(0, 1fr); }
    .kl2-cat-bar { bottom: 8px; padding: 10px 12px; gap: 8px 14px; }
    .kl2-cat-bar-sum strong { font-size: 19px; }
    .kl2-cat-bar .kl2-btn { flex: 1 1 100%; margin-left: 0; }
    .kl2-cat-desc { padding: 18px 16px; }
}
@media (pointer: coarse) {
    .kl2-cat-fbtn, .kl2-cat-chips .kl2-chip { min-height: 44px; }
}

/* ================================================================== TRANG CHI TIET */
.az-kl-pd.kl2-pd { background: #000000; }
.az-kl-pd.kl2-pd > nav, .az-kl-pd.kl2-pd > .az-kl-pd-hero, .az-kl-pd.kl2-pd > section:not(.az-kl-pd-quote) { max-width: var(--kl-max); padding-left: var(--kl-pad); padding-right: var(--kl-pad); }
.az-kl-pd.kl2-pd .az-kl-pd-info { gap: 18px; }
/* style.css muc 12 dat ".az-kl-pd button { font: inherit }" (do uu tien cao hon .kl2-btn) -> tra lai chu cua nut kl2 trong trang chi tiet */
.az-kl-pd .kl2-btn { font-family: var(--kl-font); font-weight: 900; font-size: 14.5px; line-height: 1.2; letter-spacing: 0.02em; }
.az-kl-pd .kl2-btn-sm { font-size: 13.5px; }
.az-kl-pd .kl2-pd-tag > span:not(.kl2-lumen) { font: inherit; }

/* % giam tren anh */
.kl2-pd-off { position: absolute; left: 16px; bottom: 16px; z-index: 3; padding: 5px 11px; border-radius: 999px; background: var(--kl-hot); color: var(--kl-ink);
    font-size: 12.5px; font-weight: 900; line-height: 1.3; pointer-events: none; }

/* khoi «Mai tu van mau nay» */
.kl2-pd-mai { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--kl-gold-dim); background: var(--kl-gold-bg); scroll-margin-top: 90px; }
.kl2-pd-mai-top { display: flex; align-items: center; gap: 12px; }
.kl2-pd-mai-ava { width: 46px; height: 46px; flex: none; box-sizing: border-box; border-radius: 50%; object-fit: cover; object-position: center top; background: #1E293B; border: 2px solid var(--kl-gold); }
.kl2-pd-mai-tt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.az-kl-pd .kl2-pd-mai-h { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kl-gold); line-height: 1.3; }
.kl2-pd-mai-h svg, .kl2-pd-mai-act svg { width: 14px; height: 14px; flex: none; fill: currentColor; }
.az-kl-pd .kl2-pd-mai-sub { font-size: 14px; color: var(--kl-text); }
.kl2-pd-mai-form { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 10px; }
.az-kl-pd .kl2-pd-mai-f { margin: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--kl-muted); min-width: 0; }
.az-kl-pd .kl2-pd-mai-in { display: flex; align-items: center; height: 46px; box-sizing: border-box; border: 1px solid var(--kl-gold); border-radius: 12px; background: var(--kl-bg2); overflow: hidden; }
.kl2-pd-mai-in input { flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; border: 0; background: transparent; color: #FFFFFF; text-align: center; font-weight: 900; font-size: 17px; outline: none; }
.az-kl-pd .kl2-pd-mai-in b { padding: 0 12px 0 2px; font-size: 14px; font-weight: 700; color: var(--kl-soft); }
.kl2-pd-mai-f select { width: 100%; height: 46px; box-sizing: border-box; border: 1px solid #2A2A2A; border-radius: 12px; background: var(--kl-bg2); color: var(--kl-text);
    padding: 0 10px; font-size: 14.5px; font-weight: 700; color-scheme: dark; cursor: pointer; }
.kl2-pd-mai-f select:focus-visible, .az-kl-pd .kl2-pd-mai-in:focus-within { outline: 2px solid var(--kl-gold2); outline-offset: 2px; }
.kl2-pd-mai-out { display: flex; flex-direction: column; gap: 8px; }
.kl2-pd-mai-out:empty { display: none; }
.kl2-pd-mai-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; background: var(--kl-bg2); border: 1px solid #3A2E0F; border-radius: 14px; padding: 12px 14px; }
.kl2-pd-mai-res { display: flex; align-items: baseline; gap: 8px; }
.kl2-pd-mai-res strong { font-family: var(--kl-font-h); font-size: 38px; font-weight: 800; line-height: 1; color: var(--kl-gold); }
.az-kl-pd .kl2-pd-mai-res span { font-size: 15px; font-weight: 800; color: #FFFFFF; }
.az-kl-pd .kl2-pd-mai-lay { flex: 1 1 200px; min-width: 0; font-size: 13.5px; color: var(--kl-soft); }
.az-kl-pd .kl2-pd-mai-fx { font-size: 13px; color: var(--kl-muted); font-variant-numeric: tabular-nums; }
.az-kl-pd ul.kl2-pd-mai-notes { margin: 0 !important; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--kl-faint); }
.az-kl-pd ul.kl2-pd-mai-notes li { list-style: disc; }
.az-kl-pd .kl2-pd-mai-big, .az-kl-pd .kl2-pd-mai-miss { font-size: 13.5px; color: var(--kl-text); background: #2A140B; border: 1px solid #5A2A14; border-radius: 12px; padding: 10px 12px; }
.az-kl-pd .kl2-pd-mai-miss { background: var(--kl-bg2); border-color: #3A2E0F; }
.kl2-pd-mai-act { display: flex; flex-wrap: wrap; gap: 8px; }
.kl2-pd-mai-act .kl2-btn { min-height: 44px; }
/* phan ve tu route /Guest/MaiAdvice (kl2/product.js) : lop moi tien to kl2-mai- (kl2-mai-line cua the danh sach la lop khac, o kl2.css) */
.kl2-mai-room:disabled { opacity: 0.6; cursor: progress; }
.kl2-pd-mai.kl2-mai-busy .kl2-pd-mai-out, .kl2-pd-mai.kl2-mai-busy .kl2-mai-more { opacity: 0.55; transition: opacity 0.15s; }
.az-kl-pd .kl2-mai-wait { font-size: 13.5px; color: var(--kl-muted); }
.az-kl-pd .kl2-mai-est { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--kl-hot); color: var(--kl-hot); font-size: 12px; font-weight: 800;
    line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; }
.kl2-mai-money { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.az-kl-pd .kl2-mai-money-k { font-size: 14px; color: var(--kl-soft); font-variant-numeric: tabular-nums; }
.kl2-mai-money b { font-size: 18px; font-weight: 900; color: var(--kl-gold); font-variant-numeric: tabular-nums; }
.kl2-mai-money small { flex-basis: 100%; font-size: 12.5px; color: var(--kl-faint); }
.az-kl-pd .kl2-mai-viewer { font-size: 12.5px; color: var(--kl-faint); }
.kl2-mai-more { display: flex; flex-direction: column; gap: 8px; }
.kl2-mai-sec { border: 1px solid var(--kl-line2); border-radius: 12px; background: var(--kl-bg2); }
.kl2-mai-sec > summary { min-height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
    font-size: 12.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kl-gold); }
.kl2-mai-sec > summary::-webkit-details-marker { display: none; }
.kl2-mai-sec > summary::after { content: "+"; margin-left: auto; font-size: 18px; font-weight: 700; letter-spacing: 0; }
.kl2-mai-sec[open] > summary::after { content: "\2212"; }
.kl2-mai-sec > summary:hover { color: var(--kl-gold2); }
.kl2-mai-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; line-height: 1.6; color: var(--kl-soft); overflow-wrap: anywhere; }
.az-kl-pd ul.kl2-mai-std { margin: 0 !important; padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.kl2-mai-std li { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--kl-line); }
.kl2-mai-std li:first-child { padding-top: 0; border-top: 0; }
.kl2-mai-std-code { font-size: 13.5px; font-weight: 800; color: #FFFFFF; }
.az-kl-pd .kl2-mai-std-what { font-size: 13px; line-height: 1.5; color: var(--kl-muted); }
.az-kl-pd .kl2-mai-std-here { font-size: 13px; line-height: 1.5; font-weight: 700; color: var(--kl-gold2); }
.az-kl-pd .kl2-mai-share-note { font-size: 13px; color: var(--kl-muted); }
.az-kl-pd pre.kl2-mai-share { margin: 0; padding: 12px; border-radius: 10px; border: 1px dashed #3A2E0F; background: var(--kl-panel); color: var(--kl-text);
    font: inherit; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.az-kl-pd .kl2-mai-copy { align-self: flex-start; min-height: 44px; }
.kl2-mai-asks { display: flex; flex-direction: column; gap: 8px; }
.az-kl-pd .kl2-mai-asks-h { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kl-muted); }
.kl2-mai-qs { display: flex; flex-wrap: wrap; gap: 8px; }
/* style.css muc 12 «.az-kl-pd button { font: inherit }» de len chu cua .kl2-chip -> tra lai */
.az-kl-pd .kl2-mai-qs .kl2-chip { height: auto; min-height: 44px; padding: 8px 14px; white-space: normal; text-align: left;
    font-family: var(--kl-font); font-size: 13.5px; font-weight: 700; line-height: 1.35; }

/* khung gia Luxer */
.kl2-pd-pricebox { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 14px; background: var(--kl-bg2); border: 1px solid #2A2A2A; }
.kl2-pd-pricebox.kl2-pd-is-member { border-color: var(--kl-gold); }
.az-kl-pd .kl2-pd-pricebox .az-kl-pd-price { padding: 0; border: 0; border-radius: 0; background: transparent; }
.az-kl-pd .kl2-pd-pricebox .az-kl-pd-price-v { font-size: 32px; font-weight: 900; line-height: 1.15; }
.kl2-pd-pricebox .az-kl-pd-price-nums { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.az-kl-pd .kl2-pd-pricebox .az-kl-pd-price-old { font-size: 13.5px; color: var(--kl-faint); }
.kl2-pd-member { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; border-top: 1px solid #1F1F1F; padding-top: 12px; }
.az-kl-pd .kl2-pd-member .kl2-member { font-size: 14.5px; color: var(--kl-text); font-weight: 700; }
.kl2-pd-member .kl2-member b { font-size: 18px; font-weight: 900; }
.kl2-pd-member .kl2-member:empty { display: none; }
.az-kl-pd .kl2-pd-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 800; line-height: 1.3; }
.az-kl-pd .kl2-pd-tag-save { background: #2A140B; color: #FF8A5F; }
.az-kl-pd .kl2-pd-tag-lum { background: #2A2108; color: var(--kl-gold2); padding-left: 6px; }
.kl2-pd-tag .kl2-lumen { width: 16px; height: 16px; }
.kl2-pd-join { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; border-top: 1px solid #1F1F1F; padding-top: 12px; }
.az-kl-pd .kl2-pd-join > span { flex: 1 1 220px; font-size: 14px; color: var(--kl-text); }
.kl2-pd-join .kl2-btn { min-height: 44px; }

/* thang gia 7 cap */
.kl2-pd-ladderbox { display: flex; flex-direction: column; gap: 8px; }
.az-kl-pd .kl2-pd-h { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kl-text); }
.az-kl-pd .kl2-pd-h small { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; color: var(--kl-faint); }
.kl2-pd-ladderbox .kl2-ladder-step b { font-size: 12.5px; }
.kl2-pd-pct { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--kl-hot); line-height: 1.2; }
.az-kl-pd .kl2-pd-next { font-size: 13.5px; color: var(--kl-muted) !important; text-decoration: none; }
.az-kl-pd .kl2-pd-next b { color: var(--kl-gold); font-weight: 800; }
.az-kl-pd .kl2-pd-next:hover b { color: var(--kl-gold2); }

/* khoi mua : nut tron − / + nhu mockup ; dong tong */
.az-kl-pd.kl2-pd .az-kl-buy-qty { border: 0; border-radius: 0; gap: 8px; overflow: visible; align-items: center; }
.az-kl-pd.kl2-pd .az-kl-buy-step { width: 52px; height: 52px; flex: none; border-radius: 50%; border: 1px solid #3A3A3A; background: #1A1A1A; color: var(--kl-text); font-size: 24px; line-height: 1; }
.az-kl-pd.kl2-pd .az-kl-buy-step[data-step="1"] { border-color: var(--kl-gold); background: var(--kl-gold-bg); color: var(--kl-gold); font-weight: 800; }
.az-kl-pd.kl2-pd .az-kl-buy-step:hover { border-color: var(--kl-gold); }
.az-kl-pd.kl2-pd .az-kl-buy-input { width: 68px; height: 52px; border: 1px solid #2A2A2A; border-radius: 12px; background: var(--kl-bg2); font-size: 18px; font-weight: 800; }
.az-kl-pd .kl2-pd-line { font-size: 14px; color: var(--kl-muted); margin-top: -6px; }
.az-kl-pd .kl2-pd-line b { color: #FFFFFF; }
.az-kl-pd .kl2-pd-line b.kl2-gold { color: var(--kl-gold); }

/* thong so dang bang gon */
.az-kl-pd.kl2-pd .az-kl-pd-spechead { border-top: 1px solid #2A2A2A; padding-top: 16px; margin-bottom: -10px; }
.az-kl-pd.kl2-pd .az-kl-pd-spec-row { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); border-bottom-color: #1F1F1F; }
.az-kl-pd.kl2-pd .az-kl-pd-spec dt, .az-kl-pd.kl2-pd .az-kl-pd-spec dd { padding: 8px 0; font-size: 14.5px; }
.az-kl-pd.kl2-pd .az-kl-pd-spec dd { color: #FFFFFF; font-weight: 700; }

@media (max-width: 767.98px) {
    /* dien thoai (mockup DienThoai-SanPham) : gia truoc bien the ; thang cap, khoi mua, thong so sau - ban 006 : dung THU TU MA TRANG
       (Product.cshtml : tieu de -> gia -> bien the -> mua -> Mai -> ghi chu ; thang cap + thong so o dai rieng duoi) - bo cac luat order */
    .kl2-pd-off { left: 12px; bottom: 12px; font-size: 12px; padding: 4px 10px; }
    .kl2-pd-mai-form { grid-template-columns: minmax(0, 1fr); }
    .kl2-pd-mai-res strong { font-size: 32px; }
    .az-kl-pd .kl2-pd-pricebox .az-kl-pd-price-v { font-size: 26px; }
    .kl2-pd-pricebox { padding: 12px 14px; }
    .az-kl-pd.kl2-pd .az-kl-pd-spec-row { grid-template-columns: minmax(0, 120px) minmax(0, 1fr); }
    /* co thanh mua dinh day (js/cart.js) : style.css cu an ca khoi mua -> giu o SO LUONG (thanh day dung chung o nay), an hai nut trung voi thanh day */
    body.az-kl-has-sticky .az-kl-pd.kl2-pd .az-kl-buy:not(.az-hide) { display: flex; }
    body.az-kl-has-sticky .az-kl-pd.kl2-pd .az-kl-buy .az-kl-buy-add, body.az-kl-has-sticky .az-kl-pd.kl2-pd .az-kl-buy .az-kl-buy-now { display: none; }
    .az-kl-pd.kl2-pd .az-kl-buy-step { width: 48px; height: 48px; }
    .az-kl-pd.kl2-pd .az-kl-buy-input { height: 48px; }
}
.kl2-cat .kl2-cat-clearf { align-self: flex-start; display: inline-flex; align-items: center; min-height: 32px; font-size: 13.5px; }
@media (pointer: coarse) { .kl2-cat .kl2-cat-clearf { min-height: 44px; } }
/* ban 003 : gia Luxer cua nguoi xem trong khoi Mai (spGuestMaiAdvice 2.0 - Viewer.Luxer, Price.WebText) */
.kl2-mai-lux { display: block; margin-top: 6px; font-size: 13px; font-weight: 800; color: var(--kl-gold); }
.kl2-mai-lux span { font-weight: 700; color: var(--kl-muted); }
.kl2-mai-lux s { color: var(--kl-faint); }

/* ======================================================================================= ban 006 (anh 29/10/2026 12:49) */
/* --- luoi the nhom / khong gian / tim kiem tu 2 cot (> 640px) : ma 1 dong, ten 2 dong co dinh (kl2.css), thong so 1 dong o dau ;
   gia + gia thanh vien + Mai co dinh 2 dong + nut neo DAY the ; the khong ma / khong dong gia thanh vien giu cho ; «Trong giỏ: N»
   noi tren anh ; o so luong + «Đặt hàng» khong xuong dong -> moi the cung hang thang nhau. --- */
@media (min-width: 641px) {
    .kl2-cat-card { position: relative; }
    .kl2-cat-card .kl2-card-code, .kl2-cat-card .kl2-card-spec { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .kl2-cat-card .kl2-card-body > .kl2-cat-cname:first-child { margin-top: 23px; }
    .kl2-cat-card .kl2-price-row { margin-top: auto; flex-wrap: nowrap; overflow: hidden; }
    .kl2-cat-card .kl2-member, .kl2-cat-card .kl2-member:empty { display: flex; min-height: 22px; }
    .kl2-cat-card .kl2-price-row + .kl2-mai-line { margin-top: 28px; }
    .kl2-cat-card .kl2-mai-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        min-height: calc(2.7em + 14px); box-sizing: border-box; }
    .kl2-cat-card .kl2-card-buy { margin-top: 0; flex-wrap: nowrap; }
    .kl2-cat-card .kl2-card-buy .kl2-btn { flex: 1 1 auto; min-width: 0; }
    .kl2-cat-card .kl2-cat-incart { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 3px 10px; border-radius: 999px;
        background: rgba(0, 0, 0, 0.82); line-height: 1.4; }
}
/* --- o nhom / khong gian (trang Sản phẩm, nhom DUAN) tu 2 cot : ten co dinh 2 dong, tom tat toi da 4 dong --- */
@media (min-width: 561px) {
    .kl2-cat .kl2-cat-tile-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
    .kl2-cat .kl2-cat-tile-sum { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
}

/* --- trang chi tiet : hai cot can doi (do 29/10 1.706px : cot phai 1.679–2.801px, anh 682–832px -> nay 759–1.201px).
   Cot phai : tieu de -> gia -> bien the -> mua -> Mai (thu gon) -> ghi chu ; thang gia cap Luxer + thong so : dai rieng duoi hai cot.
   May tinh : luoi 53 / 47, khung anh DINH khi cuon - top = min(dau trang + 16px, man hinh - cao khung anh - 16px)
   (kl2/product.js PdStick -> --kl2-pd-stick ; khung anh cao hon man hinh thi dinh theo mep duoi). --- */
@media (min-width: 992px) {
    .az-kl-pd.kl2-pd .az-kl-pd-hero { display: grid; grid-template-columns: minmax(0, 53fr) minmax(0, 47fr); gap: 28px; align-items: start; }
    .az-kl-pd.kl2-pd .az-kl-pd-media { position: sticky; top: var(--kl2-pd-stick, 128px); }
}
.az-kl-pd.kl2-pd .az-kl-pd-info { gap: 16px; }
/* khoi Mai thu gon : dau khoi (anh + tieu de + so den Mai tinh) + nut «Tính số đèn» ; bam dau khoi / nut / lien ket #mai moi mo than */
.kl2-pd-mai-top { cursor: pointer; }
.kl2-pd-mai-tt { flex: 1 1 auto; }
.az-kl-pd .kl2-pd-mai-sub b { color: var(--kl-gold2); font-weight: 900; }
.az-kl-pd .kl2-pd-mai-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px;
    border-radius: 999px; border: 1px solid var(--kl-gold); background: transparent; color: var(--kl-gold); font-family: var(--kl-font); font-size: 13.5px;
    font-weight: 900; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.az-kl-pd .kl2-pd-mai-toggle:hover { background: var(--kl-gold-bg); color: var(--kl-gold2); }
.az-kl-pd .kl2-pd-mai-toggle span { font: inherit; }
.kl2-pd-mai-toggle::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg); transition: transform 0.15s; }
.kl2-pd-mai:not(.kl2-mai-fold) .kl2-pd-mai-toggle::after { transform: translateY(2px) rotate(-135deg); }
.kl2-pd-mai-body { display: flex; flex-direction: column; gap: 12px; }
.kl2-pd-mai.kl2-mai-fold { gap: 0; padding: 12px 14px; }
.kl2-pd-mai.kl2-mai-fold .kl2-pd-mai-body { display: none; }
.kl2-pd-mai.kl2-mai-fold .kl2-pd-mai-ava { width: 40px; height: 40px; }
/* dai rieng duoi hai cot (thang gia cap Luxer, thong so ky thuat) */
.az-kl-pd.kl2-pd > .kl2-pd-band { display: block; margin-top: 28px; }
.az-kl-pd.kl2-pd > .kl2-pd-band + .kl2-pd-band { margin-top: 16px; }
.kl2-pd-panel { display: flex; flex-direction: column; gap: 14px; padding: 20px 24px 22px; border-radius: 18px; background: var(--kl-card, #121212);
    border: 1px solid var(--kl-line, #1F1F1F); }
.kl2-pd-ladderhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; }
.az-kl-pd .kl2-pd-band .kl2-pd-h { font-size: 14px; }
.az-kl-pd .kl2-pd-ladder-sub { font-size: 13.5px; color: var(--kl-muted); }
.kl2-pd-panel .kl2-ladder { gap: 10px; }
.kl2-pd-panel .kl2-ladder-step { padding: 14px 8px 12px; gap: 5px; border-radius: 14px; }
.kl2-pd-panel .kl2-ladder-step small { font-size: 12px; }
.kl2-pd-panel .kl2-ladder-step b { font-size: 16px; }
.kl2-pd-panel .kl2-ladder-step.kl2-lock b { font-size: 12.5px; }
.kl2-pd-panel .kl2-pd-pct { font-size: 12px; }
.kl2-pd-lumpct { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--kl-gold2); line-height: 1.2; }
.az-kl-pd.kl2-pd .kl2-pd-specband .az-kl-pd-spechead { border-top: 0; padding-top: 0; margin-bottom: 0; }
@media (min-width: 992px) {
    .az-kl-pd.kl2-pd .kl2-pd-specband .az-kl-pd-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
    .az-kl-pd.kl2-pd .kl2-pd-specband .az-kl-pd-spec-row:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}
/* the «Sản phẩm liên quan» : ten co dinh 2 dong */
.az-kl-pd.kl2-pd .az-kl-pd-card-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
@media (max-width: 767.98px) {
    .az-kl-pd.kl2-pd > .kl2-pd-band { margin-top: 16px; }
    .kl2-pd-panel { padding: 14px; border-radius: 16px; gap: 12px; }
}
@media (max-width: 640px) {
    /* dau khoi Mai : nut «Tính số đèn» xuong dong rieng, rong het khoi */
    .kl2-pd-mai-top { flex-wrap: wrap; }
    .kl2-pd-mai-tt { flex: 1 1 0; min-width: 0; }
    .az-kl-pd .kl2-pd-mai-toggle { flex: 1 1 100%; margin-top: 4px; }
    /* thang 7 cap : mot hang vuot ngang (thay 4 + 3 o) */
    .kl2-pd-panel .kl2-ladder { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(118px, 36%); overflow-x: auto;
        scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: thin; }
    .kl2-pd-panel .kl2-ladder-step { scroll-snap-align: start; padding: 10px 6px; }
    .kl2-pd-panel .kl2-ladder-step b { font-size: 14px; }
    .kl2-pd-ladderhead { flex-direction: column; align-items: flex-start; }
}