/* ------------------------------------------------------------------
   Chelate Style (dac ta muc 150) - lop phong cach dat len base.css (= CSS cua MasterSite Default, de cac trang ke
   thua van dung). Toi gian, nhieu khoang trang, chu manh, tong cam dat, phong Mulish, bo goc nho.
   Lop moi dung tien to cs-; doi bien goc (--mau-chinh, --font-...) de ca trang ke thua doi theo.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("fonts/mulish-vi.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("fonts/mulish-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-tieu-de: "Mulish", "Segoe UI", system-ui, sans-serif;
  --font-than: "Mulish", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r-s: 4px;
  --r-m: 6px;
  --r-l: 10px;
  --bo-goc: var(--r-s);
  --cs-nen: #f8f8f8;
  --cs-vien: #ececec;
  --cs-nhat: #fbf3ee;
  --khung-rong: 1280px;
}
@supports (color: color-mix(in oklab, red, blue)) {
  :root {
    --chu: var(--cs-phu);
    --chu-nhat: color-mix(in oklab, var(--cs-phu) 62%, #fff);
    --vien: var(--cs-vien);
    --nen: var(--cs-nen);
    --cs-nhat: color-mix(in oklab, var(--mau-chinh) 9%, #fff);
    --chinh-nhat: color-mix(in oklab, var(--mau-chinh) 12%, #fff);
    --chinh-mo: color-mix(in oklab, var(--mau-chinh) 5%, #fff);
  }
}

body.cs { background: var(--cs-nen); color: var(--chu); letter-spacing: .005em; }
.cs h1, .cs h2, .cs h3, .cs h4 { letter-spacing: -.01em; font-weight: 800; }
.cs .nut { border-radius: var(--r-s); font-weight: 800; letter-spacing: .02em; }
.cs .nut-chinh { background: var(--mau-chinh); }
.cs .nut-vien { border: 1px solid var(--chu); background: transparent; color: var(--chu); }
.cs .nut-vien:hover { background: var(--chu); color: #fff; border-color: var(--chu); }
.cs .nut-nho { min-height: 32px; padding: .25rem .8rem; font-size: .8rem; }
.cs-nhan-nho { margin: 0 0 .4rem; color: var(--mau-chinh); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Dai thong bao ---------- */
.cs-thong-bao { position: relative; background: var(--mau-chinh); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.cs-thong-bao[hidden] { display: none; }
.cs-thong-bao-ray { display: grid; padding: .5rem 3rem; }
.cs-thong-bao-muc { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .5s; }
.cs-thong-bao-muc.dang-hien { opacity: 1; visibility: visible; }
.cs-thong-bao a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cs-thong-bao-dong { position: absolute; top: 50%; right: .5rem; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; border: 0; background: transparent; color: #fff; cursor: pointer; }

/* ---------- Dau trang ---------- */
.cs-dau { border-bottom: 1px solid var(--cs-vien); }
.cs-dau::before { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.cs-dau-hang { position: relative; display: flex; align-items: center; gap: 1.25rem; min-height: 74px; }
.cs-logo img { height: 46px; width: auto; }
.cs-dau-phai { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.cs-nut-icon { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; color: var(--chu); cursor: pointer; }
.cs-nut-icon:hover { background: var(--cs-nhat); color: var(--mau-chinh); transform: none; }
.cs-dau .nut-tk, .cs-dau .nut-gio { width: 42px; height: 42px; border: 0; background: transparent; box-shadow: none; }
.cs-dau .nut-tk:hover, .cs-dau .nut-gio:hover { background: var(--cs-nhat); color: var(--mau-chinh); transform: none; }
.cs-dau .dem-gio { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--mau-nhan); color: #fff; font-size: .68rem; font-weight: 800; line-height: 18px; text-align: center; }


.cs-tim { display: none; border-top: 1px solid var(--cs-vien); background: #fff; }
.cs-tim.dang-mo { display: block; }
.cs-tim-form { display: flex; max-width: 720px; margin: 0 auto; padding: .85rem var(--le); }
.cs-tim-form input { flex: 1; min-height: 46px; padding: .6rem 1rem; border: 1px solid var(--chu); border-right: 0; border-radius: var(--r-s) 0 0 var(--r-s); background: #fff; }
.cs-tim-form button { width: 56px; border: 0; border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--chu); color: #fff; cursor: pointer; }

.cs-tim-form { position: relative; }
.cs-goi-y { position: absolute; left: var(--le); right: var(--le); top: calc(100% - .5rem); z-index: 80; margin: 0; padding: .35rem; list-style: none; background: #fff; border: 1px solid var(--cs-vien); border-radius: var(--r-m); box-shadow: var(--bong-l); max-height: 420px; overflow-y: auto; }
.cs-goi-y[hidden] { display: none; }
.cs-goi-y a { display: flex; align-items: center; gap: .65rem; padding: .45rem .55rem; border-radius: var(--r-s); color: var(--chu); font-size: .9rem; }
.cs-goi-y a:hover, .cs-goi-y a.dang-chon { background: var(--cs-nhat); }
.cs-goi-y img { flex: none; width: 40px; height: 40px; object-fit: cover; border-radius: var(--r-s); }
.cs-goi-y span { flex: 1; min-width: 0; }
.cs-goi-y strong { flex: none; color: var(--mau-nhan); font-size: .85rem; }

@media (max-width: 900px) {
  .cs-dau-hang { min-height: 60px; gap: .5rem; }
  .cs-logo { margin-right: auto; }
  .cs-logo img { height: 38px; }
  .cs-dau-phai { order: 3; margin-left: 0; }
  .cs-dau .nut-tk { display: grid; }
  .cs-tim-form { padding: .6rem .75rem; }
  .cs-thong-bao-ray { padding: .45rem 2.4rem; font-size: .7rem; }
}

/* ---------- Tieu de khoi, tab ---------- */
.cs-khoi-dau { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.cs-khoi-dau .khoi-tieu-de { position: relative; margin: 0; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 900; }
.cs-khoi-dau .khoi-phu { margin: .25rem 0 0; color: var(--chu-nhat); font-size: .92rem; }
.cs-khoi-dau .khoi-xem-them { color: var(--chu); font-weight: 800; font-size: .88rem; white-space: nowrap; }
.cs-khoi-dau .khoi-xem-them:hover { color: var(--mau-chinh); }
.cs .tab-nut.cs-tab, .cs .tab-nut { gap: .5rem; margin-bottom: 1.25rem; }
.cs .tab-nut button { border: 1px solid var(--cs-vien); border-radius: 999px; background: #fff; color: var(--chu); font-weight: 700; padding: .45rem 1.1rem; }
.cs .tab-nut button.dang-hien { border-color: var(--chu); background: var(--chu); color: #fff; box-shadow: none; }

/* ---------- Slide tran vien ---------- */
.cs-slide { background: #fff; }
.cs-slide .slide-anh img { max-height: 620px; }
.cs-slide .slide-chu { text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }

/* ---------- Dai chinh sach ---------- */
.cs-chinh-sach { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 1.5rem; background: #fff; border: 1px solid var(--cs-vien); border-radius: var(--r-m); }
.cs-chinh-sach-o { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.25rem; }
.cs-chinh-sach-o + .cs-chinh-sach-o { border-left: 1px solid var(--cs-vien); }
.cs-chinh-sach-o img { flex: none; width: 40px; height: 40px; object-fit: contain; }
.cs-chinh-sach-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cs-nhat); color: var(--mau-chinh); }
.cs-chinh-sach-o strong { display: block; font-size: .9rem; }
.cs-chinh-sach-o span { display: block; color: var(--chu-nhat); font-size: .8rem; line-height: 1.4; }
@media (max-width: 900px) {
  .cs-chinh-sach { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-chinh-sach-o:nth-child(3) { border-left: 0; }
  .cs-chinh-sach-o:nth-child(n+3) { border-top: 1px solid var(--cs-vien); }
  .cs-chinh-sach-o { padding: .85rem; }
}

/* ---------- Nhom hang noi bat ---------- */
.cs-nhom-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1.25rem; }
.cs-nhom-the { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; color: var(--chu); }
.cs-nhom-anh { display: grid; place-items: center; width: min(140px, 100%); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #fff; border: 1px solid var(--cs-vien); transition: border-color .2s, transform .3s var(--ease); }
.cs-nhom-anh img { width: 100%; height: 100%; object-fit: cover; }
.cs-nhom-chu { color: var(--mau-chinh); font-size: 2.4rem; font-weight: 900; }
.cs-nhom-the:hover .cs-nhom-anh { border-color: var(--mau-chinh); transform: translateY(-4px); }
.cs-nhom-the strong { font-size: .95rem; line-height: 1.3; }
.cs-nhom-the small { color: var(--chu-nhat); font-size: .8rem; }

/* ---------- The ma giam gia (ve) ---------- */
.cs-ma-luoi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.cs-ve { position: relative; display: flex; min-height: 120px; background: #fff; border: 1px solid var(--cs-vien); border-radius: var(--r-m); }
.cs-ve::before, .cs-ve::after { content: ""; position: absolute; left: 70px; width: 16px; height: 16px; border-radius: 50%; background: var(--cs-nen); border: 1px solid var(--cs-vien); transform: translateX(-50%); }
.cs-ve::before { top: -9px; } .cs-ve::after { bottom: -9px; }
.cs-ve-trai { flex: 0 0 70px; display: grid; place-items: center; border-right: 1px dashed var(--cs-vien); color: #f58a20; }
.cs-ve-phai { flex: 1; min-width: 0; padding: .75rem .9rem; display: flex; flex-direction: column; gap: .25rem; }
.cs-ve-ma { margin: 0; color: #f58a20; font-size: .78rem; font-weight: 800; letter-spacing: .04em; }
.cs-ve-ma strong { color: var(--chu); font-size: .95rem; }
.cs-ve-mo-ta { margin: 0; font-size: .8rem; color: var(--chu-nhat); line-height: 1.4; }
.cs-ve-nut { display: flex; align-items: center; gap: .6rem; margin-top: auto; }
.cs-ve-nut .nut-chinh { background: #f58a20; }
.cs-ve-han { margin: 0; color: var(--chu-nhat); font-size: .72rem; }
.cs-ve-dk { position: relative; font-size: .8rem; }
.cs-ve-dk summary { color: var(--color-link, #2f80ed); cursor: pointer; list-style: none; text-decoration: underline; }
.cs-ve-dk summary::-webkit-details-marker { display: none; }
.cs-ve-dk-noi { position: absolute; bottom: calc(100% + 8px); left: -6rem; z-index: 20; width: 260px; padding: .85rem 1rem; background: #fff; border: 1px solid var(--cs-vien); border-radius: var(--r-m); box-shadow: var(--bong-l); }
.cs-ve-dk-noi p { margin: 0 0 .35rem; }
@media (max-width: 1100px) { .cs-ma-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cs-ma-luoi { grid-template-columns: 1fr; } .cs-ve-dk-noi { left: -2rem; } }

/* ---------- Flash sale ---------- */
.cs-flash { margin-top: clamp(2.25rem, 5vw, 4rem); padding: 2rem 0 2.25rem; background: var(--cs-nhat); }
.cs-flash-dau { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1rem; }
.cs-flash-tieu-de { margin: 0; color: var(--mau-nhan); font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem); font-weight: 900; text-transform: uppercase; }
.cs-flash-dem { display: flex; align-items: center; gap: .3rem; font-weight: 700; }
.cs-flash-dem[hidden] { display: none; }
.cs-flash-dem > span { margin-right: .4rem; color: var(--chu-nhat); font-size: .9rem; }
.cs-flash-dem b { min-width: 2.2rem; padding: .3rem .4rem; border-radius: var(--r-s); background: var(--chu); color: #fff; text-align: center; font-variant-numeric: tabular-nums; }
.cs-flash-dem small { margin: 0 .35rem 0 .1rem; color: var(--chu-nhat); }
.cs-flash-dem i { font-style: normal; font-weight: 900; }
.cs-cuon { gap: 1rem; }
.cs-cuon > .the-sp { flex: 0 0 clamp(170px, 22vw, 240px); }

/* ---------- The san pham ---------- */
.cs .luoi-san-pham { gap: 1.5rem 1rem; }
.cs-the.the-sp { border: 0; border-radius: var(--r-s); background: transparent; box-shadow: none; overflow: visible; }
.cs-the.the-sp:hover { box-shadow: none; transform: none; }
.cs-the-anh.the-sp-anh { border-radius: var(--r-s); background: #fff; overflow: hidden; aspect-ratio: 1; }
.cs-the-anh img { width: 100%; height: 100%; object-fit: cover; padding: 0; }
.cs-the:hover .cs-the-anh img { transform: scale(1.04); }
.cs-the .the-sp-nhan { top: .6rem; left: .6rem; gap: .3rem; }
.cs-the .nhan { border-radius: 2px; font-size: .7rem; font-weight: 800; }
.cs .nhan-giam { background: #d84144; color: #fff; }
.cs .nhan-noi-bat { background: #f33828; color: #fff; }
.cs-the-nut { position: absolute; left: 0; right: 0; bottom: .75rem; z-index: 3; display: flex; justify-content: center; gap: .5rem; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s var(--ease); }
.cs-the:hover .cs-the-nut, .cs-the-nut:focus-within { opacity: 1; transform: none; }
@media (hover: none) { .cs-the-nut { opacity: 1; transform: none; justify-content: flex-end; padding-right: .5rem; } .cs-the-nut .the-sp-xem-nhanh { display: none !important; } }
.cs-tron { position: static !important; display: grid !important; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--chu); box-shadow: 0 4px 12px rgba(0, 0, 0, .15); cursor: pointer; opacity: 1 !important; transform: none !important; }
.cs-tron[hidden] { display: none !important; }
.cs-tron:hover { background: var(--mau-chinh); color: #fff; }
.cs-the-chu.the-sp-chu { padding: .7rem .1rem 0; gap: .2rem; }
.cs-the .the-sp-hang { color: #9a9a9a; font-size: .7rem; letter-spacing: .1em; }
.cs-the .the-sp-ten { font-size: .92rem; font-weight: 600; line-height: 1.4; }
.cs-the .the-sp-gia strong { color: var(--mau-nhan); font-size: 1rem; font-weight: 800; }
.cs-the .the-sp-gia del { font-size: .82rem; }
.cs-da-ban { position: relative; display: flex; align-items: center; margin: .35rem 0 0; height: 18px; border-radius: 9px; background: color-mix(in oklab, var(--mau-chinh) 18%, #fff); overflow: hidden; font-size: .7rem; font-weight: 800; color: #fff; }
.cs-da-ban-thanh { position: absolute; inset: 0 auto 0 0; width: max(28%, var(--ty-le)); background: var(--mau-chinh); }
.cs-da-ban span:last-child { position: relative; padding-left: .6rem; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }

/* ---------- Anh + chu ---------- */
.cs-anh-chu { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); }
.cs-anh-chu-anh { border-radius: var(--r-m); overflow: hidden; aspect-ratio: 4 / 3; background: #fff; }
.cs-anh-chu-anh img { width: 100%; height: 100%; object-fit: cover; }
.cs-anh-chu-noi h2 { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.1rem); font-weight: 900; }
.cs-anh-chu-noi p, .cs-anh-chu-noi .bai-viet-than { color: var(--chu-nhat); }
.cs-anh-chu-dao .cs-anh-chu-anh { order: 2; }
@media (max-width: 800px) { .cs-anh-chu { grid-template-columns: 1fr; } .cs-anh-chu-dao .cs-anh-chu-anh { order: 0; } }

/* ---------- Video ---------- */
.cs-video { margin-top: clamp(2.25rem, 5vw, 4rem); padding: clamp(2rem, 5vw, 3.5rem) 0; background: var(--chu); color: #fff; }
.cs-video-luoi { display: grid; grid-template-columns: 1fr 1.6fr; align-items: center; gap: 2rem; }
.cs-video-chu h2 { color: #fff; font-size: clamp(1.35rem, 1rem + 1.2vw, 2rem); }
.cs-video .cs-nhan-nho { color: color-mix(in oklab, var(--mau-chinh) 60%, #fff); }
.cs-nut-sang.nut-vien { border-color: #fff; color: #fff; }
.cs-nut-sang.nut-vien:hover { background: #fff; color: var(--chu); }
.cs-video-khung { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; background: #000; }
.cs-video-khung img, .cs-video-khung iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.cs-video-nut { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 74px; height: 74px; border: 0; border-radius: 50%; background: var(--mau-chinh); color: #fff; cursor: pointer; box-shadow: 0 0 0 10px rgba(255, 255, 255, .2); }
.cs-video-nut .bt { width: 28px; height: 28px; fill: currentColor; stroke: none; }
@media (max-width: 800px) { .cs-video-luoi { grid-template-columns: 1fr; } }

/* ---------- Y kien, so lieu, doi tac ---------- */
.cs-y-kien .y-kien { border: 0; background: #fff; border-radius: var(--r-m); box-shadow: 0 1px 0 var(--cs-vien); }
/* Khoi so lieu: dai nen ngang mau chu dao tran vien de noi bat (chu shop 31/10/2026) */
.cs-so-lieu { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; text-align: center;
  padding-top: clamp(1.75rem, 4vw, 2.75rem); padding-bottom: clamp(1.75rem, 4vw, 2.75rem);
  border-image: linear-gradient(115deg, color-mix(in srgb, var(--mau-chinh) 88%, #000), var(--mau-chinh) 55%, color-mix(in srgb, var(--mau-chinh) 70%, #ffb347)) fill 0 // 0 100vmax; }
.cs-so-lieu-o { padding: 1.25rem; border-radius: var(--r-m); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); transition: transform .25s, background .25s; }
.cs-so-lieu-o:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .16); }
.cs-so-lieu-o strong { display: block; color: #fff; font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.5rem); font-weight: 900; text-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.cs-so-lieu .cs-so-lieu-o span { display: block; margin-top: .2rem; color: rgba(255, 255, 255, .9); font-weight: 600; }
/* Nut goi noi: Chelate Style hien ca tren dien thoai (thanh duoi bo "Goi ngay") */
@media (max-width: 900px) { .cs-noi-goi .noi-goi { display: grid; } }
/* "Chung toi la ai?": bieu do tang truong (SVG cua Core, lop bdpt-* trong base.css) */
.cs-tang-truong { --gt-chinh: var(--mau-chinh); --gt-vien: var(--cs-vien); --gt-chu-nhat: var(--chu-nhat);
  margin: .5rem 0 1.25rem; padding: 1rem 1rem .75rem; background: #fff; border: 1px solid var(--cs-vien); border-radius: var(--r-m); }
.cs-tang-truong svg { display: block; width: 100%; height: auto; }
.cs-tang-truong figcaption { margin-top: .35rem; text-align: center; color: var(--chu-nhat); font-size: .85rem; font-weight: 600; }
.cs-so-lieu-o span { color: var(--chu-nhat); font-size: .88rem; }
.cs-doi-tac-ray { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2.5rem; padding: 1.25rem; background: #fff; border-radius: var(--r-m); }
.cs-doi-tac-ray img { height: 48px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.cs-doi-tac-ray a:hover img, .cs-doi-tac-ray span:hover img { filter: none; opacity: 1; }

/* ---------- Tin tuc ---------- */
.cs-tin-luoi { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-auto-rows: auto; gap: 1.25rem; }
.cs-tin-the a { display: flex; flex-direction: column; height: 100%; color: var(--chu); }
.cs-tin-lon { grid-row: span 2; }
.cs-tin-anh { display: block; border-radius: var(--r-s); overflow: hidden; aspect-ratio: 16 / 10; background: #fff; }
.cs-tin-anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.cs-tin-the a:hover img { transform: scale(1.04); }
.cs-tin-chu { display: flex; flex-direction: column; gap: .3rem; padding-top: .6rem; }
.cs-tin-chu time { color: var(--chu-nhat); font-size: .78rem; }
.cs-tin-chu strong { font-size: .98rem; line-height: 1.4; }
.cs-tin-lon .cs-tin-chu strong { font-size: 1.2rem; }
.cs-tin-trich { color: var(--chu-nhat); font-size: .9rem; }
.cs-tin-doc { color: var(--mau-chinh); font-size: .85rem; font-weight: 800; }
@media (max-width: 900px) { .cs-tin-luoi { grid-template-columns: 1fr 1fr; } .cs-tin-lon { grid-column: 1 / -1; grid-row: auto; } }

/* ---------- Banner ---------- */
.cs-banner .dai-banner-o { border-radius: var(--r-m); }

/* ---------- Chan trang toi ---------- */
.cs-chan.chan-trang { margin-top: clamp(3rem, 6vw, 5rem); background: var(--cs-chan); color: rgba(255, 255, 255, .78); }
/* Cot chan trang lay tu snippet chung cua Default (dac ta muc 155.1); o day chi doi mau */
.cs-chan .chan-song { display: none; }
.cs-chan h3 { color: #fff; font-size: .82rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.cs-chan a { color: rgba(255, 255, 255, .78); }
.cs-chan a:hover { color: #fff; }
.cs-chan .chan-logo { max-height: 52px; width: auto; margin-bottom: .75rem; padding: 6px 10px; border-radius: var(--r-s); background: #fff; }
.cs-chan .chan-list li { margin-bottom: .45rem; }
.cs-chan .chan-lien-he li { display: flex; gap: .5rem; margin-bottom: .45rem; }
.cs-goi-lai input { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); color: #fff; }
.cs-goi-lai input::placeholder { color: rgba(255, 255, 255, .55); }
.cs-chan .chan-duoi { border-top: 1px solid rgba(255, 255, 255, .12); background: transparent; color: rgba(255, 255, 255, .55); }
.cs-chan .chan-dong-y, .cs-chan .chan-goi-lai-mo-ta { color: rgba(255, 255, 255, .6); }

/* ---------- Vua dat hang ---------- */
.cs-vua-mua { position: fixed; left: 16px; bottom: calc(var(--cao-thanh-duoi) + 16px); z-index: 55; max-width: 330px; padding: .75rem 2.2rem .75rem .9rem; background: #fff; border-left: 4px solid #d82e4d; border-radius: var(--r-m); box-shadow: var(--bong-l); font-size: .82rem; line-height: 1.45; animation: cs-truot .45s var(--ease) both; }
.cs-vua-mua[hidden] { display: none; }
.cs-vua-mua strong { color: #d82e4d; }
.cs-vua-mua-muc { margin: 0; }
.cs-vua-mua-dong { position: absolute; top: .3rem; right: .3rem; display: grid; place-items: center; width: 26px; height: 26px; border: 0; background: none; color: var(--chu-nhat); cursor: pointer; }
@keyframes cs-truot { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Trang san pham ---------- */
.cs-chi-tiet .chi-tiet-anh-chinh { border-radius: var(--r-m); background: #fff; }
.cs-nhan-anh { position: absolute; top: .75rem; left: .75rem; z-index: 2; }
.cs-thong-tin h1 { font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem); font-weight: 800; }
.cs-ma-sp { margin: 0 0 .5rem; color: var(--chu-nhat); font-size: .88rem; }
.cs-ma-sp strong { color: #2f80ed; font-weight: 700; }
.cs-hop-gia { padding: .85rem 1rem; margin: .5rem 0 1rem; background: var(--cs-nen); border-radius: var(--r-s); }
.cs-hop-gia .chi-tiet-gia { margin: 0; }
.cs-hop-gia .chi-tiet-gia strong { color: var(--mau-nhan); font-size: 1.75rem; font-weight: 900; }
.cs-mo-ta-ngan { color: var(--chu-nhat); }
.cs-khuyen-mai { position: relative; margin: 1rem 0; padding: 1.1rem 1rem .85rem; border: 1px dashed #dc2b2b; border-radius: var(--r-m); background: #fff; }
.cs-khuyen-mai-dau { position: absolute; top: -.75rem; left: .85rem; display: inline-flex; align-items: center; gap: .35rem; margin: 0; padding: 0 .5rem; background: #fff; color: #dc2b2b; font-size: .82rem; font-weight: 900; letter-spacing: .04em; }
.cs-khuyen-mai ul { margin: .25rem 0 .6rem; padding-left: 1.15rem; font-size: .9rem; }
.cs-khuyen-mai li { margin-bottom: .2rem; }
.cs-chip-ma { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; }
.cs-chip { flex: none; padding: .3rem .75rem; border: 1px dashed #f58a20; border-radius: 3px; background: #fff7ef; color: #f58a20; font-weight: 800; font-size: .82rem; cursor: pointer; }
.cs-chip:hover { background: #f58a20; color: #fff; }
.cs-so-luong { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 .5rem; }
.cs-so-luong label { font-weight: 700; }
.cs-so-luong-o { display: inline-flex; border: 1px solid var(--cs-vien); border-radius: var(--r-s); overflow: hidden; background: #fff; }
.cs-so-luong-o button { width: 40px; border: 0; background: #fff; font-size: 1.15rem; cursor: pointer; }
.cs-so-luong-o button:hover { background: var(--cs-nhat); color: var(--mau-chinh); }
.cs-so-luong-o input { width: 60px; min-height: 42px; border: 0; border-left: 1px solid var(--cs-vien); border-right: 1px solid var(--cs-vien); text-align: center; -moz-appearance: textfield; }
.cs-so-luong-o input::-webkit-inner-spin-button { -webkit-appearance: none; }
.cs-nut-mua { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.cs-nut-mua .nut { min-height: 50px; text-transform: uppercase; }
.cs-them-gio.nut-vien { border-color: var(--mau-chinh); color: var(--mau-chinh); }
.cs-them-gio.nut-vien:hover { background: var(--mau-chinh); color: #fff; border-color: var(--mau-chinh); }
.cs .quy-cach-o { border-radius: var(--r-s); }
.cs .quy-cach-o:has(input:checked) { border-color: var(--mau-chinh); box-shadow: inset 0 0 0 1px var(--mau-chinh); }
.cs-goi-dat { margin: .9rem 0 .5rem; font-size: .92rem; }
.cs-goi-dat strong { color: var(--mau-chinh); }
.cs-loi-ich { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 1rem 0 0; padding: .85rem 0 0; list-style: none; border-top: 1px solid var(--cs-vien); font-size: .82rem; font-weight: 700; }
.cs-loi-ich li { display: flex; align-items: center; gap: .45rem; }
.cs-loi-ich img { width: 28px; height: 28px; object-fit: contain; }
.cs-chia-se { margin: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; color: var(--chu-nhat); font-size: .85rem; }
.cs-chia-se a { padding: .2rem .6rem; border: 1px solid var(--cs-vien); border-radius: 999px; background: #fff; font-weight: 700; }
.cs-chia-se a:hover { border-color: var(--mau-chinh); }
@media (max-width: 560px) { .cs-loi-ich { grid-template-columns: 1fr; } }

/* Thanh mua dinh khi cuon */
.cs-mua-dinh { position: fixed; left: 0; right: 0; bottom: var(--cao-thanh-duoi); z-index: 58; background: #fff; border-top: 1px solid var(--cs-vien); box-shadow: 0 -10px 24px -16px rgba(0, 0, 0, .35); animation: cs-truot .3s var(--ease) both; }
.cs-mua-dinh[hidden] { display: none; }
.cs-mua-dinh-hang { display: flex; align-items: center; gap: .85rem; padding-top: .6rem; padding-bottom: .6rem; }
.cs-mua-dinh-hang img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--r-s); }
.cs-mua-dinh-chu { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .88rem; }
.cs-mua-dinh-chu strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-mua-dinh-chu b { color: var(--mau-nhan); }
.cs-mua-dinh-chu del { color: var(--chu-nhat); font-size: .8rem; }
.cs-mua-dinh-chu em { color: var(--mau-nhan); font-style: normal; font-size: .8rem; font-weight: 800; }
.cs-mua-dinh .nut { min-height: 44px; white-space: nowrap; }
@media (max-width: 560px) { .cs-mua-dinh-hang img { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .cs-vua-mua, .cs-mua-dinh { animation: none; }
  .cs-thong-bao-muc { transition: none; }
}

/* O quang cao "mua nhieu" lap cho trong khoi ma giam gia (dac ta muc 156.1) */
.cs-ve-qc { background: linear-gradient(135deg, #fff 60%, color-mix(in srgb, var(--mau-nhan, #f28c1b) 10%, #fff)); }
.cs-ve-qc .cs-ve-ma strong { font-size: 1.15em; }
.cs-ve-qc .cs-ve-han { color: var(--mau-chinh); font-weight: 600; }

/* "Chung toi la ai?": ban do thi truong ben trai (chu shop 31/10/2026) */
.cs-ban-do { margin: 0; padding: .75rem; border: 1px solid var(--cs-vien); border-radius: var(--r-m);
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--mau-chinh) 6%, #fff)); }
.cs-ban-do svg { display: block; width: 100%; height: auto; max-height: 520px; }
.cs-ban-do figcaption { margin-top: .5rem; text-align: center; color: var(--chu); font-size: .92rem; }
.cs-ban-do figcaption strong { font-size: 1.5rem; color: var(--mau-chinh); }
.cs-ban-do .gt-chu-giai { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .9rem; margin: .4rem 0 0; font-size: .8rem; }
.cs-ban-do .gt-chu-giai > span { display: inline-flex; align-items: center; gap: .3rem; }
/* Dai so lieu sat khoi tren / duoi hon (chu shop 31/10/2026) */
.cs-so-lieu.khoi { margin-top: clamp(1rem, 2vw, 1.5rem); }
.cs-so-lieu.khoi + .khoi { margin-top: clamp(1rem, 2vw, 1.5rem); }