/* ==========================================================================
   TRANG MINH — TRANG CHỦ MỚI
   Dựng theo bản mẫu _GIAO-DIEN-MOI/xem-truoc.html (khối trang chủ).

   MỌI quy tắc đều nằm dưới `.tm-tc-trang` — lớp chỉ có trên trang chủ mới.
   Tắt plugin là lớp này biến mất, giao diện trở lại y như cũ.

   Bảng màu: lấy phương án "xanh dương" của bản mẫu, trùng màu thương hiệu
   (#1F4FD8 + vàng) mà header và chân trang của theme đang dùng, để trang chủ
   mới không lạc điệu với phần còn lại của web.
   ========================================================================== */

.tm-tc-trang{
  /* Màu chính */
  --chinh:#1F4FD8;
  --chinh-dam:#1740B4;
  --chinh-nhat:#E8EEFD;

  /* Màu phụ (ấm) */
  --phu:#F59E0B;
  --phu-dam:#D97F06;
  --phu-nhat:#FFF4E0;

  /* Khuyến mãi */
  --do:#F0344F;
  --vang:#FFC93C;
  --vang-nhat:#FFF8E4;

  /* Chữ */
  --tieu-de:#0E2464;
  --chu:#5C6B80;
  --chu-nhat:#93A0B2;
  --chu-rat-nhat:#B9C3D0;

  /* Nền & viền */
  --nen-xam:#F6F8FA;
  --nen-kem:#FFF6EC;
  --vien:#E8ECF1;

  /* Màu vui cho ngôi sao độ tuổi */
  --v-1:#1F4FD8; --v-2:#FF7EB6; --v-3:#22C55E;
  --v-4:#F0344F; --v-5:#0EA5E9; --v-6:#F59E0B;

  --rong:var(--wrap,1440px);
  --bo:14px;
  --bo-to:24px;
  --bo-tron:999px;
  --bong-1:0 1px 2px rgba(14,36,100,.05), 0 2px 6px rgba(14,36,100,.04);
  --bong-2:0 6px 20px rgba(14,36,100,.09);
  --bong-3:0 16px 44px rgba(14,36,100,.14);
  --muot:cubic-bezier(.4,0,.2,1);

  color:var(--chu);
  font-size:16px;
  line-height:1.65;
}

/* --------------------------------------------------------- NỀN TẢNG      */
.tm-tc-trang *,
.tm-tc-trang *::before,
.tm-tc-trang *::after{box-sizing:border-box}
.tm-tc-trang img,
.tm-tc-trang svg{max-width:100%;height:auto;display:block}
.tm-tc-trang a{color:inherit;text-decoration:none;transition:color .2s var(--muot)}
.tm-tc-trang button{cursor:pointer;background:none;border:0;padding:0;font:inherit;color:inherit}
.tm-tc-trang p{margin:0 0 1em}
.tm-tc-trang h1,
.tm-tc-trang h2,
.tm-tc-trang h3{margin:0 0 .5em;font-family:var(--ff-display,inherit);font-weight:700;line-height:1.2;color:var(--tieu-de)}
.tm-tc-trang h1,
.tm-tc-trang .hero-tieu{font-size:clamp(26px,3.4vw,44px)}
.tm-tc-trang h2{font-size:clamp(23px,2.6vw,36px)}
.tm-tc-trang h3{font-size:clamp(17px,1.6vw,21px)}
.tm-tc-trang :focus-visible{outline:3px solid var(--phu);outline-offset:2px;border-radius:4px}

.tm-tc-trang .khung{width:100%;max-width:var(--rong);margin-inline:auto;padding-inline:16px}
.tm-tc-trang .muc{padding-block:clamp(34px,4.4vw,64px)}
.tm-tc-trang .muc--hep{padding-block:clamp(24px,3vw,40px)}
.tm-tc-trang .muc--kem{background:var(--nen-kem)}
.tm-tc-trang .muc--xam{background:var(--nen-xam)}
.tm-tc-trang .muc--hero{padding-block:clamp(14px,2vw,26px)}
.tm-tc-trang .tm-tc-giua{text-align:center;margin-top:clamp(20px,2.6vw,32px)}

/* Đầu mục */
.tm-tc-trang .dau-muc{margin-bottom:clamp(20px,2.6vw,32px)}
.tm-tc-trang .dau-muc--giua{text-align:center;max-width:640px;margin-inline:auto}
.tm-tc-trang .dau-muc--hang{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tm-tc-trang .dau-muc--phang{margin:0}
.tm-tc-trang .dau-muc h2{margin:0 0 6px}
.tm-tc-trang .dau-muc p{margin:0;font-size:15px;color:var(--chu-nhat)}
.tm-tc-trang .dau-muc--chinh h2,
.tm-tc-trang .dau-muc--chinh p{color:#fff}
.tm-tc-trang .dau-muc--chinh p{opacity:.88}
.tm-tc-trang .nhan-muc{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--phu);margin-bottom:8px;
}
.tm-tc-trang .nhan-muc svg{width:14px;height:14px;flex:none}
.tm-tc-trang .nhan-muc::before,
.tm-tc-trang .nhan-muc::after{content:'';width:18px;height:2px;background:var(--phu);border-radius:2px;flex:none}
.tm-tc-trang .dau-muc--hang .nhan-muc::after{display:none}

/* --------------------------------------------------------- NÚT           */
.tm-tc-trang .nut{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:var(--bo-tron);
  font-size:15px;font-weight:600;line-height:1;
  border:2px solid transparent;
  transition:all .22s var(--muot);
  white-space:nowrap;
}
.tm-tc-trang .nut svg{width:16px;height:16px;flex:none;transition:transform .22s var(--muot)}
.tm-tc-trang .nut:hover svg{transform:translateX(3px)}
.tm-tc-trang .nut--chinh{background:var(--chinh);color:#fff;box-shadow:0 4px 14px rgba(31,79,216,.28)}
.tm-tc-trang .nut--chinh:hover{background:var(--chinh-dam);color:#fff;transform:translateY(-2px)}
.tm-tc-trang .nut--trang{background:#fff;color:var(--tieu-de);box-shadow:var(--bong-2)}
.tm-tc-trang .nut--trang:hover{color:var(--chinh);transform:translateY(-2px)}
.tm-tc-trang .nut--vien{background:#fff;color:var(--tieu-de);border-color:var(--vien)}
.tm-tc-trang .nut--vien:hover{border-color:var(--chinh);color:var(--chinh)}
.tm-tc-trang .nut--kinh{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.55)}
.tm-tc-trang .nut--kinh:hover{background:rgba(255,255,255,.26);color:#fff}
.tm-tc-trang .nut--nho{padding:9px 18px;font-size:14px}
.tm-tc-trang .nut--rong{width:100%}

/* --------------------------------------------------------- 1. DẢI CHẠY   */
.tm-tc-trang .dai-chay{background:var(--phu);color:#fff;overflow:hidden;padding:12px 0}
.tm-tc-trang .dai-chay > div{display:flex;gap:40px;white-space:nowrap;animation:tmtc-chay 34s linear infinite;width:max-content}
.tm-tc-trang .dai-chay span{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:700}
.tm-tc-trang .dai-chay svg{width:17px;height:17px;flex:none}
@keyframes tmtc-chay{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tm-tc-trang .dai-chay:hover > div{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .tm-tc-trang .dai-chay > div{animation:none;flex-wrap:wrap;white-space:normal;width:auto;justify-content:center;gap:10px 28px}
}

/* --------------------------------------------------------- 2. HERO       */
.tm-tc-trang .hero-khung{position:relative;border-radius:var(--bo-to);overflow:hidden;background:var(--chinh)}
.tm-tc-trang .hero-slide{
  display:none;position:relative;
  min-height:clamp(320px,34vw,440px);
  padding:clamp(26px,4vw,56px);
  align-items:center;
}
.tm-tc-trang .hero-slide.hien{display:flex;animation:tmtc-hien .45s var(--muot)}
@keyframes tmtc-hien{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tm-tc-trang .hero-slide--ngoc{background:linear-gradient(120deg,#2E63EE 0%,#1F4FD8 60%,#1740B4 100%)}
.tm-tc-trang .hero-slide--cam{background:linear-gradient(120deg,#F9971C 0%,#F7820A 60%,#EE6F05 100%)}
.tm-tc-trang .hero-slide--hong{background:linear-gradient(120deg,#FF8FC2 0%,#FF6FAE 60%,#F2559A 100%)}

/* Ảnh banner thật làm nền, phủ một lớp tối nhẹ để chữ luôn đọc được. */
.tm-tc-trang .hero-nen{position:absolute;inset:0;z-index:1}
.tm-tc-trang .hero-nen img{width:100%;height:100%;object-fit:cover}
.tm-tc-trang .hero-nen::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(8,20,60,.86) 0%,rgba(8,20,60,.74) 30%,rgba(8,20,60,.42) 56%,rgba(8,20,60,.08) 80%,rgba(8,20,60,0) 100%);
}
.tm-tc-trang .hero-chu{position:relative;z-index:3;max-width:620px;color:#fff}
.tm-tc-trang .hero-nhan{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--vang);color:#6B4500;
  padding:7px 17px;border-radius:var(--bo-tron);
  font-size:14px;font-weight:800;margin-bottom:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.tm-tc-trang .hero-chu .hero-tieu{color:#fff;margin:0 0 14px;text-shadow:0 2px 14px rgba(0,0,0,.28)}
.tm-tc-trang .hero-chu .hero-tieu em{display:block;font-style:normal;font-weight:600;opacity:.95}
.tm-tc-trang .hero-chu p{font-size:clamp(15px,1.3vw,17px);color:rgba(255,255,255,.94);margin:0 0 22px;max-width:520px}
.tm-tc-trang .hero-nut{display:flex;gap:12px;flex-wrap:wrap}

.tm-tc-trang .hero-cham{position:absolute;left:clamp(26px,4vw,56px);bottom:clamp(18px,2.4vw,28px);z-index:4;display:flex;gap:8px}
.tm-tc-trang .hero-cham button{width:10px;height:10px;border-radius:var(--bo-tron);background:rgba(255,255,255,.45);transition:all .25s var(--muot)}
.tm-tc-trang .hero-cham button[aria-current="true"]{width:30px;background:#fff}
.tm-tc-trang .hero-mui{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;color:var(--tieu-de);
  box-shadow:var(--bong-2);transition:all .2s var(--muot);
}
.tm-tc-trang .hero-mui:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.tm-tc-trang .hero-mui svg{width:18px;height:18px}
.tm-tc-trang .hero-mui--trai{left:14px}
.tm-tc-trang .hero-mui--trai svg{transform:rotate(180deg)}
.tm-tc-trang .hero-mui--phai{right:14px}
.tm-tc-trang .hero-uu-dai{
  position:absolute;right:clamp(16px,3vw,48px);bottom:clamp(18px,2.4vw,28px);z-index:4;
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;max-width:min(46%,420px);
}
.tm-tc-trang .hero-uu-dai span{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.95);color:var(--tieu-de);
  padding:7px 14px;border-radius:var(--bo-tron);
  font-size:13px;font-weight:700;box-shadow:var(--bong-2);text-align:left;
}
.tm-tc-trang .hero-uu-dai svg{width:15px;height:15px;flex:none;color:var(--chinh)}

/* --------------------------------------------------------- 3. CAM KẾT    */
.tm-tc-trang .cam-ket{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:clamp(18px,2.4vw,30px) 0}
.tm-tc-trang .ck{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:var(--bo)}
.tm-tc-trang .ck:nth-child(1){background:var(--phu-nhat)}
.tm-tc-trang .ck:nth-child(2){background:#EAF2FF}
.tm-tc-trang .ck:nth-child(3){background:#E9FBF0}
.tm-tc-trang .ck:nth-child(4){background:#FFEDF5}
.tm-tc-trang .ck-icon{width:52px;height:52px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:var(--bong-1)}
.tm-tc-trang .ck-icon svg{width:24px;height:24px}
.tm-tc-trang .ck:nth-child(1) .ck-icon svg{color:var(--phu)}
.tm-tc-trang .ck:nth-child(2) .ck-icon svg{color:var(--chinh)}
.tm-tc-trang .ck:nth-child(3) .ck-icon svg{color:var(--v-3)}
.tm-tc-trang .ck:nth-child(4) .ck-icon svg{color:var(--v-2)}
.tm-tc-trang .ck b{display:block;font-size:16px;font-weight:700;color:var(--tieu-de);line-height:1.3}
.tm-tc-trang .ck > span > span{display:block;font-size:13.5px;color:var(--chu);line-height:1.45}

/* --------------------------------------------------------- 4. DANH MỤC   */
.tm-tc-trang .muc-dm{background:var(--chinh);position:relative;overflow:hidden}
.tm-tc-trang .luoi-dm{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.tm-tc-trang .the-dm{
  background:#fff;border-radius:var(--bo);padding:20px 12px 18px;
  text-align:center;transition:transform .25s var(--muot),box-shadow .25s var(--muot);
}
.tm-tc-trang .the-dm:hover{transform:translateY(-6px);box-shadow:var(--bong-3)}
.tm-tc-trang .dm-vong{
  width:92px;height:92px;border-radius:50%;margin:0 auto 13px;
  background:var(--chinh-nhat);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.tm-tc-trang .dm-vong img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--muot)}
.tm-tc-trang .the-dm:hover .dm-vong img{transform:scale(1.1)}
.tm-tc-trang .the-dm b{display:block;font-size:15px;font-weight:700;color:var(--tieu-de);line-height:1.35;margin-bottom:3px}
.tm-tc-trang .the-dm > span:last-child{font-size:12.5px;color:var(--chu-nhat)}
.tm-tc-trang .the-dm:nth-child(6n+2) .dm-vong{background:#FFEDF5}
.tm-tc-trang .the-dm:nth-child(6n+3) .dm-vong{background:var(--phu-nhat)}
.tm-tc-trang .the-dm:nth-child(6n+4) .dm-vong{background:#E9FBF0}
.tm-tc-trang .the-dm:nth-child(6n+5) .dm-vong{background:var(--vang-nhat)}
.tm-tc-trang .the-dm:nth-child(6n+6) .dm-vong{background:#EDE9FE}

/* --------------------------------------------------------- 5. THẺ SP     */
.tm-tc-trang .luoi-sp{display:grid;gap:18px;grid-template-columns:repeat(5,1fr)}
.tm-tc-trang .the-sp{
  background:#fff;border:1px solid var(--vien);border-radius:var(--bo);
  overflow:hidden;display:flex;flex-direction:column;position:relative;
  transition:transform .25s var(--muot),box-shadow .25s var(--muot),border-color .25s;
}
.tm-tc-trang .the-sp:hover{transform:translateY(-5px);box-shadow:var(--bong-2);border-color:transparent}
.tm-tc-trang .the-sp[hidden]{display:none}
.tm-tc-trang .sp-anh{position:relative;display:block;aspect-ratio:1/1;background:var(--nen-xam);overflow:hidden}
.tm-tc-trang .sp-anh img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--muot)}
.tm-tc-trang .the-sp:hover .sp-anh img{transform:scale(1.07)}
.tm-tc-trang .sp-giam{
  position:absolute;top:10px;right:10px;z-index:2;
  background:var(--do);color:#fff;font-size:12.5px;font-weight:800;
  padding:4px 9px;border-radius:7px;line-height:1.2;
  box-shadow:0 2px 8px rgba(240,52,79,.35);
}
.tm-tc-trang .sp-nhan{position:absolute;top:10px;left:10px;z-index:2;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.tm-tc-trang .nhan{font-size:11.5px;font-weight:800;padding:4px 9px;border-radius:7px;line-height:1.2;text-transform:uppercase;letter-spacing:.03em;background:var(--chinh);color:#fff}
.tm-tc-trang .nhan--new{background:var(--v-3);color:#fff}
.tm-tc-trang .nhan--hot{background:var(--phu);color:#fff}
.tm-tc-trang .nhan--best{background:var(--v-2);color:#fff}
.tm-tc-trang .nhan--top{background:var(--vang);color:#6b4500}
.tm-tc-trang .nhan--out{background:var(--chu-nhat);color:#fff}

.tm-tc-trang .sp-than{padding:13px 14px 14px;display:flex;flex-direction:column;flex:1;gap:5px}
.tm-tc-trang .sp-dm{font-size:12px;font-weight:600;color:var(--chu-rat-nhat);line-height:1.3;margin:0;
  display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.tm-tc-trang .sp-ten{
  font-size:15px;font-weight:600;color:var(--tieu-de);line-height:1.38;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.76em;
}
.tm-tc-trang .the-sp:hover .sp-ten{color:var(--chinh)}
.tm-tc-trang .sp-tuoi{
  display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--chinh);
  background:var(--chinh-nhat);padding:2px 8px;border-radius:var(--bo-tron);align-self:flex-start;
}
.tm-tc-trang .sp-gia{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.tm-tc-trang .gia-ban{font-size:19px;font-weight:800;color:var(--do);line-height:1.2}
.tm-tc-trang .gia-hoi{font-size:16px;color:var(--tieu-de)}
.tm-tc-trang .gia-goc{font-size:14px;font-weight:500;color:var(--chu-rat-nhat);text-decoration:line-through}

/* Giá do WooCommerce in ra (hàng có phân loại): del/ins → giá gạch / giá bán */
.tm-tc-trang .sp-gia .price,
.tm-tc-trang .sp-gia > span.woocommerce-Price-amount{font-size:19px;font-weight:800;color:var(--do);line-height:1.2;display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tm-tc-trang .sp-gia del{order:2;font-size:14px;font-weight:500;color:var(--chu-rat-nhat);opacity:1}
.tm-tc-trang .sp-gia ins{order:1;text-decoration:none;background:none;color:var(--do);font-weight:800}
.tm-tc-trang .sp-gia .woocommerce-Price-currencySymbol{font-size:.72em;vertical-align:baseline}

.tm-tc-trang .sp-them{margin-top:10px}
.tm-tc-trang .sp-them .nut{width:100%;padding:11px 14px;font-size:14.5px}
.tm-tc-trang .sp-them .nut:hover svg{transform:none}
.tm-tc-trang .the-sp--het .sp-anh img{filter:grayscale(1);opacity:.6}

/* Băng chuyền ngang trên điện thoại: hiện 1,5 thẻ để biết còn vuốt được */
.tm-tc-trang .bang-chuyen{position:relative}
.tm-tc-trang .tab-ds{display:flex;gap:4px;flex-wrap:wrap}
.tm-tc-trang .tab-ds button{
  padding:9px 18px;border-radius:var(--bo-tron);
  font-size:14.5px;font-weight:600;color:var(--chu);
  transition:all .2s var(--muot);white-space:nowrap;
}
.tm-tc-trang .tab-ds button:hover{color:var(--chinh)}
.tm-tc-trang .tab-ds button[aria-selected="true"]{background:var(--chinh);color:#fff}

/* --------------------------------------------------------- 6. ĐỘ TUỔI    */
.tm-tc-trang .luoi-tuoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,150px));justify-content:center;justify-items:center;gap:16px}
.tm-tc-trang .sao{
  position:relative;width:100%;max-width:150px;aspect-ratio:1/1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;text-align:center;transition:transform .28s var(--muot);
}
.tm-tc-trang .sao:hover{transform:scale(1.07) rotate(-4deg);color:#fff}
.tm-tc-trang .sao svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;filter:drop-shadow(0 6px 14px rgba(14,36,100,.16))}
.tm-tc-trang .sao--1 svg path{fill:var(--v-1)}
.tm-tc-trang .sao--2 svg path{fill:var(--v-2)}
.tm-tc-trang .sao--3 svg path{fill:var(--v-3)}
.tm-tc-trang .sao--4 svg path{fill:var(--v-4)}
.tm-tc-trang .sao--5 svg path{fill:var(--v-5)}
.tm-tc-trang .sao--6 svg path{fill:var(--v-6)}
.tm-tc-trang .sao-chu{position:relative;z-index:2;line-height:1.15}
.tm-tc-trang .sao-chu b{display:block;font-size:clamp(17px,1.8vw,21px);font-weight:800}
.tm-tc-trang .sao-chu span{display:block;font-size:12.5px;font-weight:600;opacity:.94}

/* --------------------------------------------------------- 7. GIÁ SỐC    */
.tm-tc-trang .soc-dau{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.tm-tc-trang .dem-nguoc{display:flex;align-items:center;gap:8px}
.tm-tc-trang .dem-nguoc > span{
  min-width:54px;padding:7px 8px;border-radius:10px;
  background:var(--tieu-de);color:#fff;text-align:center;line-height:1.1;
}
.tm-tc-trang .dem-nguoc b{display:block;font-size:21px;font-weight:800;font-variant-numeric:tabular-nums}
.tm-tc-trang .dem-nguoc i{display:block;font-style:normal;font-size:10.5px;opacity:.72;font-weight:600}
.tm-tc-trang .dem-nguoc em{font-style:normal;font-size:20px;font-weight:800;color:var(--tieu-de)}

.tm-tc-trang .luoi-soc{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.tm-tc-trang .the-soc{
  display:flex;gap:18px;background:#fff;border:1px solid var(--vien);
  border-radius:var(--bo);padding:16px;transition:all .25s var(--muot);
}
.tm-tc-trang .the-soc:hover{box-shadow:var(--bong-2);border-color:transparent;transform:translateY(-3px)}
.tm-tc-trang .soc-anh{width:clamp(120px,14vw,170px);aspect-ratio:1/1;flex:none;border-radius:10px;overflow:hidden;background:var(--nen-xam);position:relative;display:block}
.tm-tc-trang .soc-anh img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--muot)}
.tm-tc-trang .the-soc:hover .soc-anh img{transform:scale(1.07)}
.tm-tc-trang .soc-than{flex:1;min-width:0;display:flex;flex-direction:column}
.tm-tc-trang .soc-than .sp-dm{margin-bottom:4px}
.tm-tc-trang .soc-than .sp-ten{font-size:16.5px;min-height:0;margin-bottom:8px}
.tm-tc-trang .soc-nut{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}

/* --------------------------------------------------------- 8. CHIP       */
.tm-tc-trang .hai-hop{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.tm-tc-trang .hai-hop--mot{grid-template-columns:1fr}
.tm-tc-trang .hop-chip{background:#fff;border:1px solid var(--vien);border-radius:var(--bo);padding:24px}
.tm-tc-trang .hop-chip h3{font-size:19px;margin:0 0 4px;display:flex;align-items:center;gap:9px}
.tm-tc-trang .hop-chip h3 svg{width:21px;height:21px;color:var(--phu);flex:none}
.tm-tc-trang .hop-chip > p{font-size:14px;color:var(--chu-nhat);margin:0 0 16px}
.tm-tc-trang .chip-ds{display:flex;gap:10px;flex-wrap:wrap}
.tm-tc-trang .chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:var(--bo-tron);
  background:#fff;border:1.5px solid var(--vien);
  font-size:14.5px;font-weight:600;color:var(--tieu-de);
  transition:all .2s var(--muot);
}
.tm-tc-trang .chip:hover{background:var(--chinh);border-color:var(--chinh);color:#fff;transform:translateY(-2px)}
.tm-tc-trang .chip em{font-style:normal;font-size:12.5px;opacity:.65;font-weight:500}

/* --------------------------------------------------------- 9. TIN TỨC    */
.tm-tc-trang .luoi-tin{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tm-tc-trang .the-tin{
  background:#fff;border:1px solid var(--vien);border-radius:var(--bo);overflow:hidden;
  display:flex;flex-direction:column;transition:all .25s var(--muot);
}
.tm-tc-trang .the-tin:hover{transform:translateY(-5px);box-shadow:var(--bong-2);border-color:transparent}
.tm-tc-trang .tin-anh{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--nen-xam)}
.tm-tc-trang .tin-anh img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--muot)}
.tm-tc-trang .the-tin:hover .tin-anh img{transform:scale(1.07)}
.tm-tc-trang .tin-nhan{position:absolute;top:12px;left:12px;background:var(--chinh);color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:var(--bo-tron)}
.tm-tc-trang .tin-than{padding:16px;display:flex;flex-direction:column;flex:1}
.tm-tc-trang .tin-ngay{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--chu-nhat);margin-bottom:8px}
.tm-tc-trang .tin-ngay svg{width:14px;height:14px;flex:none}
.tm-tc-trang .the-tin h3{font-size:16.5px;line-height:1.38;margin:0 0 8px;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tm-tc-trang .the-tin:hover h3{color:var(--chinh)}
.tm-tc-trang .the-tin p{font-size:14px;color:var(--chu);margin:0 0 14px;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tm-tc-trang .tin-xem{margin-top:auto;padding-top:12px;border-top:1px solid var(--vien);font-size:14px;font-weight:700;color:var(--chinh);display:inline-flex;align-items:center;gap:7px}
.tm-tc-trang .tin-xem svg{width:14px;height:14px;transition:transform .2s}
.tm-tc-trang .the-tin:hover .tin-xem svg{transform:translateX(4px)}

/* ======================================================================
   MÀN HÌNH NHỎ — chạy tốt từ 390px tới 1920px, không tràn ngang
   ====================================================================== */
@media(max-width:1280px){
  .tm-tc-trang .luoi-sp{grid-template-columns:repeat(4,1fr)}
  .tm-tc-trang .luoi-dm{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:1024px){
  .tm-tc-trang .luoi-sp{grid-template-columns:repeat(3,1fr)}
  .tm-tc-trang .luoi-tin{grid-template-columns:repeat(2,1fr)}
  .tm-tc-trang .cam-ket{grid-template-columns:repeat(2,1fr)}
  .tm-tc-trang .luoi-soc{grid-template-columns:1fr}
  .tm-tc-trang .hero-uu-dai{max-width:60%}
}
@media(max-width:768px){
  /* Trên điện thoại xếp dọc: ảnh + chữ, rồi hai dòng cam kết, cuối cùng là chấm chuyển ảnh. */
  .tm-tc-trang .hero-khung{border-radius:18px;display:flex;flex-direction:column}
  .tm-tc-trang .hero-slide{min-height:0;padding:22px 18px 24px;flex-direction:column;align-items:flex-start}
  .tm-tc-trang .hero-nen::after{background:linear-gradient(180deg,rgba(8,20,60,.72) 0%,rgba(8,20,60,.62) 60%,rgba(8,20,60,.72) 100%)}
  .tm-tc-trang .hero-chu{max-width:none;width:100%}
  .tm-tc-trang .hero-chu .hero-tieu{font-size:25px;margin-bottom:10px}
  .tm-tc-trang .hero-chu p{font-size:14.5px;margin-bottom:16px;max-width:none}
  .tm-tc-trang .hero-nut .nut{padding:11px 20px;font-size:14px}
  .tm-tc-trang .hero-mui{display:none}
  .tm-tc-trang .hero-uu-dai{
    position:static;max-width:none;order:2;margin:0;padding:12px 14px 0;
    flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;
  }
  .tm-tc-trang .hero-uu-dai span{font-size:12px;padding:6px 11px}
  /* Chấm chuyển ảnh: trên điện thoại cho nằm hẳn dưới ảnh, khỏi đè lên chữ. */
  .tm-tc-trang .hero-cham{position:static;transform:none;order:3;justify-content:center;padding:14px 0 16px}

  .tm-tc-trang .cam-ket{grid-template-columns:1fr;gap:10px}
  .tm-tc-trang .ck{padding:14px 16px;gap:12px}
  .tm-tc-trang .ck-icon{width:44px;height:44px}
  .tm-tc-trang .ck-icon svg{width:21px;height:21px}
  .tm-tc-trang .ck b{font-size:15px}

  .tm-tc-trang .luoi-dm{grid-template-columns:repeat(2,1fr);gap:12px}
  .tm-tc-trang .dm-vong{width:72px;height:72px}
  .tm-tc-trang .the-dm b{font-size:14px}

  .tm-tc-trang .luoi-tuoi{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .tm-tc-trang .sao{max-width:124px}
  .tm-tc-trang .sao-chu b{font-size:16px}
  .tm-tc-trang .sao-chu span{font-size:11px}

  /* Lưới sản phẩm thành băng chuyền vuốt ngang */
  .tm-tc-trang .bc-cuon{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:6px;margin-inline:-16px;padding-inline:16px;
  }
  .tm-tc-trang .bc-cuon::-webkit-scrollbar{display:none}
  .tm-tc-trang .bc-cuon > *{flex:0 0 66%;scroll-snap-align:start}
  .tm-tc-trang .tab-ds{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .tm-tc-trang .tab-ds::-webkit-scrollbar{display:none}

  .tm-tc-trang .the-soc{padding:12px;gap:12px}
  .tm-tc-trang .soc-anh{width:112px}
  .tm-tc-trang .soc-than .sp-ten{font-size:15px}
  .tm-tc-trang .soc-nut .nut{flex:1 1 auto}
  .tm-tc-trang .dem-nguoc > span{min-width:46px;padding:6px}
  .tm-tc-trang .dem-nguoc b{font-size:18px}

  .tm-tc-trang .hai-hop{grid-template-columns:1fr;gap:14px}
  .tm-tc-trang .hop-chip{padding:18px}
  .tm-tc-trang .luoi-tin{grid-template-columns:1fr;gap:12px}
  .tm-tc-trang .dai-chay span{font-size:14px}
}
@media(max-width:420px){
  .tm-tc-trang .hero-chu .hero-tieu{font-size:22px}
  .tm-tc-trang .bc-cuon > *{flex:0 0 74%}
  .tm-tc-trang .soc-anh{width:96px}
  .tm-tc-trang .gia-ban,
  .tm-tc-trang .sp-gia .price{font-size:17px}
}

/* ============================================================================
   27/09/2026 — khách chốt: hero CHỈ để ảnh, không đè chữ; tỉ lệ ảnh 1620×450.
   Dải khuyến mãi chạy ngang đã chuyển xuống NẰM DƯỚI hero (xem trang-chu.php).
   LƯU Ý: các slide vốn đè lên nhau (.hero-slide ẩn, .hien mới hiện) và .hero-nen
   là lớp phủ tuyệt đối. KHÔNG được đổi position của chúng — đổi là mọi slide
   rơi xuống thành hàng dọc và trang dài gấp bốn lần.
   ========================================================================== */
/* 27/09/2026 (bản 2) — bộ 8 banner tháng 10/2026 khách gửi qua Drive có tỉ lệ
   2,60 đến 3,00; sáu tấm là 2060×763 (2,70). Lấy 2,70 làm khung: tấm rộng nhất
   (3,00) chỉ bị cắt 10% hai mép, mấy tấm cao hơn cắt 3,5% trên dưới — ít nhất
   trong mọi cách chọn. Khách xuất đồng bộ một tỉ lệ thì sửa một con số ở đây. */
.tm-tc-trang .hero-khung{aspect-ratio:var(--hero-ti-le,2060/763)}
/* Khung hero đã có tỉ lệ nên slide phải cao bằng khung; bỏ min-height mà không
   cho chiều cao thay thế thì slide co về 0 và ảnh biến mất. */
.tm-tc-trang .hero-slide{min-height:0;height:100%;padding:0;background:none}
.tm-tc-trang .hero-nen{height:100%}
.tm-tc-trang .hero-nen img{object-fit:cover;object-position:center}
.tm-tc-trang .hero-nen::after{display:none}              /* bỏ lớp phủ tối, ảnh cho nét */
.tm-tc-trang .hero-chu{display:none !important}          /* bỏ hẳn chữ đè lên ảnh */
.tm-tc-trang .hero-phu{position:absolute;inset:0;display:block;z-index:2}
.tm-tc-trang .hero-phu:focus-visible{outline:3px solid #fff;outline-offset:-4px}
.tm-tc-trang .hero-mui,.tm-tc-trang .hero-cham{z-index:3}

/* 27/09/2026 — trên điện thoại: hero không còn chữ nên bỏ kiểu xếp dọc cũ.
   Để nguyên `display:flex;flex-direction:column` thì dãy chấm chuyển ảnh trở thành
   một hàng của flex và ăn mất ~40px chiều cao của ảnh (đo được ảnh chỉ còn 79px
   trong khung 119px, hở một mảng trống dưới ảnh). Cho khung về block, chấm đè lên ảnh
   đúng như bản máy tính. */
@media (max-width:768px){
  .tm-tc-trang .hero-khung{display:block}
  .tm-tc-trang .hero-slide{padding:0;flex-direction:row}
  .tm-tc-trang .hero-nen::after{display:none}
  .tm-tc-trang .hero-cham{
    position:absolute;left:50%;transform:translateX(-50%);
    bottom:7px;padding:0;justify-content:center;
  }
  .tm-tc-trang .hero-cham button{width:7px;height:7px}
  .tm-tc-trang .hero-cham button[aria-current="true"]{width:18px}
}
@media (max-width:640px){
  .tm-tc-trang .hero-khung{aspect-ratio:var(--hero-ti-le,2060/763)}
  .tm-tc-trang .hero-slide{padding:0}
}

/* 27/09/2026 — dải khuyến mãi chạy: nằm gọn trong khung, bo góc, không tràn hết màn hình. */
.tm-tc-trang .muc--chay{padding-block:0}
.tm-tc-trang .dai-chay{
  border-radius:14px;            /* bo góc cho khớp với hero và các thẻ khác */
  padding:11px 0;
  box-shadow:0 2px 10px rgba(14,36,100,.06);
  overflow:hidden;               /* cần cái này thì góc bo mới cắt được chữ chạy */
  isolation:isolate;             /* tạo lớp riêng để bo góc ăn trên Safari */
}
@media (max-width:640px){
  .tm-tc-trang .dai-chay{border-radius:10px}
}

/* 27/09/2026 — khách chốt "chỉ để ảnh, không để chữ": bỏ nốt hai nhãn ưu đãi nổi trên hero. */
.tm-tc-trang .hero-uu-dai{display:none !important}
/* Bo góc rõ hơn cho dải chạy, khớp với độ bo của khung hero. */
.tm-tc-trang .dai-chay{border-radius:var(--bo-to,18px)}