/* Mảng /coupons/ + /review/ — dựng bởi scripts/xuat-tinh-tfg.mjs */

/* ---- MENU GOM 4 MUC LON + BANG XO 16 NGANH (03/09 vong 3) ----
   BAY: style.css cua web goc khai .mnav .wrap{overflow-x:auto} de menu dai cuon ngang
   duoc. De nguyen thi bang xo bi CAT NGANG ngay duoi thanh menu - khong loi, chi la
   khong thay gi (luat 8b). Nay chi con 4 muc nen khong can cuon, doi ve visible.
   Luat cua minh nap SAU style.css nen cung do dam thi de sau la thang. */
.mnav{position:relative;}
.mnav .wrap{overflow:visible;position:relative;gap:34px;}
.mi{position:relative;}
.mi .mtop{display:flex;align-items:center;gap:5px;}
.mi.on>.mtop{border-bottom-color:var(--brick);color:var(--brick);}
.mi i{font-style:normal;font-size:9px;opacity:.6;}
.drop{position:absolute;left:50%;transform:translateX(-50%);top:100%;z-index:60;display:none;
  min-width:560px;background:#fff;border:1px solid var(--line);border-top:2px solid var(--brick);
  box-shadow:0 14px 34px rgba(20,16,12,.16);padding:16px 18px 12px;}
.dropin{display:grid;grid-template-columns:repeat(3,1fr);gap:0 22px;}
.drop a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--line);text-transform:none;letter-spacing:0;
  font-size:13.5px;font-weight:600;white-space:normal;}
.drop a:hover{color:var(--brick);}
.drop a b{font-family:var(--sans);font-size:11px;font-weight:700;color:var(--muted);}
.drop .dall{display:block;border-bottom:0;margin-top:10px;padding:8px 0 2px;text-align:right;
  color:var(--brick);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;}
/* BAM MOI SO (anh Khanh chot 03/09 vong 4). Bo hoan toan luat mo bang :hover: ro chuot
   ngang qua la bang bung ra che mat noi dung, va tren may cham thi khong co hover nao ca
   nen hai loai may hanh xu khac han nhau. Nay CA HAI deu bam moi mo -> mot cach dung duy
   nhat.
   BAY DA DINH: ban dau em them .mi.has:focus-within .drop{display:block} cho nguoi di ban
   phim. Nhung bam chuot xong thi the <a> VAN DANG GIU tieu diem -> luat focus-within giu
   bang mo, nen bam lan hai KHONG DONG duoc. Do may moi thay (bam lan 2 -> van hien), mat
   thi tuong menu dinh. Bo luat do: nguoi di ban phim nhan Enter cung sinh su kien click
   nen van mo/dong duoc binh thuong. */
.mi.mo .drop{display:block;}
.mi .cv{transition:transform .16s;opacity:.55;}
.mi.mo .cv{transform:rotate(180deg);opacity:1;}

/* ---- BANG DAU TRANG (03/09 vong 7 — anh Khanh: "header va banner nay trong xau qua") ----
   Ban truoc: ten bao CAN GIUA, o tim day sang phai, con cot trai BO TRONG -> nhin lech
   han, va ca bang cao gan 140px cho mot dong chu. Nay xep MOT HANG nhu bao mang that:
   ten bao ben trai (kem cau dan ngay duoi), o tim an het cho trong o giua-phai. Thanh menu
   cung keo ve trai cho thang hang voi ten bao. */
.masthead{background:linear-gradient(180deg,#fdfaf3 0%,var(--paper) 100%);}
.masthead-in{display:flex;align-items:center;justify-content:space-between;gap:28px;
  max-width:1240px;margin:0 auto;padding:15px 24px 13px;}
.mh-mid{text-align:left;min-width:0;}
.masthead .mh{font-size:34px;line-height:1.02;}
.masthead-tag{margin-top:5px;font-size:10px;letter-spacing:.17em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.mnav .wrap{justify-content:flex-start;}
.mh-find{position:relative;display:flex;align-items:center;gap:9px;
  flex:1 1 auto;max-width:430px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:0 16px;height:40px;box-shadow:0 1px 2px rgba(36,31,24,.05);}
.mh-find:focus-within{border-color:var(--brick);box-shadow:0 0 0 3px rgba(176,69,42,.10);}
.mh-find .fi{color:var(--muted);flex:0 0 16px;}
.mh-find input{flex:1;min-width:0;border:0;outline:0;background:transparent;height:36px;
  font-family:var(--sans);font-size:13px;color:var(--ink);}
.mh-find input::placeholder{color:var(--muted);}
.mh-find input::-webkit-search-cancel-button{-webkit-appearance:none;}
/* bang goi y */
.sg{position:absolute;left:-1px;right:-1px;top:calc(100% + 6px);z-index:70;background:#fff;
  border:1px solid var(--line);border-top:2px solid var(--brick);border-radius:10px;
  box-shadow:0 14px 34px rgba(20,16,12,.16);max-height:60vh;overflow-y:auto;}
.sg a{display:flex;align-items:center;gap:10px;padding:9px 12px;font-family:var(--sans);
  font-size:13px;font-weight:600;border-bottom:1px solid var(--line);}
.sg a:last-child{border-bottom:0;}
.sg a:hover,.sg a.chon{background:var(--paper);color:var(--brick);}
.sg img{width:20px;height:20px;object-fit:contain;flex:0 0 20px;}
.sg .lo{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);}
.sg .khong{padding:12px;font-family:var(--sans);font-size:13px;color:var(--muted);}
/* trang /search/ dung lai chinh khoi goi y, chi bo phan noi tuyet doi */
.sg2{position:static;box-shadow:none;max-height:none;border-top-width:1px;}
.sg2 a{padding:12px 14px;font-size:14.5px;}
.khongco{font-family:var(--sans);font-size:14px;color:var(--muted);padding:18px 0;}
/* o tim tren TRANG /search/ dung lai class .mh-find, ma class do co grid-column:3 +
   justify-self:end de nam ben phai bang dau trang -> vao trang search no van bi day sang
   phai. Go bo hai luat do (luat 6c: mot class mac hai vai thi phai khai ro vai thu hai). */
.otim2{max-width:520px;margin:0 auto 22px 0;grid-column:auto;justify-self:start;}
@media(max-width:900px){
  .masthead-in{flex-direction:column;align-items:stretch;gap:10px;padding:12px 16px 10px;}
  .mh-mid{text-align:center;}
  .masthead-tag{white-space:normal;}
  .mh-find{max-width:none;}
  .mnav .wrap{justify-content:center;}
}

/* bang xo muc Coupons: danh sach TIEM, mot cot, co logo (mau slickdeals) */
.drop.hep{min-width:290px;padding:10px 8px 8px;}
.dsh a{display:flex;align-items:center;gap:11px;justify-content:flex-start;padding:8px 10px;
  border-bottom:0;font-size:14px;font-weight:600;}
.dsh a:hover{background:var(--paper);color:var(--brick);}
.dsh img{width:22px;height:22px;object-fit:contain;flex:0 0 22px;}
.dsh .sc{width:22px;height:22px;flex:0 0 22px;display:flex;align-items:center;justify-content:center;
  background:var(--brick);color:#fff;font-size:11px;font-weight:800;}
.dsh .sn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.drop.hep .dall{padding:10px 10px 4px;text-align:left;border-top:1px solid var(--line);margin-top:6px;}
/* MAN HEP: bang xo phai bam vao CA THANH MENU, khong bam vao muc.
   Ban dau em de .mi{position:relative} roi keo bang xo ra 100vw bang margin am — sai, vi
   moc 50% do la be ngang cua MUC chu khong phai cua man hinh, nen bang xo bi day ra ngoai
   ben trai, ten nganh mat mot nua (soi anh moi thay, may do bao tran 0px — luat 5c).
   Cach dung: tra .mi ve static o man hep, bang xo bam vao .mnav roi cang left/right. */
@media(max-width:900px){
  .mi{position:static;}
  .drop{min-width:0;left:12px;right:12px;transform:none;}
  .dropin{grid-template-columns:repeat(2,1fr);}
}
/* 4 muc o man 390px la vua CHAM mep — FICTION bi cat. Bop chu + khoang cach cho vua,
   khong dua vao overflow-x:auto nua vi bat cuon lai la bang xo bi cat ngang. */
/* 5 muc o man 390px thi ALL STORES bi cat mep phai. KHONG duoc chua bang overflow-x:auto
   (bat cuon lai la bang xo bi cat ngang - bay so 1). Cach dung: bop chu + cho XUONG DONG,
   nhu vay them muc bao nhieu cung khong bao gio bi cat. */
@media(max-width:560px){
  .mnav .wrap{gap:9px;font-size:10px;letter-spacing:0;flex-wrap:wrap;justify-content:center;}
  .mnav .wrap a{padding:10px 0;}
  /* mui ten SVG rong hon ky tu ▾ nen o man hep no day menu xuong 2 dong (do duoc: thanh
     menu 38px -> 91px). Bop mui ten + khoang cach chu-mui-ten cho ve 1 dong. */
  .mi .mtop{gap:3px;}
  .mi .cv{width:9px;height:9px;}
  /* cau dan 3 dong o man 390px vi letter-spacing .28em — bop lai con 1-2 dong */
  .masthead .mh{font-size:31px;}
  .masthead-tag{font-size:9.5px;letter-spacing:.14em;margin-top:4px;}
  .drop{left:8px;right:8px;padding:12px 14px 10px;}
  .dropin{grid-template-columns:1fr;}
  .drop.hep{min-width:0;}
}

.cwrap{max-width:1240px;margin:0 auto;padding:28px 24px 56px;}
.crumb{font-family:var(--sans);font-size:12px;color:var(--muted);margin-bottom:18px;letter-spacing:.04em;}
.crumb a:hover{color:var(--brick);}
.chead{border-bottom:3px double var(--ink);padding-bottom:18px;margin-bottom:26px;}
.chead h1{font-size:40px;line-height:1.12;font-weight:800;letter-spacing:-.01em;}
.chead .sub{font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:10px;letter-spacing:.03em;}
.cbrandhead{display:flex;gap:20px;align-items:center;}
.cbrandhead img{width:72px;height:72px;object-fit:contain;background:var(--paper);border:1px solid var(--line);padding:8px;}
.clogo-txt{width:72px;height:72px;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;color:#fff;background:var(--brick);}

/* 🛑 KHỐI "thẻ mã" CŨ ĐÃ GỠ 03/09 (.codes · .code-off · .code-mid · .code-tag ·
   .code-btn · .val) — grep ra 0 nơi sinh ra mấy class đó sau khi trang brand chép bố
   cục haulperk. Thẻ mã mới khai ở mục "TRANG BRAND" bên dưới.
   ⚠️ ĐỪNG chỉ để nằm đó cho lành: dòng cũ .code với display:flex KHÔNG chết một cách vô
   hại — luật mới không khai display nên nó vẫn đè, kéo dải "Worked … for N shoppers"
   (vốn phải nằm DƯỚI thẻ) lên đứng cạnh nút GET CODE. Nhìn ảnh chụp mới thấy, máy đo báo
   0 tràn · 0 ảnh vỡ · 0 chữ tràn — xanh hết (luật 5b + 5c: máy lọc, mắt chốt).
   ⚠️ Và chú thích này KHÔNG được chứa dấu nháy ngược: cả khối CSS nằm trong MỘT chuỗi mở
   bằng dấu nháy ngược, gõ một cái là đóng chuỗi sớm và vỡ nguyên file (luật 10b — em vừa
   dính đúng bẫy đó ngay lần viết đầu, bắt được nhờ chạy node --check sau mỗi lần sửa). */

/* lưới hãng / lưới ngành */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin:22px 0 40px;}
.ccard{background:var(--paper);border:1px solid var(--line);padding:16px;display:flex;gap:12px;align-items:center;}
.ccard img{width:44px;height:44px;object-fit:contain;flex:0 0 44px;}
.ccard .ct{width:44px;height:44px;flex:0 0 44px;display:flex;align-items:center;justify-content:center;background:var(--brick);color:#fff;font-weight:800;}
.ccard b{display:block;font-size:16px;font-weight:600;line-height:1.25;}
.ccard span{font-family:var(--sans);font-size:12px;color:var(--muted);}
.ccard:hover{border-color:var(--brick);}

/* khối chữ */
.cbody{max-width:760px;font-size:18px;line-height:1.62;color:var(--body);}
.cbody h2{font-size:26px;font-weight:700;color:var(--ink);margin:32px 0 12px;}
.cbody h3{font-size:20px;font-weight:700;color:var(--ink);margin:24px 0 8px;}
.cbody p{margin-bottom:16px;}
.cbody ul{margin:0 0 16px 22px;}
.cbody li{margin-bottom:8px;}
.cnote{font-family:var(--sans);font-size:12px;color:var(--faint);border-top:1px solid var(--line);padding-top:14px;margin-top:34px;}

/* mục lục ngành */
.csec{margin-bottom:38px;}
.csec-h{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:16px;}
.csec-h h2{font-size:24px;font-weight:700;}
.csec-h a{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brick);}

.copied{font-family:var(--sans);font-size:10px;color:var(--brick);letter-spacing:.08em;}

/* ---- BÀI REVIEW + TRANG CHỦ (03/09) ---- */
/* bài nổi bật đầu trang chủ */
.hero{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;margin-bottom:34px;padding-bottom:30px;border-bottom:3px double var(--ink);}
.hero-main img{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:14px;}
.hero-main h2{font-size:34px;line-height:1.14;font-weight:800;letter-spacing:-.01em;}
.hero-main p{color:var(--body);margin-top:10px;font-size:17px;line-height:1.55;}
.hero-side{display:flex;flex-direction:column;gap:16px;}
.hero-side .rcard{border-bottom:1px solid var(--line);padding-bottom:14px;}
.hero-side .rcard:last-child{border-bottom:0;}

/* thẻ bài */
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px;margin:20px 0 40px;}
.rcard img{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:10px;}
.kick{font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brick);display:block;margin-bottom:6px;}
.rcard .kick,.hero-main .kick{font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brick);display:block;margin-bottom:6px;}
.rcard h3{font-size:20px;line-height:1.24;font-weight:700;}
.rcard p{font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:7px;line-height:1.5;}
.rcard:hover h3{color:var(--brick);}

/* khối gợi ý sản phẩm trong bài — chỗ gắn link aff */
.picks{margin:30px 0;padding:22px;background:var(--paper);border:1px solid var(--line);}
.picks h2{font-size:22px;margin:0 0 14px;}
.pick{display:flex;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line);}
.pick:first-of-type{border-top:0;}
.pick img{width:52px;height:52px;object-fit:contain;flex:0 0 52px;}
.pick .pt{width:52px;height:52px;flex:0 0 52px;display:flex;align-items:center;justify-content:center;background:var(--brick);color:#fff;font-weight:800;}
.pick .pm{flex:1 1 auto;min-width:0;}
.pick .pm b{display:block;font-size:17px;font-weight:700;}
.pick .pm span{font-family:var(--sans);font-size:13px;color:var(--muted);line-height:1.5;display:block;margin-top:3px;}
.pick .pb{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;}
.pick .pb a{display:block;text-align:center;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:9px 16px;border:1px solid var(--ink);white-space:nowrap;}
.pick .pb a.main{background:var(--ink);color:#fff !important;}
.pick .pb a.main:hover{background:var(--brick);border-color:var(--brick);}
.pick .pb a.alt:hover{border-color:var(--brick);color:var(--brick);}

.art-head{max-width:820px;margin-bottom:22px;}
.art-head h1{font-size:42px;line-height:1.1;font-weight:800;letter-spacing:-.015em;}
.art-head .sub{font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:12px;}
.art-anh{width:100%;max-width:900px;aspect-ratio:16/9;object-fit:cover;margin:0 0 28px;}
.faq h3{font-size:19px;}




/* KHỐI NGÀNH — chỉ còn HAI kiểu, đều là lưới thẻ (03/09 vòng 2, anh Khánh chốt qua ảnh):
   bỏ kiểu đảo chiều (danh sách trái, ảnh lớn phải) vì xấu, bỏ luôn kiểu 1-lớn-3-nhỏ và
   kiểu 2-lớn vì ảnh to phóng lên là lộ mấy tấm chụp sản phẩm nền trắng.
   KHONG dung dau nhay nguoc trong chu thich nay: ca khoi CSS nam trong mot chuoi template,
   go mot dau nhay nguoc la dong chuoi som va VO NGUYEN FILE (luat 10b, dinh 03/09). */
.catrow{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.cat3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 22px;}
.cat3 .rcard img{aspect-ratio:3/2;}
.cat3 .rcard h3{font-size:19px;}
@media(max-width:900px){.catrow,.cat3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:760px){.catrow,.cat3{grid-template-columns:1fr;}}

/* ---- KHỐI LÀM DÀY TRANG CHỦ (03/09, anh Khánh chỉ mẫu koupora) ---- */
/* deal sản phẩm: ảnh món + tên + giá + % giảm */
.deals{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.deal{border:1px solid var(--line);background:var(--paper);display:block;}
.deal .dimg{position:relative;aspect-ratio:1/1;overflow:hidden;background:#fff;}
.deal .dimg img{width:100%;height:100%;object-fit:contain;padding:10px;}
.deal .off{position:absolute;top:8px;left:8px;background:var(--brick);color:#fff;font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.05em;padding:4px 8px;}
.deal .dbody{padding:12px 14px 15px;}
.deal .dbrand{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);display:block;}
.deal .dname{font-size:16px;font-weight:600;line-height:1.3;margin:5px 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.deal .dgia{font-family:var(--sans);font-size:15px;font-weight:800;color:var(--ink);}
.deal .dgo{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--brick);display:block;margin-top:9px;}
.deal:hover{border-color:var(--brick);}

/* lưới hãng nổi bật cuối trang */
.stores{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.store{border:1px solid var(--line);background:var(--paper);padding:16px 10px;text-align:center;}
.store img{width:46px;height:46px;object-fit:contain;margin:0 auto 9px;}
.store .st2{width:46px;height:46px;margin:0 auto 9px;display:flex;align-items:center;justify-content:center;background:var(--brick);color:#fff;font-weight:800;}
.store b{display:block;font-size:14px;font-weight:600;line-height:1.25;}
.store span{font-family:var(--sans);font-size:11px;color:var(--muted);}
.store:hover{border-color:var(--brick);}

/* chip ngành */
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{border:1px solid var(--line);background:var(--paper);padding:9px 16px;font-family:var(--sans);font-size:13px;font-weight:600;}
.chip i{font-style:normal;color:var(--faint);font-weight:500;margin-left:6px;}
.chip:hover{border-color:var(--brick);color:var(--brick);}

@media(max-width:900px){.deals{grid-template-columns:repeat(2,1fr);}.stores{grid-template-columns:repeat(3,1fr);}}
@media(max-width:760px){.deals{grid-template-columns:repeat(2,1fr);gap:12px;}.stores{grid-template-columns:repeat(2,1fr);}.deal .dname{font-size:14px;}}

/* ---- TRANG CHỦ CHIA KHỐI (03/09, anh Khánh: "bên haulperk chia khối trông đẹp") ----
   Học bố cục từ haulperk: hero ảnh nền chữ đè + dải bài nhỏ · Editor's picks · ô ngành có
   ảnh · từng ngành kiểu 1 bài lớn + 3 bài nhỏ. Nhưng GIỮ TÔNG BÁO GIẤY của web này —
   viền mảnh, không bo góc tròn, nền kem — chứ không bê nguyên giao diện cam sang. */
.hero2{display:grid;grid-template-columns:1.32fr 1fr;gap:26px;margin-bottom:38px;}
.hero-big{position:relative;display:block;min-height:430px;overflow:hidden;background:var(--tan);}
.hero-big img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-big .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,16,12,.88) 0%,rgba(20,16,12,.45) 45%,rgba(20,16,12,0) 75%);}
.hero-big .txt{position:absolute;left:0;right:0;bottom:0;padding:26px 28px;color:#fff;}
.hero-big .kick{color:#f0c9b8;}
.hero-big h2{font-size:34px;line-height:1.12;font-weight:800;color:#fff;margin:4px 0 8px;}
.hero-big p{font-family:var(--sans);font-size:13.5px;line-height:1.55;color:#e8ddd2;}
.hero-list{display:flex;flex-direction:column;}
.hrow{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);}
.hrow:first-child{padding-top:0;}
.hrow:last-child{border-bottom:0;}
.hrow img{width:98px;height:74px;object-fit:cover;flex:0 0 98px;}
.hrow .hm{min-width:0;}
.hrow h3{font-size:17px;line-height:1.26;font-weight:700;margin-top:3px;}
.hrow:hover h3{color:var(--brick);}

.band{margin-bottom:38px;}
.band-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:2px solid var(--ink);padding-bottom:9px;margin-bottom:6px;}
.band-h h2{font-size:23px;font-weight:800;letter-spacing:-.01em;}
.band-h a{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--brick);white-space:nowrap;}
.band-sub{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-bottom:16px;}

.pick4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.pick4 .rcard img{aspect-ratio:4/3;}
.pick4 .rcard h3{font-size:17px;}
.meta{font-family:var(--sans);font-size:11.5px;color:var(--faint);margin-top:6px;display:block;}

/* ô ngành có ảnh — dẫn sang trang coupon của ngành đó */
.save{display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:14px;}
.save a{position:relative;overflow:hidden;min-height:150px;display:block;background:var(--tan2);}
.save a:first-child{grid-row:span 2;min-height:314px;}
.save img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.save .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,16,12,.82),rgba(20,16,12,.12));}
.save .st{position:absolute;left:0;bottom:0;padding:16px 18px;color:#fff;}
.save .st b{display:block;font-size:19px;font-weight:700;}
.save .st span{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.04em;border-bottom:1px solid rgba(255,255,255,.6);}
.save a:hover .st span{border-bottom-color:var(--brick);color:#ffd9c9;}

@media(max-width:900px){
  .pick4{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:760px){
  .hero2{grid-template-columns:1fr;gap:18px;}
  .hero-big{min-height:300px;}
  .hero-big h2{font-size:25px;}
  .pick4{grid-template-columns:1fr;}
  .save{grid-template-columns:1fr;grid-template-rows:none;}
  .save a:first-child{grid-row:auto;min-height:190px;}
  .hrow img{width:84px;height:64px;flex:0 0 84px;}
}

@media(max-width:760px){
  .hero{grid-template-columns:1fr;gap:20px;}
  .hero-main h2{font-size:26px;}
  .art-head h1{font-size:28px;}
  .rgrid{grid-template-columns:1fr;gap:22px;}
  .pick{flex-wrap:wrap;}
  .pick .pb{width:100%;flex-direction:row;}
  .pick .pb a{flex:1;}
}

@media(max-width:760px){
  .chead h1{font-size:29px;}
  /* 4 luật cho thẻ mã cũ đã gỡ theo khối ở trên — luật cho thẻ mã MỚI nằm ở mốc 560px
     dưới mục TRANG BRAND (luật 8: khai sau luật gốc thì mới đè được). */
  .cbody{font-size:17px;}
}

/* =====================================================================
   TRANG BAI + TRANG BRAND dung lai theo bo cuc haulperk (03/09 vong 8).
   Anh Khanh: "trong bai nhin xau the nay", "trang brand trong cung xau".
   Bai: bang dau TOI co anh nen + 3 cot (muc luc · ruot · deal).
   Brand: 2 cot — cot trai la logo + nut Shop + o so lieu + menu nhanh.
   ===================================================================== */

/* ---- BANG DAU BAI ---- */
.ahero{position:relative;background-size:cover;background-position:center;background-color:#241f18;
  padding:34px 0 30px;margin-bottom:26px;}
.aveil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,16,12,.94) 0%,rgba(20,16,12,.80) 55%,rgba(20,16,12,.62) 100%);}
.ahero-in{position:relative;max-width:1240px;margin:0 auto;padding:0 24px;display:grid;
  grid-template-columns:1.55fr 1fr;gap:34px;align-items:start;}
.ahero-l{min-width:0;}
.ahero .crumb{color:#d9cdbc;margin-bottom:12px;}
.ahero .crumb a{color:#f0c9b8;}
.ahero h1{font-size:36px;line-height:1.14;font-weight:800;color:#fff;letter-spacing:-.015em;}
.ahero-sub{margin-top:11px;font-size:15px;line-height:1.55;color:#e2d8cb;max-width:56ch;}
.ahero-meta{margin-top:16px;font-size:12.5px;color:#cdc0b0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ahero-meta .av{width:26px;height:26px;border-radius:50%;background:var(--brick);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;}
.ahero-rh,.indeal-h,.sbox-h,.atoc-h,.bbox-h{font-size:11px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.ahero-rh{color:#d9cdbc;}

/* the hang nho — dung o 3 cho: bang dau, trong bai, cot phai */
.dcard{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;margin-bottom:9px;}
.dcard:last-child{margin-bottom:0;}
.dcard img,.dcard .dlogo{width:34px;height:34px;flex:0 0 34px;object-fit:contain;border-radius:8px;}
.dcard .dlogo{display:flex;align-items:center;justify-content:center;background:var(--brick);
  color:#fff;font-weight:800;font-size:14px;}
.dcard .dtxt{min-width:0;flex:1;display:block;}
.dcard .dtxt b{display:block;font-size:14px;font-weight:700;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dcard .dtxt i{font-style:normal;font-size:12px;color:#1a8a5a;font-weight:700;}
.dcard .dmui{color:var(--faint);font-size:18px;line-height:1;}
.dcard .dbtn{background:var(--brick);color:#fff;font-size:12px;font-weight:800;padding:8px 14px;
  border-radius:7px;white-space:nowrap;}
.dcard:hover{border-color:var(--brick);box-shadow:0 3px 12px rgba(36,31,24,.10);}

/* ---- BA COT ---- */
.awrap{max-width:1240px;margin:0 auto;padding:0 24px 54px;display:grid;
  grid-template-columns:210px minmax(0,1fr) 290px;gap:30px;align-items:start;}
.atoc{position:sticky;top:16px;border-left:2px solid var(--line);padding-left:14px;}
.atoc a{display:block;font-size:13.5px;line-height:1.35;font-weight:600;color:var(--body);
  padding:7px 0;}
.atoc a:hover{color:var(--brick);}
.abody{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 30px 24px;
  box-shadow:0 1px 3px rgba(36,31,24,.06);}
.abody h2{font-size:23px;font-weight:800;margin:26px 0 12px;letter-spacing:-.012em;}
.abody h2:first-of-type{margin-top:4px;}
.abody h3{font-size:17px;font-weight:700;margin:18px 0 7px;}
.abody p{font-size:15.5px;line-height:1.68;color:var(--body);margin-bottom:13px;}
.alead{font-size:17px !important;line-height:1.62 !important;color:var(--ink) !important;
  font-weight:500;margin-bottom:18px !important;}
.indeal{background:#f2fbf6;border:1px solid #cdeadb;border-radius:12px;padding:14px 15px 6px;
  margin:20px 0 24px;}
.aside{position:sticky;top:16px;}
.sbox{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 15px 13px;
  margin-bottom:18px;box-shadow:0 1px 3px rgba(36,31,24,.06);}
.sbtn{display:block;text-align:center;background:var(--brick);color:#fff;font-weight:800;
  font-size:13.5px;padding:12px;border-radius:9px;margin-top:12px;}
.sbtn:hover{color:#fff;filter:brightness(1.08);}
.srow{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);}
.srow:last-child{border-bottom:0;}
.srow img{width:54px;height:42px;flex:0 0 54px;object-fit:cover;border-radius:6px;}
.srow span{font-size:13.5px;line-height:1.32;font-weight:600;}
.srow:hover span{color:var(--brick);}

/* ---- TRANG BRAND — CHEP BO CUC haulperk.com/stores/<slug> (03/09 vong 11) ----
   Anh Khanh xem trang cu: "trang brand van qua xau -> lay cua ben haulperk ve di em",
   va chot "be nguyen xi" ke ca o SAO va so nguoi dung.
   Nguon chep: app/stores/[slug]/page.js + app/components/CodeList.js + app/globals.css.
   Doi duy nhat: dung bien mau cua thefoundgood (--brick thay --accent) de khoi mang mot
   mang mau cam la sang mot web dang tong kem (luat 6c).
   ⚠️ NEN TRANG BRAND = NEN KEM #f1e9da CUA CA WEB (doi 03/09 vong 14, anh Khanh: "mau nen
   xam nay k hop lam, chuyen ve mau nen nhu cua trang chu di em").
   Ban dau de #ececec vi so the trang chim vao nen kem — nhung con so "chenh lech ~2%" ay
   la do voi nen CU #f5efe3; vong 11 da ha nen ca web xuong #f1e9da, va trang chu bay gio
   toan the trang tren dung nen do, nhin noi ro. Tuc ly do chon mau xam KHONG con dung nua.
   🛑 Doi mau nay thi phai doi CA hai khuyet tron cua the ma (.code::before/::after) — chung
   la hai cham to mau NEN de gia lam cho cat ve; lech mau la lo ngay hai cham xam tren nen
   kem, ma khong mot dong loi nao (luat 6c). */
.bpage{background:#f1e9da;}
.bpage .cwrap{padding-top:16px;padding-bottom:44px;}
.bhero{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:30px 34px 34px;text-align:center;overflow:hidden;margin:16px 0 0;
  box-shadow:0 1px 3px rgba(15,23,42,.05);}
.bhero h1{font-size:32px;font-weight:800;letter-spacing:-.025em;line-height:1.2;
  max-width:820px;margin:0 auto;}
.bhero h1 .hi{color:var(--brick);}
.bhero p{font-size:14.5px;color:#475569;margin:9px auto 0;max-width:620px;
  font-family:var(--he-thong);}
.bhero p b{color:var(--ink);font-weight:800;}

/* Cham mau rai rac cho hero do trong.
   ⚠️ pointer-events:none BAT BUOC — lop nay phu kin hero (inset:0) va nam DE LEN chu
   ben duoi. Thieu dong nay thi chu khong boi den duoc ma nhin bang mat van binh thuong. */
.confetti{position:absolute;inset:0;overflow:hidden;border-radius:16px;pointer-events:none;}
.confetti i{position:absolute;opacity:.22;}
.confetti .c1{width:34px;height:34px;background:#f97316;top:18px;left:7%;
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);}
.confetti .c2{width:56px;height:56px;border:5px solid #22c55e;
  border-radius:50%;clip-path:inset(0 55% 0 0);top:52px;left:14%;}
.confetti .c3{width:26px;height:24px;background:#60a5fa;bottom:26px;left:10%;
  clip-path:polygon(50% 0,100% 100%,0 100%);}
.confetti .c4{width:30px;height:11px;background:#e11d48;top:26px;right:9%;
  border-radius:3px;transform:rotate(-24deg);}
.confetti .c5{width:46px;height:46px;background:#a855f7;bottom:24px;right:6%;
  clip-path:polygon(48% 0,54% 34%,86% 14%,64% 44%,100% 50%,64% 56%,86% 86%,54% 66%,48% 100%,42% 66%,14% 86%,36% 56%,0 50%,36% 44%,14% 14%,42% 34%);}
.confetti .c6{width:13px;height:13px;background:#fbbf24;top:74px;right:17%;border-radius:50%;}

.bwrap{display:grid;grid-template-columns:290px minmax(0,1fr);gap:24px;align-items:start;
  margin:20px 0 0;font-family:var(--he-thong);}
.bwrap > *{min-width:0;}
.bside{position:sticky;top:16px;display:flex;flex-direction:column;gap:16px;}

/* LOGO NHO LEN DE VAO HERO (kieu tenereteam/haulperk). La con cua .bside chu khong phai
   cua hero: cot trai von da dinh theo man hinh, de trong hero thi cuon xuong la troi mat.
   3 co o chu khong 2 — logo "hoi ngang" (1,6-2,0) nhot vao o chu nhat 216x88 chi lap
   53-63% be ngang, o nhin rong hai ben.
   🛑 PHAI TU CAN GIUA (margin trai/phai auto). Cot .bside la flex doc, con nao co be ngang
   co dinh thi dinh sat MEP TRAI — ma 3 co logo deu hep hon cot 290px (128 / 216 / 168),
   nen o logo lech han sang trai so voi may o trang ben duoi. Do la loi anh Khanh chi
   03/09 ("logo bi lech"): may do khong bao gi ca, chi mat moi thay (luat 5c). */
.blogo{width:128px;height:128px;border-radius:50%;background:#fff;padding:9px;
  border:1px solid var(--line);box-shadow:0 6px 18px rgba(15,23,42,.09);
  display:flex;align-items:center;justify-content:center;margin:-70px auto 0;}
.blogo img{width:100%;height:100%;border-radius:50%;object-fit:contain;background:#fff;padding:6px;}
.blogo .clogo-txt{display:flex;width:100%;height:100%;border-radius:50%;
  align-items:center;justify-content:center;font-size:38px;font-weight:800;color:#fff;}
.blogo.ngang{width:216px;height:88px;border-radius:18px;padding:10px;margin:-58px auto 0;}
.blogo.ngang img{border-radius:11px;padding:4px;}
.blogo.hoingang{width:168px;height:116px;border-radius:18px;padding:10px;margin:-72px auto 0;}
.blogo.hoingang img{border-radius:11px;padding:4px;}

.bbox{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;}
.bbox-h{font-size:14px;font-weight:800;margin-bottom:10px;font-family:var(--he-thong);
  letter-spacing:0;text-transform:none;color:var(--ink);}
.brow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--line);font-size:13.5px;}
.brow:last-child{border-bottom:0;}
.brow span{color:#57534e;}
.brow b{font-weight:800;}
.bbox.glance .brow b{font-size:23px;line-height:1.1;letter-spacing:-.02em;}
.bbox.glance .brow.ngay b{font-size:13.5px;}
.bbox.glance .brow.tien b{color:#047857;}
.bmenu{display:block;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:600;}
.bmenu:last-child{border-bottom:0;}

/* O SAO — anh Khanh chot 03/09 "be nguyen xi". Diem/phieu lay tu kho (brands.rating/votes,
   la SO MOI do may sinh — xem lib/so-moi.js). Khong khai aggregateRating cho Google:
   khai sao vang khong co that la loai Google phat tay, ma phat tay thi mat ca tai khoan
   ads (luat 12f). Hien cho khach doc thi duoc, khai cho may thi khong. */
.brate{text-align:center;padding:16px 18px;}
.brate .sao{font-size:20px;letter-spacing:2px;color:#f59e0b;line-height:1;}
.brate .diem{display:block;font-size:19px;font-weight:800;margin-top:7px;}
.brate .phieu{display:block;font-size:11.5px;color:var(--faint);margin-top:3px;}
.bshop{display:block;text-align:center;background:var(--brick);color:#fff !important;
  font-weight:800;font-size:14.5px;padding:14px;border-radius:11px;}
.bshop:hover{filter:brightness(1.08);}
.btrust .trow{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;
  color:#57534e;line-height:1.5;padding:5px 0;}
.bstep{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#57534e;
  line-height:1.5;padding:6px 0;}
.bstep .sn{flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:var(--ink);
  color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;}

.bmain{min-width:0;}
.bchips{display:flex;gap:9px;margin:0 0 16px;flex-wrap:wrap;align-items:center;}
.bchip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;
  font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;font-family:inherit;}
.bchip.on{background:var(--ink);border-color:var(--ink);color:#fff;}
/* Cham tron o chip DANG CHON — nen den thoi chua du ro khi luot nhanh, them cham la mat
   bat duoc ngay. Ve bang ::before de HTML tinh khong phai sinh them the, va khong phai
   them/bot the moi lan bam (luat: mot nguon su that cho trang thai chon). */
.bchip.on::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#fff;margin-right:7px;vertical-align:middle;}
.lastchk{margin-left:auto;font-size:12px;color:var(--faint);font-weight:600;}
.bsec{font-size:13px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;
  margin:0 0 12px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-family:var(--he-thong);}
.bsec .date{font-size:11.5px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--faint);}
.bsec + .bsec{margin-top:24px;}

/* ═══ THE MA HINH TAM VE ═══ 2 khuyet tron o giua canh tren-duoi + ke dut doc.
   Khuyet tron phai TRUNG toa do duong ke dut: padding-trai 16 + cot o gia tri 150 = 166px. */
.code{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:14px 16px;margin-bottom:13px;box-shadow:0 1px 3px rgba(15,23,42,.05);}
.code::before,.code::after{content:"";position:absolute;left:166px;width:18px;height:18px;
  border-radius:50%;background:#f1e9da;border:1px solid var(--line);}
.code::before{top:-10px;clip-path:inset(50% 0 0 0 round 0 0 9px 9px);}
.code::after{bottom:-10px;clip-path:inset(0 0 50% 0 round 9px 9px 0 0);}
.code.toppick{border:2px solid var(--brick);box-shadow:0 4px 14px rgba(176,69,42,.13);}
.crow{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:16px;align-items:center;}
.code h3{font-size:17.5px;font-weight:700;line-height:1.32;font-family:var(--he-thong);}
.cmid{min-width:0;}

/* O VANG gia tri uu dai — khach luot thay SO truoc, doc chu sau */
.dtile{align-self:stretch;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px;padding:14px 8px;border-right:2px dashed var(--line);text-align:center;}
.dtile .dtop{font-size:12.5px;font-weight:900;letter-spacing:.1em;color:var(--brick);text-transform:uppercase;}
.dtile .dbig{font-size:50px;font-weight:900;line-height:1.02;color:#111827;letter-spacing:-.035em;}
.dtile .dbig.sm{font-size:23px;letter-spacing:-.01em;}
.dtile .dchip{margin-top:8px;background:var(--brick);color:#fff;font-size:14px;font-weight:900;
  letter-spacing:.06em;border-radius:5px;padding:4px 17px;transform:rotate(-2.5deg);
  box-shadow:0 2px 6px rgba(176,69,42,.35);}
.dtile .dtem{font-style:italic;font-size:15px;font-weight:800;color:var(--brick);line-height:1.25;}

/* Badge gop 1 hang. LUAT MAU: CAM chi danh cho thu RA TIEN (nut GET CODE, nut Shop,
   o % giam). Nhan phan loai chi de doc nen ve xanh — cam rai khap noi thi chang con
   cho nao noi len nua. */
.bdgrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.bdg{font-size:10px;font-weight:900;letter-spacing:.04em;border-radius:999px;padding:4px 11px;
  color:#fff;white-space:nowrap;}
.bdg.top{background:#111827;}
.bdg.staff{background:#7c3aed;}
.bdg.kind{background:#2563eb;}
.bdg.kind.deal{background:#059669;}
.vmeta{display:flex;gap:12px;align-items:center;margin-top:7px;flex-wrap:wrap;}
.verified{color:#059669;font-size:11.5px;font-weight:800;display:inline-flex;align-items:center;gap:4px;}
.verified .shield{flex-shrink:0;}
.usesn{font-size:12px;color:var(--muted);font-weight:600;}
.cdesc{font-size:12.5px;color:#6b7280;line-height:1.6;margin-top:8px;}
.cdesc.clip{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.showmore{background:none;border:0;padding:2px 0 0;color:#10b981;font-size:11.5px;
  font-weight:600;cursor:pointer;font-family:inherit;display:none;}
.showmore.co{display:block;}
.showmore:hover{text-decoration:underline;}

.showbtn{display:flex;align-items:stretch;}
.showbtn .peek{background:#fff7ed;border:2px dashed #fed7aa;border-right:0;
  border-radius:10px 0 0 10px;padding:0 12px;display:flex;align-items:center;
  font-weight:800;color:#c2410c;letter-spacing:.12em;font-size:13px;}
.showbtn .lbl{background:var(--brick);color:#fff;font-weight:800;border-radius:0 10px 10px 0;
  padding:12px 18px;font-size:13.5px;white-space:nowrap;}
.showbtn:hover .lbl{filter:brightness(1.08);}
.showbtn .lbl .arr{font-size:12px;opacity:.85;}
.showbtn.nopeek .lbl{border-radius:10px;}
.vbar{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;
  padding:9px 14px;border:1px solid var(--line);border-radius:11px;background:#fafbfc;
  font-size:12.5px;color:var(--muted);font-weight:600;}
.avstack{display:flex;flex:0 0 auto;}
.avstack img,.avstack i{width:22px;height:22px;border-radius:50%;border:2px solid #fff;
  margin-left:-7px;font-style:normal;font-size:9.5px;font-weight:800;color:#fff;
  display:flex;align-items:center;justify-content:center;object-fit:cover;}
.avstack img:first-child,.avstack i:first-child{margin-left:0;}
.bempty{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;
  text-align:center;color:var(--muted);font-size:14px;}

@media(max-width:1100px){
  .awrap{grid-template-columns:minmax(0,1fr) 280px;}
  .atoc{display:none;}
}
@media(max-width:900px){
  .ahero-in{grid-template-columns:1fr;gap:20px;}
  .ahero h1{font-size:27px;}
  .awrap{grid-template-columns:1fr;gap:22px;padding-bottom:40px;}
  .aside,.bside,.atoc{position:static;}
  .bwrap{grid-template-columns:1fr;}
  .abody{padding:18px 16px 16px;}
  .bhero{padding:22px 18px 26px;}
  .bhero h1{font-size:24px;}
  /* ⚠️ MÀN HẸP PHẢI TRẢ LẠI margin-top:0 CHO LOGO. Ở màn rộng logo nằm ở CỘT TRÁI, cạnh
     khối hero, nên kéo âm 58-72px là nó nhô lên đè vào hero — đúng ý. Màn hẹp thì hai
     khối XẾP CHỒNG, kéo âm thành logo chui TỤT XUỐNG DƯỚI khối hero và bị che mất nửa
     trên (soi ảnh chụp 390px mới thấy; máy đo vẫn báo 0 tràn · 0 ảnh vỡ — luật 5c).
     Khai cả 3 cỡ ô vì luật gốc đặt margin-top riêng cho từng cỡ (luật 8). */
  .blogo,.blogo.ngang,.blogo.hoingang{margin:0 auto;}
  .dtile .dbig{font-size:40px;}
}
/* ⚠️ NUT LAY MA LOI KHOI MEP DIEN THOAI. Hang ma xep 3 cot ngang, tren man 360-390px
   thi cot chu + nut GET CODE cong lai rong ~395px -> chinh CAI NUT RA TIEN bi day ra
   ngoai man. Xep 2 tang: chu o tren, nut full be ngang o duoi (luat 7: uu tien dien thoai).
   Va phai TAT hai khuyet tron: chung ghim cung o left:166px, xuong 1 cot la lech han. */
@media(max-width:560px){
  .crow{grid-template-columns:1fr;gap:10px;}
  .dtile{border-right:0;border-bottom:2px dashed var(--line);padding:10px 8px 14px;
    flex-direction:row;gap:10px;}
  .dtile .dchip{margin-top:0;}
  .code::before,.code::after{display:none;}
  .showbtn{width:100%;}
  .showbtn .lbl{flex:1;text-align:center;padding:12px 10px;}
  .bsec{flex-direction:column;align-items:flex-start;gap:3px;}
  .lastchk{margin-left:0;width:100%;}
}

/* ---- TRANG CHU 2 COT (03/09 vong 9) ----
   Anh Khanh: "trang chu van thay thieu thieu". Ban cu la MOT cot, 8 khoi xep noi duoi
   nhau cung be ngang cung nhip -> doc xuong deu deu, khong co diem dung mat.
   Nay cot phai DINH theo man, va cot do CHI BAY BAI + so lieu — khong bay hang/ma, vi
   trang chu la cho dung hinh anh "web review", khong phai cho cau keo deal. */
.hwrap{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:30px;align-items:start;}
.hmain{min-width:0;}
.hside{position:sticky;top:16px;}
.hside .srow img{width:62px;height:48px;flex:0 0 62px;}
.sall{display:block;margin-top:11px;padding-top:11px;border-top:1px solid var(--line);
  font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brick);}
.schip{display:flex;flex-wrap:wrap;gap:7px;}
.schip a{display:inline-flex;align-items:center;gap:6px;background:var(--paper);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;
  font-family:var(--sans);font-size:12.5px;font-weight:600;}
.schip a i{font-style:normal;font-size:11px;color:var(--faint);font-weight:700;}
.schip a:hover{border-color:var(--brick);color:var(--brick);}
.strust .brow{font-size:13px;}
.snote{font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted);margin-top:11px;}
/* trong cot hep thi dai 4 the xuong con 2, dai 6 the xuong con 2 */
@media(min-width:901px){
  .hmain .pick4,.hmain .catrow{grid-template-columns:repeat(3,1fr);}
  .hmain .cat3{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:1180px){.hwrap{grid-template-columns:minmax(0,1fr) 290px;gap:22px;}}
@media(max-width:900px){
  .hwrap{grid-template-columns:1fr;gap:0;}
  .hside{position:static;margin-top:8px;}
}

/* ---- BE NGANG + NUT KHOI "What we recommend" (03/09 vong 9) ----
   Anh Khanh: "be ngang hoi nho, haulperk rong hon" va "nut SEE DEAL / VISIT SITE trong
   xau va lac que". Do ban dang chay: khung 1240px, con haulperk ~1400px.
   Nut cu la mot nut DEN dac + mot nut vien den xep doc — den la mau khong co o dau khac
   tren web nay, nen doc len la lac. Nay: mot nut CAM (dung mau chu dao) + mot dong chu
   thuong co mui ten, xep NGANG. */
.cwrap,.awrap,.ahero-in,.masthead-in,.mnav .wrap,.ubar .wrap,.wrap{max-width:1400px;}
.awrap{grid-template-columns:230px minmax(0,1fr) 320px;gap:34px;}

.picks{border-radius:12px;background:#fff;}
.pick{align-items:flex-start;gap:14px;padding:16px 0;}
.pick .pm b{font-size:16.5px;}
.pick .pb{flex-direction:row;align-items:center;gap:14px;align-self:center;}
.pick .pb a.main{background:var(--brick);color:#fff;font-family:var(--sans);font-size:13px;
  font-weight:800;padding:10px 18px;border-radius:9px;border:0;white-space:nowrap;}
.pick .pb a.main:hover{color:#fff;filter:brightness(1.08);}
.pick .pb a.alt{background:0;border:0;padding:0;font-family:var(--sans);font-size:12.5px;
  font-weight:700;color:var(--muted);white-space:nowrap;}
.pick .pb a.alt:after{content:" ↗";}
.pick .pb a.alt:hover{color:var(--brick);}
@media(max-width:1180px){.awrap{grid-template-columns:minmax(0,1fr) 300px;}.atoc{display:none;}}
@media(max-width:760px){
  .pick{flex-wrap:wrap;}
  .pick .pb{width:100%;justify-content:flex-start;margin-top:8px;}
}

/* =====================================================================
   FONT HE THONG + NOI KHOI (03/09 vong 6 — anh Khanh: "doi ve font he
   thong cho de nhin", "muc/bai o trang chu can noi khoi len", "may mau
   nay bi chim xuong nen qua, de giong haulperk cung duoc").
   Khoi nay dat CUOI file de de len moi luat phia tren (cung do dam thi
   luat viet sau thang — luat 8).
   ===================================================================== */

/* ① FONT. Web goc dung Newsreader (serif) cho than bai va Libre Franklin cho chu nho.
   Doi ca hai ve font co san cua may: chu ro hon, va het mot luot tai font tu Google.
   🛑 GIU nguyen font cho TEN BAO o bang dau (.masthead .mh): do la LOGO cua web, va no
   con xuat hien tren 57 trang cu (/about/, /stories/) ma minh khong dung file CSS nay —
   doi mot ben la mot web hai kieu logo (luat 6c). */
:root{
  --he-thong:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",
    "Noto Sans",Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  --sans:var(--he-thong);
}
body{font-family:var(--he-thong);}
h1,h2,h3,h4,.chead h1,.band-h h2,.rcard h3,.hrow h3,.hero-big h2,.cbody h2,.cbody h3{
  font-family:var(--he-thong);letter-spacing:-.011em;}
.masthead .mh{font-family:'Newsreader',Georgia,serif;}
/* Chu cuoi cua ten bao to mau gach — xem chu thich o TEN_HAI_MAU phia tren file.
   ⚠️ style.css ben kia co luat .masthead .mh a:hover{color:var(--ink)} — the con nay khai
   mau rieng nen re chuot vao KHONG bi doi ve den. Do la y muon: ten bao khong nhap nhay. */
.masthead .mh .mh-nhan{color:var(--brick);}
.cbody{font-size:16px;line-height:1.62;}

/* ② NEN + KHOI NOI. Nen cu #f5efe3 gan bang mau the (#fbf7ee) nen the chim han xuong
   nen — do duoc: chenh lech do sang chi ~2%. Nay ha nen xuong mot bac va cho the nen
   TRANG han, giong haulperk. */
body{background:#f1e9da;}
.band{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:20px 22px 22px;margin-bottom:20px;box-shadow:0 1px 3px rgba(36,31,24,.06);}
.band-h{border-bottom:2px solid var(--ink);}
.band-h h2{font-size:20px;font-weight:800;display:flex;align-items:center;gap:8px;}
.band-sub{margin-bottom:14px;}

/* ③ THE BAI noi khoi: vien + bo goc + anh trom mep, chu co dem hai ben */
.rcard{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  padding-bottom:13px;transition:box-shadow .15s,border-color .15s;}
.rcard img{margin-bottom:11px;border-radius:0;}
.rcard .kick,.rcard h3,.rcard p,.rcard .meta{padding-left:13px;padding-right:13px;}
.rcard:hover{border-color:var(--brick);box-shadow:0 4px 14px rgba(36,31,24,.10);}
.hrow{padding:11px 10px;border-radius:8px;border-bottom:1px solid var(--line);}
.hrow:hover{background:#faf6ee;}

/* ④ O NGANH · TIEM · CHIP: cho noi han len khoi nen trang */
.store,.chip{background:#fff;}
.store{border-radius:10px;}
.store:hover{box-shadow:0 4px 14px rgba(36,31,24,.10);}
.chip{border-radius:999px;padding:9px 15px;}
.chip:hover{background:#fff5ef;}
.save a{border-radius:10px;overflow:hidden;}

/* ---- TRANG CHU BO CUC TAP CHI (03/09 vong 12) ----
   Anh Khanh: "trang chu bo cuc cu anh thay kha dep -> em hoc tap nhe".
   Bo cuc muon nguyen cua style.css web anh (.lead-grid .seccol .rail .secband .grid4
   .pair .listrows) nen o day CHI khai mot vai cho noi: khoang chua duoi cung, va khoang
   dem cho 3 khoi cua RIENG minh (.save .stores .chips) khi chung nam trong .secband —
   .grid4 co san padding-top:20px, ba khoi kia thi khong. */
.hpage{padding-bottom:56px;}
.secband > .save,.secband > .stores,.secband > .chips{padding-top:20px;}
/* Bang xep hang cot phai: bo gach chan dong cuoi cho gon */
.rank li:last-child{border-bottom:0;}

/* Khoi hero khong nam trong .band nen phai tu noi khoi lay */
.hero2{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;
  box-shadow:0 1px 3px rgba(36,31,24,.06);margin-bottom:20px;}
.hero-big{border-radius:10px;}

/* 2 luat .codes .code da go 03/09 cung khoi the ma cu — khong con noi nao sinh ra .codes */
@media(max-width:760px){
  .band{padding:16px 14px 18px;border-radius:10px;}
  .hero2{padding:12px;}
}

/* ---- PHAN DUOI TRANG CHU VE KIEU KHOI TRANG (03/09 vong 13) ----
   Anh Khanh: "tu phan duoi nay lai phai lam theo phong cach cu cua minh chu em",
   kem 3 ten khoi chot san: ⭐ Editor's picks · 🔥 Today's biggest savings · 📈 Trending now.
   🛑 KHONG khai bo khung moi: .band/.band-h/.band-sub o tren ĐA la "the trang bo goc"
   kieu haulperk (dung tu vong 11), .band-h h2 da co flex+gap san cho emoji. Khai them mot
   bo .hblk nua la HAI bo luat cho cung mot thu, mai kia doi tong thi lech (luat 6c).
   Duoi day chi la vai luat cho ba kieu RUOT moi + cai hop hero. */

/* Hero noi khoi len — anh Khanh: "em lam noi khoi len 1 chut nhe cho noi bat".
   .lead-grid la bo cuc muon cua style.css web anh, khong dung den; boc no bang mot hop
   trang rieng thi khong phai sua mot dong nao cua ben do. */
.leadbox{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:0 22px 22px;margin:20px 0;box-shadow:0 1px 3px rgba(36,31,24,.06);}
.leadbox .lead-grid{padding-top:22px;}

/* Ruot ①: luoi 4 the (Editor's picks). Bo doan tom tat cho the gon nhu ben haulperk. */
.hg4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.hg4 .rcard img{aspect-ratio:4/3;}
.hg4 .rcard h3{font-size:16.5px;line-height:1.3;}
.hg4 .rcard p{display:none;}
.rcard.top{position:relative;}
.rcard.top::before{content:"TOP PICK";position:absolute;top:9px;left:9px;z-index:2;
  background:var(--brick);color:#fff;font-size:10px;font-weight:800;letter-spacing:.09em;
  padding:4px 9px;border-radius:4px;}

/* Ruot ②: mot bai lon + 3 dong nho — khoi tung nganh.
   ⚠️ Anh 16/9 de tu do thi the ben trai cao ~420px, cot 3 dong ben phai chi ~290px → thua
   mot mang trang to bang nua khoi (do 03/09 bang anh chup, may do "0 tran 0 vo" khong he
   bao — luat 5c). Nen: ep chieu cao anh, cho hai cot CUNG cao (stretch) roi rai deu 3 dong. */
.hnch{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:stretch;}
/* Cat anh LECH LEN TREN (object-position 50% 30%): cat o giua thi anh chup NGUOI hay bi
   mat dau, con phan duoi khung hinh thi vao. Do 03/09: anh bai plus-size bi cat con moi
   khuc nguc. ⚠️ KHONG go dau nhay nguoc vao chu thich trong khoi CSS nay — ca khoi la MOT
   chuoi mo bang dau nhay nguoc, go mot cai la dong chuoi som va vo nguyen file (luat 10b). */
.hnch > .rcard img{aspect-ratio:auto;height:296px;object-position:50% 30%;}
.hlist{display:flex;flex-direction:column;justify-content:space-between;}
.hlist .hrow img{width:116px;height:86px;flex:0 0 116px;}
.hlist .hrow:last-child{border-bottom:0;}

/* The bai nam TRONG khoi trang: doi nen kem, khong thi trang chong trang khong thay vien */
.band .rcard{background:var(--paper);}
.band .rgrid{margin:0;grid-template-columns:repeat(3,1fr);}
.band > .save,.band > .stores,.band > .chips{padding-top:2px;}

@media(max-width:900px){
  .hg4{grid-template-columns:repeat(2,1fr);}
  .hnch{grid-template-columns:1fr;gap:18px;}
  .band .rgrid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:760px){
  .hg4{grid-template-columns:1fr;}
  .band .rgrid{grid-template-columns:1fr;}
  .leadbox{padding:0 14px 16px;border-radius:10px;margin:14px 0;}
}