/* ThreeTrees web 2026. Gốc: thiết kế Framer (novel-beginning-740991), đã cân lại cho dễ đọc và dễ dùng (05/11/2026).
   Máy tính ≥ 1200px giữ bố cục thiết kế; 768–1199px máy tính bảng; ≤ 767px điện thoại (thiết kế riêng). */

@font-face {
  font-family: "Gotu";
  src: url("../assets/fonts/gotu.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --nen: #f9f8f6;
  --nen-2: #f2f0ed;
  --vien: #d9d6d0;
  --chu: #33342a;          /* chữ chính */
  --chu-2: #55554d;        /* chữ phụ: tương phản ≥ 7:1 trên nền */
  --chu-3: #6b6b63;        /* chữ nhỏ, chú thích: ≥ 5:1 */
  --xanh: #65683e;         /* màu thương hiệu */
  --trang: #fff;
  --f-tieu-de: "Gotu", "Times New Roman", serif;
  --f-chu: "Google Sans Flex", "Google Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --le: 56px;
  --khung: 1200px;
  --dau: 72px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--dau) + 12px); }
body {
  margin: 0; background: var(--nen); color: var(--chu);
  font-family: var(--f-chu); font-weight: 300; font-size: 15px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--xanh); outline-offset: 3px; }
.bo-qua {
  position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--chu); color: var(--trang);
  padding: 10px 16px; font-size: 14px; transition: top .2s;
}
.bo-qua:focus { top: 12px; }

/* ---------- Chữ dùng chung ---------- */
.tieu-de { font-family: var(--f-tieu-de); font-weight: 400; font-size: 30px; line-height: 1.3; letter-spacing: -.01em; }
.nhan-nho { font-size: 12px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--chu-3); }
.phu-giua { text-align: center; color: var(--chu-2); font-size: 15px; max-width: 560px; margin: -6px auto 26px; padding: 0 24px; }
.lien-ket {
  display: inline-block; font-size: 13px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 0 3px; border-bottom: 1px solid currentColor; transition: opacity .2s;
}
.lien-ket:hover { opacity: .6; }
.mui-ten { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.mui-ten svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.mui-ten:hover svg, a:hover .mui-ten svg { transform: translateX(3px); }
.xem-het { text-align: center; margin-top: 34px; }
.hang-nut { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- Nút ---------- */
.nut-trang, .nut-vien, .nut-dam, .nut-vien-toi {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 28px; font-size: 13px; font-weight: 400; letter-spacing: .1em;
  transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.nut-trang { background: rgba(255, 255, 255, .96); color: var(--chu); }
.nut-trang:hover { background: var(--trang); }
.nut-vien { border: 1px solid rgba(255, 255, 255, .85); color: var(--trang); }
.nut-vien:hover { background: var(--trang); color: var(--chu); }
.nut-dam { background: var(--chu); color: var(--trang); border: 1px solid var(--chu); }
.nut-dam:hover { opacity: .88; }
.nut-vien-toi { border: 1px solid var(--chu); color: var(--chu); }
.nut-vien-toi:hover { background: var(--chu); color: var(--trang); }
.nut-dam svg, .nut-vien-toi svg { width: 18px; height: 18px; }

/* ---------- Logo (mask để đổi màu theo nền) ---------- */
.logo { display: block; color: inherit; }
.logo i {
  display: block; background: currentColor;
  -webkit-mask: url("../assets/img/logo-ngang.svg") no-repeat left center / contain;
          mask: url("../assets/img/logo-ngang.svg") no-repeat left center / contain;
}
.logo-ngang i { width: 158px; height: 30px; }
.logo-dung i {
  width: 83px; height: 61px;
  -webkit-mask-image: url("../assets/img/logo-dung.svg"); mask-image: url("../assets/img/logo-dung.svg");
  -webkit-mask-position: center; mask-position: center;
}

/* ---------- Thanh đầu ---------- */
.dau {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--dau);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding: 0 var(--le); color: var(--trang);
  transition: background .35s, color .35s, box-shadow .35s, transform .35s var(--ease);
}
.dau.dac, .dau.luon-dac {
  background: rgba(249, 248, 246, .97);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  color: var(--chu); box-shadow: 0 1px 0 rgba(51, 52, 42, .08);
}
.dau.giau { transform: translateY(-100%); }
.trai-dau { display: flex; align-items: center; gap: 8px; }
.dau .menu { display: flex; gap: 44px; font-size: 15px; font-weight: 400; white-space: nowrap; }
.dau .menu a { position: relative; padding: 10px 0; }
.dau .menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.dau .menu a:hover::after, .dau .menu a[aria-current]::after { transform: scaleX(1); }
.dau .cong-cu { display: flex; justify-content: flex-end; align-items: center; gap: 22px; }
.so-dt { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; white-space: nowrap; }
.so-dt svg { width: 17px; height: 17px; }
.nut-hen {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; white-space: nowrap;
  border: 1px solid currentColor; font-size: 13px; font-weight: 400; letter-spacing: .04em; transition: background .2s, color .2s;
}
.dau.dac .nut-hen:hover, .dau.luon-dac .nut-hen:hover { background: var(--chu); color: var(--trang); border-color: var(--chu); }
.dau:not(.dac):not(.luon-dac) .nut-hen:hover { background: var(--trang); color: var(--chu); }
.nut-ic { width: 44px; height: 44px; display: grid; place-items: center; }
.nut-ic svg { width: 22px; height: 22px; }
.nut-menu, .nut-goi-dt { display: none; }

/* Ngăn kéo menu (máy tính bảng + điện thoại) */
.ngan-keo {
  position: fixed; inset: 0; z-index: 60; background: var(--nen); color: var(--chu);
  display: flex; flex-direction: column; overflow-y: auto;
  padding: 0 24px calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-100%); transition: transform .45s var(--ease), visibility 0s .45s; visibility: hidden;
}
.ngan-keo.mo { transform: none; visibility: visible; transition: transform .45s var(--ease); }
.ngan-keo .dau-nk { height: 60px; flex: none; display: flex; align-items: center; justify-content: space-between; }
.ngan-keo .logo-ngang i { width: 128px; height: 24px; }
.ngan-keo nav { margin-top: 14px; }
.ngan-keo nav a {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-tieu-de); font-size: 24px; line-height: 1.2; padding: 14px 0; border-bottom: 1px solid rgba(51, 52, 42, .1);
}
.ngan-keo nav a svg { width: 18px; height: 18px; opacity: .5; }
.nk-lien-he { display: grid; gap: 10px; margin-top: 28px; }
.nk-lien-he p { font-size: 14px; color: var(--chu-2); margin-top: 6px; line-height: 1.6; }
.ngan-keo .chan-nk { margin-top: auto; padding-top: 28px; display: flex; gap: 22px; font-size: 14px; color: var(--chu-2); }
.ngan-keo .nut-dong { width: 44px; height: 44px; margin-right: -10px; display: grid; place-items: center; }
.ngan-keo .nut-dong svg { width: 22px; height: 22px; }
body.khoa { overflow: hidden; }

/* ---------- Ảnh đầu trang ---------- */
.hero { position: relative; height: min(100svh, 780px); min-height: 560px; overflow: hidden; background: #1d1b17; color: var(--trang); }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, .32), transparent 22%, transparent 52%, rgba(0, 0, 0, .5));
}
.chu-hero {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 72px; padding: 0 24px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
}
.chu-hero h1 { font-family: var(--f-tieu-de); font-weight: 400; font-size: 44px; line-height: 1.18; text-wrap: balance; }
.chu-hero .nhan-nho { color: rgba(255, 255, 255, .9); }
.chu-hero .hang-nut { margin-top: 8px; }
.hero-trai .chu-hero { left: var(--le); right: auto; bottom: 64px; max-width: 620px; align-items: flex-start; text-align: left; padding: 0; }
.hero-trai .chu-hero .hang-nut { justify-content: flex-start; }
.hero-trai::before { background: linear-gradient(rgba(0, 0, 0, .32), transparent 22%), linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .1) 55%, transparent); }
.goi-y-trong { padding-top: 64px; }
.hero-trang { height: 640px; min-height: 0; }
.hero-shop { height: 420px; min-height: 0; }
.hero-shop > img { object-position: 60% 40%; }
.hero-shop .chu-hero { bottom: 48px; gap: 6px; }
.hero-shop .so-sp { font-size: 14px; letter-spacing: .04em; color: rgba(255, 255, 255, .9); }

/* ---------- Băng trượt sản phẩm ---------- */
.ban-chay { padding: 72px 0 80px; text-align: center; }
.ban-chay .tieu-de { margin-bottom: 30px; }
.bang-truot { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 64px; }
.ray {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 72px) / 4); gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.ray::-webkit-scrollbar { display: none; }
.the-sp { scroll-snap-align: start; text-align: center; }
.the-sp .anh { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--nen-2); }
.the-sp .anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.the-sp:hover .anh img { transform: scale(1.04); }
.nhan-sp { position: absolute; left: 10px; top: 10px; z-index: 1; background: var(--trang); color: var(--chu); font-size: 11px; letter-spacing: .08em; padding: 3px 8px; }
.the-sp h3 { font-family: var(--f-tieu-de); font-weight: 400; font-size: 15px; margin-top: 14px; line-height: 1.4; }
.the-sp .gia { font-size: 13px; color: var(--chu-2); margin-top: 4px; }
.nut-truot { position: absolute; top: calc((100% - 128px) / 2 - 22px); width: 44px; height: 44px; display: grid; place-items: center; transition: opacity .2s; }
.nut-truot svg { width: 24px; height: 24px; }
.nut-truot[disabled] { opacity: .2; cursor: default; }
.nut-truot.trai { left: 8px; }
.nut-truot.phai { right: 8px; }
.anh-trong { display: block; width: 100%; height: 100%; background: var(--nen-2); }

/* ---------- Câu chuyện + video ---------- */
.cau-chuyen { display: grid; grid-template-columns: 921fr 600fr; height: 800px; color: var(--trang); }
.cau-chuyen > div { position: relative; overflow: hidden; }
.cau-chuyen img, .cau-chuyen video { width: 100%; height: 100%; object-fit: cover; }
.cau-chuyen .trai::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .5)); pointer-events: none; }
.cau-chuyen .chu-truyen {
  position: absolute; z-index: 1; left: 0; width: 100%; top: 56%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 40px;
}
.cau-chuyen .chu-truyen p { font-size: 15px; line-height: 1.9; max-width: 520px; }
.cau-chuyen .chu-truyen .nut-vien { margin-top: 36px; }
.cau-chuyen .phai::after { content: ""; position: absolute; inset: auto 0 0 0; height: 50%; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); pointer-events: none; }
.cau-chuyen .chu-video { position: absolute; z-index: 1; right: 40px; left: 40px; bottom: 48px; text-align: right; }
.chu-video h2 { font-family: var(--f-tieu-de); font-weight: 400; font-size: 28px; line-height: 1.3; margin-bottom: 14px; }

/* ---------- Bộ sưu tập ---------- */
.bst { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: center; }
.bst .anh { aspect-ratio: 751 / 579; overflow: hidden; }
.bst .anh img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.bst:hover .anh img { transform: scale(1.03); }
.bst .chu { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 40px; }
.bst .chu p:not(.nhan-nho) { font-size: 15px; color: var(--chu-2); max-width: 460px; margin-bottom: 6px; }
.bst-1 { margin-top: 80px; }
.bst-2 { margin-top: 24px; }
.bst-2 .chu { order: -1; }

/* ---------- Danh mục ---------- */
.danh-muc { padding-top: 104px; }
.danh-muc .tieu-de { text-align: center; margin-bottom: 26px; }
.luoi-dm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.o-dm { position: relative; aspect-ratio: 504 / 300; overflow: hidden; color: var(--trang); display: block; }
.o-dm img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.o-dm::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(0, 0, 0, .42)); }
.o-dm span { position: absolute; left: 12px; right: 12px; bottom: 18px; z-index: 1; text-align: center; font-size: 14px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
.o-dm:hover img { transform: scale(1.05); }
.o-dm img.can-tren { object-position: 50% 20%; }
.luoi-dm-4 { grid-template-columns: repeat(4, 1fr); }
.luoi-dm-4 .o-dm, .o-dm.o-cao { aspect-ratio: 4 / 5; }
.luoi-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }

/* ---------- Nàng thơ ---------- */
.khung { max-width: var(--khung); margin: 0 auto; padding: 0 24px; }
.nang-tho { padding-top: 104px; }
.nang-tho .tieu-de { padding-bottom: 18px; border-bottom: 1px solid var(--vien); margin-bottom: 40px; }
.luoi-nt { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.the-nt .anh { aspect-ratio: 251 / 374; overflow: hidden; }
.the-nt img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transition: transform 1s var(--ease); }
.the-nt:hover img { transform: scale(1.04); }
.the-nt figcaption { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-top: 12px; }

/* ---------- Dịch vụ ---------- */
.dich-vu { padding-top: 104px; }
.dich-vu > .tieu-de { text-align: center; margin-bottom: 34px; }
.luoi-dv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.the-dv { text-align: center; }
.the-dv .anh { display: block; aspect-ratio: 361 / 220; overflow: hidden; }
.the-dv img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.the-dv:hover img { transform: scale(1.04); }
.the-dv h3 { font-family: var(--f-tieu-de); font-weight: 400; font-size: 21px; margin: 20px 0 10px; }
.the-dv p { font-size: 14px; color: var(--chu-2); max-width: 340px; margin: 0 auto 14px; line-height: 1.65; }

/* ---------- Blog ---------- */
.blog { padding: 104px 0 96px; }
.blog > .tieu-de { text-align: center; margin-bottom: 32px; }
.luoi-blog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.the-blog { background: var(--trang); display: flex; flex-direction: column; }
.the-blog .anh { aspect-ratio: 4 / 3.3; overflow: hidden; background: var(--nen-2); }
.the-blog img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.the-blog:hover img { transform: scale(1.04); }
.the-blog .noi-dung { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.the-blog h3 { font-family: var(--f-tieu-de); font-weight: 400; font-size: 18px; line-height: 1.45; }
.the-blog p { font-size: 14px; color: var(--chu-2); line-height: 1.65; margin: 12px 0 16px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.the-blog .mui-ten { font-size: 13px; }

/* ---------- Ghé thăm (thay ô đăng ký email) ---------- */
.ghe-tham {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  background: var(--trang); padding: 48px max(24px, calc((100% - 1110px) / 2 + 24px));
}
.ghe-chu { display: grid; gap: 8px; }
.ghe-chu .dia-chi { font-size: 15px; line-height: 1.7; color: var(--chu-2); }
.ghe-chu .dia-chi a { color: var(--chu); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ghe-tham .hang-nut { justify-content: flex-start; }

/* ---------- Chân trang ---------- */
.chan { background: var(--nen-2); padding: 72px 0 32px; }
.chan .cot-chan { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; max-width: 1110px; margin: 0 auto; padding: 0 24px; }
.chan h4 { font-size: 12px; font-weight: 600; letter-spacing: .14em; margin-bottom: 18px; }
.chan h4 button { cursor: default; font-weight: 600; letter-spacing: .14em; }
.chan h4 svg { display: none; }
.chan li a { display: inline-block; font-size: 14px; padding: 5px 0; }
.chan li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.chan .day { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: 1110px; margin: 72px auto 0; padding: 0 24px; font-size: 13px; }
.chan .day .trai { display: flex; gap: 18px; align-items: center; }
.chan .day .trai a { text-decoration: underline; text-underline-offset: 3px; }
.chan .day .logo { color: var(--xanh); }
.chan .day .mxh { display: flex; gap: 22px; justify-content: flex-end; }

/* ================= SẢN PHẨM ================= */
.cua-hang { padding: 40px 0 110px; }
.chip-dm { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 0 24px 34px; }
.chip-dm a { border: 1px solid var(--vien); border-radius: 999px; padding: 9px 18px; font-size: 14px; white-space: nowrap; transition: border-color .2s; }
.chip-dm a:hover { border-color: var(--chu); }
.chip-dm a[aria-current] { background: var(--chu); border-color: var(--chu); color: var(--trang); }
.luoi-sp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 24px; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.the-sp-lon .anh { aspect-ratio: 4 / 5; overflow: hidden; background: var(--nen-2); }
.the-sp-lon img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.the-sp-lon:hover img { transform: scale(1.04); }
.the-sp-lon .nhan { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--xanh); margin-top: 14px; }
.the-sp-lon h3 { font-family: var(--f-tieu-de); font-weight: 400; font-size: 17px; line-height: 1.35; margin-top: 4px; }
.the-sp-lon .phu { font-size: 13px; color: var(--chu-3); margin-top: 4px; }
.the-sp-lon .gia { font-size: 15px; font-weight: 400; margin-top: 6px; }
.the-sp-lon[hidden] { display: none; }
.trong-loc { text-align: center; color: var(--chu-2); padding: 20px 24px 0; }
.trong-loc a { text-decoration: underline; text-underline-offset: 3px; color: var(--chu); }
.trong-trang { max-width: 640px; margin: 0 auto; padding: 40px 24px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.trong-trang > p:not(.nhan-nho) { color: var(--chu-2); font-size: 16px; line-height: 1.75; }
.trong-trang .hang-nut { margin-top: 12px; }
.trang-404 { padding: calc(var(--dau) + 90px) 24px 110px; }

/* Trang một sản phẩm */
.sp-chinh { display: grid; grid-template-columns: 58fr 42fr; padding-top: var(--dau); }
.bo-anh { position: relative; background: var(--nen-2); overflow: hidden; height: calc(100svh - var(--dau)); max-height: 820px; min-height: 520px; }
.bo-anh .ray-anh { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.bo-anh .ray-anh::-webkit-scrollbar { display: none; }
.bo-anh .ray-anh > * { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.bo-anh .cham { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; gap: 6px; justify-content: center; }
.bo-anh .cham { gap: 0; bottom: 8px; }
.bo-anh .cham button { width: 28px; height: 28px; display: grid; place-items: center; }
.bo-anh .cham button::before { content: ""; width: 7px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); transition: width .2s, background .2s; }
.bo-anh .cham button.dang::before { background: #fff; width: 20px; }
.thong-tin { align-self: center; padding: 48px 64px 48px 56px; max-width: 620px; }
.thong-tin .duong-dan { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--chu-3); }
.thong-tin .duong-dan a:hover { color: var(--chu); }
.thong-tin h1 { font-family: var(--f-tieu-de); font-weight: 400; font-size: 32px; line-height: 1.25; margin: 14px 0 10px; }
.thong-tin .gia { font-size: 18px; font-weight: 400; margin-bottom: 22px; }
.hang-nut-sp { display: flex; gap: 10px; }
.nut-lien-he { flex: 1; display: flex; justify-content: center; align-items: center; min-height: 52px; background: var(--chu); color: var(--trang); font-size: 13px; letter-spacing: .14em; transition: opacity .2s; }
.nut-lien-he:hover { opacity: .88; }
.nut-goi { width: 52px; min-height: 52px; display: grid; place-items: center; border: 1px solid var(--chu); transition: background .2s, color .2s; }
.nut-goi:hover { background: var(--chu); color: var(--trang); }
.nut-goi svg { width: 20px; height: 20px; }
.thong-tin .ghi-chu { font-size: 13px; color: var(--chu-3); margin: 14px 0 22px; }
.mo-ta { border-top: 1px solid var(--vien); }
.mo-ta:last-of-type { border-bottom: 1px solid var(--vien); }
.mo-ta summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 14px; font-weight: 400; padding: 17px 0; }
.mo-ta summary::-webkit-details-marker { display: none; }
.mo-ta summary span { font-size: 20px; font-weight: 300; line-height: 1; transition: transform .25s; }
.mo-ta[open] summary span { transform: rotate(45deg); }
.mo-ta .bung { font-size: 14px; color: var(--chu-2); padding: 0 0 18px; line-height: 1.75; }
.mo-ta .bung p + p { margin-top: 8px; }
.mo-ta .bung a { color: var(--chu); text-decoration: underline; text-underline-offset: 3px; }
.thong-so { margin-top: 12px; display: grid; gap: 4px; }
.thong-so b { display: inline-block; min-width: 92px; font-weight: 400; color: var(--chu); }
.anh-them { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1280px; margin: 0 auto; padding: 64px 24px 0; }
.anh-them img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.thanh-mua { display: none; }
.trang-lh .ghe-tham { display: none; }
.dem-cuoi { height: 96px; }

/* ================= TRANG PHỤ ================= */
.gioi-thieu { max-width: 760px; margin: 0 auto; padding: 96px 24px 72px; text-align: center; }
.gioi-thieu p { font-size: 16px; line-height: 1.9; color: var(--chu-2); margin-top: 20px; }
.buoc-di { max-width: var(--khung); margin: 0 auto; padding: 104px 24px 96px; text-align: center; }
.buoc-di ol { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; text-align: left; }
.buoc-di b { display: block; font-family: var(--f-tieu-de); font-weight: 400; font-size: 15px; color: var(--xanh); padding-bottom: 14px; border-bottom: 1px solid var(--vien); margin-bottom: 18px; }
.buoc-di h3 { font-family: var(--f-tieu-de); font-weight: 400; font-size: 20px; margin-bottom: 10px; }
.buoc-di p { font-size: 14px; color: var(--chu-2); line-height: 1.75; }
.hoi-dap { max-width: 760px; padding-top: 96px; }
.hoi-dap .tieu-de { text-align: center; margin-bottom: 26px; }

.dau-chu { padding: calc(var(--dau) + 64px) 24px 36px; max-width: 900px; margin: 0 auto; }
.dau-chu.dau-giua { text-align: center; }
.dau-chu .duong-dan { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--chu-3); margin-bottom: 14px; }
.dau-chu .duong-dan a:hover { color: var(--chu); }
.dau-chu h1 { font-size: 38px; }
.dau-chu .phu { font-size: 16px; color: var(--chu-2); margin-top: 12px; line-height: 1.7; }
.trang-blog .blog { padding-top: 8px; }

.chu-dai { font-size: 16px; line-height: 1.85; color: var(--chu-2); }
.chu-dai h2 { font-family: var(--f-tieu-de); font-weight: 400; font-size: 23px; color: var(--chu); margin: 40px 0 12px; line-height: 1.35; }
.chu-dai h2:first-child { margin-top: 0; }
.chu-dai h3 { font-size: 16px; font-weight: 500; color: var(--chu); margin: 24px 0 6px; }
.chu-dai p { margin: 0 0 14px; }
.chu-dai ul, .chu-dai ol { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 6px; }
.chu-dai ul { list-style: disc; }
.chu-dai strong { font-weight: 500; color: var(--chu); }
.chu-dai a { color: var(--chu); text-decoration: underline; text-underline-offset: 3px; }
.lien-he-cuoi { margin-top: 36px !important; padding-top: 22px; border-top: 1px solid var(--vien); font-size: 15px; }
.trang-chu-chu .dau-chu { max-width: 1110px; }
.bo-chu { display: grid; grid-template-columns: 250px 1fr; gap: 80px; max-width: 1110px; margin: 0 auto; padding: 10px 24px 104px; }
.muc-luc { display: flex; flex-direction: column; position: sticky; top: calc(var(--dau) + 30px); align-self: start; border-left: 1px solid var(--vien); }
.muc-luc a { font-size: 14px; padding: 9px 0 9px 18px; margin-left: -1px; border-left: 1px solid transparent; color: var(--chu-2); }
.muc-luc a:hover { color: var(--chu); }
.muc-luc a[aria-current] { border-color: var(--chu); color: var(--chu); font-weight: 400; }
.trang-chu-chu .chu-dai { max-width: 720px; }
.trang-bai .anh-bai { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.trang-bai .anh-bai img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.trang-bai .chu-dai { max-width: 700px; margin: 0 auto; padding: 48px 24px 24px; }
.bai-khac { padding-top: 64px; background: var(--nen-2); margin-top: 56px; }
.luoi-blog.luoi-2 { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin: 0 auto; }

/* Liên hệ */
.nut-nhanh { display: none; }
.bo-lien-he { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; max-width: 1110px; margin: 0 auto; padding: 10px 24px 104px; align-items: start; }
.thong-tin-ch .anh { aspect-ratio: 4 / 3; overflow: hidden; }
.thong-tin-ch .anh img { width: 100%; height: 100%; object-fit: cover; }
.thong-tin-ch dl { margin: 30px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; }
.thong-tin-ch dt { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.thong-tin-ch dd { margin: 0; font-size: 15px; line-height: 1.7; }
.thong-tin-ch dd a { text-decoration: underline; text-underline-offset: 3px; }
.dat-lich { background: var(--trang); padding: 44px 44px 40px; }
.dat-lich .phu { font-size: 14px; color: var(--chu-2); margin: 10px 0 26px; line-height: 1.7; }
.dat-lich .phu a { color: var(--chu); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.form-hen { display: grid; gap: 20px; }
.form-hen label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.form-hen input, .form-hen select, .form-hen textarea {
  font: inherit; font-size: 16px; font-weight: 300; letter-spacing: 0; text-transform: none; color: var(--chu);
  border: 0; border-bottom: 1px solid var(--vien); background: transparent; padding: 9px 0; border-radius: 0; width: 100%;
  -webkit-appearance: none; appearance: none;
}
.form-hen select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333342a' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center / 16px; padding-right: 24px; }
.form-hen textarea { resize: vertical; }
.form-hen input:focus, .form-hen select:focus, .form-hen textarea:focus { outline: none; border-color: var(--chu); }
.form-hen [aria-invalid="true"] { border-color: #a33a2b; }
.form-hen .hai-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-hen .nut-dam { margin-top: 6px; }
.form-hen .bao { font-size: 14px; color: var(--xanh); min-height: 20px; }
.form-hen .bao.loi { color: #a33a2b; }
.form-hen .bao a, .rieng-tu a, .da-gui a { color: var(--chu); text-decoration: underline; text-underline-offset: 3px; }
.form-hen[hidden], .da-gui[hidden] { display: none; }
.form-hen .bay, .form-don .bay { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-hen .nut-dam[disabled] { opacity: .6; cursor: progress; }
.rieng-tu { font-size: 13px; color: var(--chu-3); }
.da-gui { padding: 28px 0 8px; outline: none; }
.da-gui h3 { font-family: var(--f-tieu-de); font-weight: 400; font-size: 26px; margin: 8px 0 10px; }
.da-gui p:not(.nhan-nho) { font-size: 15px; color: var(--chu-2); line-height: 1.7; }

/* ================= BÁN HÀNG (giỏ, đặt hàng) ================= */
.dai-thu {
  position: fixed; left: 12px; bottom: 12px; z-index: 70; max-width: min(420px, calc(100vw - 24px));
  background: #8a2f22; color: #fff; font-size: 12px; line-height: 1.45; padding: 7px 12px; pointer-events: none;
}
.nut-gio { position: relative; }
.nut-gio svg { width: 22px; height: 22px; }
.so-gio {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--xanh); color: #fff; font-size: 11px; font-weight: 500; line-height: 18px; text-align: center;
}
.dau:not(.dac):not(.luon-dac) .so-gio { background: #fff; color: var(--chu); }

/* Khối mua ở trang sản phẩm */
.khoi-mua { display: grid; gap: 14px; }
.nhan-chon { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.nhan-chon .co-da-chon { font-weight: 300; color: var(--chu-2); }
.nhan-chon a { margin-left: auto; font-weight: 300; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; color: var(--chu-2); }
.hang-co { display: flex; flex-wrap: wrap; gap: 8px; }
.o-co { min-width: 48px; height: 44px; padding: 0 12px; border: 1px solid var(--vien); font-size: 14px; transition: border-color .15s, background .15s; }
.o-co:hover { border-color: var(--chu); }
.o-co[aria-pressed="true"] { background: var(--chu); color: var(--trang); border-color: var(--chu); }
.bao-co { color: #a33a2b; font-size: 13px; margin-top: 6px; }
.nut-mua-ngay { min-height: 52px; padding: 0 22px; border: 1px solid var(--chu); font-size: 13px; letter-spacing: .14em; transition: background .2s, color .2s; }
.nut-mua-ngay:hover { background: var(--chu); color: var(--trang); }
.tu-van-nho { font-size: 13px; color: var(--chu-2); }
.tu-van-nho a { color: var(--chu); text-decoration: underline; text-underline-offset: 3px; }

/* Thông báo "Đã thêm vào giỏ" */
.bao-them {
  position: fixed; z-index: 80; right: 24px; top: calc(var(--dau) + 16px); width: min(380px, calc(100vw - 32px));
  background: var(--trang); box-shadow: 0 12px 40px rgba(0, 0, 0, .14); padding: 18px; display: grid; gap: 14px;
  animation: hien-bao .25s var(--ease); transition: opacity .5s;
}
.bao-them.an-di { opacity: 0; }
.bao-them p { font-size: 14px; color: var(--chu-2); }
.bao-them p b { display: block; color: var(--chu); font-weight: 500; margin-bottom: 2px; }
.bao-them div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bao-them .nut-dam, .bao-them .nut-vien-toi { padding: 0 10px; font-size: 12px; min-height: 44px; }
@keyframes hien-bao { from { opacity: 0; transform: translateY(-8px); } }

/* Trang giỏ + đặt hàng */
.ban-hang { padding-bottom: 96px; }
.ban-hang .dau-chu { padding-bottom: 28px; }
.gio-trong { text-align: center; padding: 20px 24px 40px; color: var(--chu-2); display: grid; gap: 18px; }
.gio-trong a:not(.nut-dam) { color: var(--chu); text-decoration: underline; text-underline-offset: 3px; }
.bo-gio { display: grid; grid-template-columns: 1fr 380px; gap: 56px; max-width: 1160px; margin: 0 auto; padding: 0 24px; align-items: start; }
.bo-gio[hidden], .gio-trong[hidden], .don-xong[hidden], .khoi-ck[hidden] { display: none; }
.dong-gio-ds, .tom-tat-ds { list-style: none; margin: 0; padding: 0; }
.dong-gio { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--vien); align-items: start; }
.dong-gio:first-child { border-top: 1px solid var(--vien); }
.dong-gio .anh { display: block; aspect-ratio: 4 / 5; background: var(--nen-2); overflow: hidden; }
.dong-gio .anh img { width: 100%; height: 100%; object-fit: cover; }
.tt-dong { display: grid; gap: 4px; align-content: start; }
.tt-dong .ten { font-family: var(--f-tieu-de); font-size: 17px; line-height: 1.35; }
.tt-dong .phu, .tt-dong .gia-le { font-size: 13px; color: var(--chu-2); }
.thanh-tien { font-size: 15px; font-weight: 400; white-space: nowrap; }
.so-luong { display: inline-flex; align-items: center; border: 1px solid var(--vien); margin-top: 8px; width: max-content; }
.so-luong button { width: 40px; height: 40px; font-size: 18px; }
.so-luong span { min-width: 32px; text-align: center; font-size: 15px; }
.bo-dong { justify-self: start; font-size: 13px; color: var(--chu-2); text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; }
.tiep-mua { margin-top: 22px; }
.tom-tat { background: var(--trang); padding: 28px; position: sticky; top: calc(var(--dau) + 24px); display: grid; gap: 16px; }
.tom-tat h2 { font-family: var(--f-tieu-de); font-weight: 400; font-size: 21px; }
.tom-tat dl { margin: 0; display: grid; gap: 10px; }
.tom-tat dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.tom-tat dt { color: var(--chu-2); }
.tom-tat dd { margin: 0; text-align: right; }
.tom-tat .dong-tong { border-top: 1px solid var(--vien); padding-top: 12px; font-size: 17px; }
.tom-tat .dong-tong dt { color: var(--chu); }
.tom-tat .dong-tong dd { font-weight: 500; }
.nut-rong { width: 100%; }
.ghi-chu-gio, .ho-tro-gio, .rieng-tu, .sua-gio { font-size: 13px; color: var(--chu-2); line-height: 1.6; }
.ho-tro-gio a, .rieng-tu a { color: var(--chu); text-decoration: underline; text-underline-offset: 3px; }
.tom-tat .tom-tat-ds .dong-gio { grid-template-columns: 56px 1fr auto; gap: 12px; padding: 12px 0; }
.tom-tat .tom-tat-ds .tt-dong .ten { font-size: 14px; }

.form-don .cot-don { display: grid; gap: 34px; }
.form-don fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 18px; }
.form-don legend { font-family: var(--f-tieu-de); font-size: 21px; padding: 0; margin-bottom: 6px; }
.form-don label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.form-don .tuy-chon { font-weight: 300; letter-spacing: 0; text-transform: none; color: var(--chu-3); }
.form-don input:not([type="radio"]), .form-don textarea {
  font: inherit; font-size: 16px; font-weight: 300; letter-spacing: 0; text-transform: none; color: var(--chu);
  border: 0; border-bottom: 1px solid var(--vien); background: transparent; padding: 9px 0; border-radius: 0; width: 100%;
}
.form-don input:focus, .form-don textarea:focus { outline: none; border-color: var(--chu); }
.form-don [aria-invalid="true"] { border-color: #a33a2b !important; }
.form-don .hai-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-don .an-nhan { font-size: 0; gap: 0; }
.lua-chon { display: grid; gap: 10px; }
.form-don .o-chon {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; text-transform: none; letter-spacing: 0;
  font-weight: 300; font-size: 15px; border: 1px solid var(--vien); padding: 14px 16px; cursor: pointer; transition: border-color .15s, background .15s;
}
.form-don .o-chon[hidden] { display: none; }
.form-don .o-chon:has(input:checked) { border-color: var(--chu); background: var(--trang); }
.o-chon input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--chu); }
.o-chon b { display: block; font-weight: 500; }
.o-chon small { display: block; font-size: 13px; color: var(--chu-2); margin-top: 2px; }
.khoi-dia-chi { display: grid; gap: 18px; }
.khoi-dia-chi[hidden] { display: none; }
.form-don .bao { font-size: 14px; min-height: 0; }
.form-don .bao.loi { color: #a33a2b; }
.form-don .bao a { color: var(--chu); text-decoration: underline; }

/* Trang đơn xong */
.don-xong { max-width: 720px; margin: 0 auto; padding: calc(var(--dau) + 64px) 24px 0; display: grid; gap: 18px; text-align: center; }
.don-xong .ma-don-dong { font-size: 18px; }
.don-xong .loi-xong { color: var(--chu-2); }
.don-xong h2 { font-family: var(--f-tieu-de); font-weight: 400; font-size: 21px; margin-bottom: 12px; }
.khoi-ck, .khoi-tom-tat { background: var(--trang); padding: 26px; text-align: left; }
.ck-luoi { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; }
.qr-ck { width: 100%; height: auto; background: var(--nen-2); }
.ck-luoi dl { margin: 0; display: grid; gap: 10px; }
.ck-luoi dt { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--chu-2); }
.ck-luoi dd { margin: 2px 0 0; font-size: 16px; }
.khoi-tom-tat .tom-tat-ds li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--vien); font-size: 14px; }
.khoi-tom-tat .tong-dong { text-align: right; margin-top: 12px; font-size: 17px; }
.khong-don { padding-top: calc(var(--dau) + 64px); }

/* ---------- Hiện dần khi cuộn (chỉ khi có JS) ---------- */
.js .hien { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .hien.da-hien { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .hien { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}

/* ================= MÁY TÍNH BẢNG + MÁY TÍNH NHỎ ================= */
@media (max-width: 1279.98px) {
  .dau .menu { gap: 30px; font-size: 14px; }
  .so-dt span { display: none; }
}
@media (max-width: 1099.98px) {
  :root { --le: 24px; }
  .dau .menu { display: none; }
  .dau .cong-cu { grid-column: 3; }
  .nut-menu { display: grid; margin-left: -10px; }
  .trai-dau .logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
@media (max-width: 1199.98px) {
  .hero-trang { height: 560px; }
  .cau-chuyen { height: 70vw; max-height: 760px; }
  .luoi-nt { gap: 20px; }
  .bst .chu { padding: 32px 24px; }
  .luoi-dm-4 { grid-template-columns: repeat(2, 1fr); }
  .buoc-di ol { grid-template-columns: repeat(2, 1fr); }
  .bo-chu { grid-template-columns: 200px 1fr; gap: 40px; }
  .bo-lien-he { gap: 36px; }
  .thong-tin { padding: 40px 32px; }
}

/* ================= ĐIỆN THOẠI ================= */
@media (max-width: 767.98px) {
  :root { --le: 20px; --dau: 58px; }
  body { font-size: 16px; }
  .tieu-de { font-size: 26px; }

  /* Thanh đầu: ☰ | logo giữa | gọi */
  .dau { padding: 0 8px; gap: 0; }
  .dau .cong-cu { gap: 0; }
  .so-dt, .nut-hen { display: none; }
  .nut-goi-dt { display: grid; }
  .nut-menu { margin-left: 0; }
  .trai-dau .logo-ngang i { width: 128px; height: 24px; }

  /* Ảnh đầu */
  .hero { height: 86svh; min-height: 540px; max-height: 760px; }
  .hero-chu > img { object-position: 49% 50%; transform: scale(1.3); transform-origin: 50% 100%; }
  .hero-trai .chu-hero { left: 0; right: 0; bottom: 32px; max-width: none; align-items: center; text-align: center; padding: 0 24px; }
  .hero-trai .chu-hero .hang-nut { justify-content: center; }
  .hero-trai::before { background: linear-gradient(rgba(0, 0, 0, .3), transparent 22%, transparent 45%, rgba(0, 0, 0, .7)); }
  .goi-y-trong { padding-top: 40px; }
  .chu-hero { bottom: 32px; gap: 12px; }
  .chu-hero h1 { font-size: 30px; }
  .chu-hero .hang-nut { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; gap: 10px; }
  .hero-trang { height: 72svh; min-height: 460px; max-height: 660px; }
  .hero-shop { height: 300px; min-height: 0; }
  .hero-shop .chu-hero { bottom: 28px; }
  .hero-shop .chu-hero h1 { font-size: 30px; }

  /* Băng trượt: ló thẻ kế tiếp */
  .ban-chay { padding: 52px 0 56px; }
  .ban-chay .tieu-de { margin-bottom: 22px; }
  .bang-truot { padding: 0; }
  .nut-truot { display: none; }
  .ray { grid-auto-columns: 62%; gap: 12px; padding: 0 var(--le); scroll-padding: 0 var(--le); }

  /* Câu chuyện */
  .cau-chuyen { grid-template-columns: 1fr; height: auto; max-height: none; }
  .cau-chuyen .trai { background: #17150f; }
  .cau-chuyen .trai img { height: auto; aspect-ratio: 1 / 1.02; object-position: 50% 30%; }
  .cau-chuyen .trai::after { inset: 0 0 auto 0; height: calc(100vw * 1.02); background: linear-gradient(transparent 55%, #17150f); }
  .cau-chuyen .chu-truyen { position: relative; top: auto; transform: none; padding: 0 24px 48px; margin-top: -70px; }
  .cau-chuyen .chu-truyen p { font-size: 15px; line-height: 1.8; }
  .cau-chuyen .chu-truyen .nut-vien { margin-top: 26px; }
  .cau-chuyen .phai { aspect-ratio: 4 / 5; }
  .cau-chuyen .chu-video { left: 24px; right: 24px; bottom: 30px; text-align: left; }
  .chu-video h2 { font-size: 26px; }

  /* Bộ sưu tập */
  .bst { grid-template-columns: 1fr; gap: 0; }
  .bst .anh { aspect-ratio: 4 / 4.4; }
  .bst .chu, .bst-2 .chu { order: 1; padding: 26px 28px 8px; gap: 10px; }
  .bst-1 { margin-top: 0; }
  .bst-2 { margin-top: 44px; }
  .bst-2 .anh img { object-position: 60% 50%; }

  /* Danh mục */
  .danh-muc { padding-top: 64px; }
  .luoi-dm, .luoi-dm-4 { grid-template-columns: 1fr 1fr; gap: 4px; }
  .o-dm, .luoi-dm-4 .o-dm { aspect-ratio: 1 / 1.1; }
  .o-dm span { font-size: 13px; bottom: 14px; }
  .luoi-3 {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; gap: 8px;
    overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--le); scroll-padding: 0 var(--le); scrollbar-width: none;
  }
  .luoi-3::-webkit-scrollbar { display: none; }
  .luoi-3 .o-dm { scroll-snap-align: start; }

  /* Hàng vuốt ngang dùng chung */
  .khung { padding: 0; }
  .luoi-nt, .luoi-dv, .luoi-blog {
    grid-template-columns: none; grid-auto-flow: column; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--le); scroll-padding: 0 var(--le); scrollbar-width: none;
  }
  .luoi-nt::-webkit-scrollbar, .luoi-dv::-webkit-scrollbar, .luoi-blog::-webkit-scrollbar { display: none; }
  .luoi-nt > *, .luoi-dv > *, .luoi-blog > * { scroll-snap-align: start; }
  .luoi-nt { grid-auto-columns: 46%; gap: 12px; }
  .luoi-dv { grid-auto-columns: 82%; }
  .luoi-blog { grid-auto-columns: 80%; }

  .nang-tho { padding-top: 64px; }
  .nang-tho .tieu-de { margin: 0 var(--le) 22px; padding-bottom: 14px; font-size: 24px; }
  .the-nt figcaption { font-size: 12px; }
  .dich-vu { padding-top: 64px; }
  .dich-vu > .tieu-de { margin-bottom: 22px; padding: 0 var(--le); }
  .the-dv .anh { aspect-ratio: 4 / 3; }
  .the-dv h3 { font-size: 20px; margin: 16px 0 8px; }
  .blog { padding: 64px 0 56px; }
  .the-blog .anh { aspect-ratio: 4 / 3.2; }
  .the-blog h3 { font-size: 17px; }
  .the-blog h3 br { display: none; }
  .xem-het { margin-top: 24px; }

  /* Ghé thăm */
  .ghe-tham { display: grid; gap: 20px; padding: 36px var(--le) 40px; }
  .ghe-tham .hang-nut { flex-direction: column; }
  .ghe-chu .tieu-de { font-size: 26px; }

  /* Chân trang gập */
  .chan { padding: 18px 0 calc(28px + env(safe-area-inset-bottom)); }
  .chan .cot-chan { grid-template-columns: 1fr; padding: 0 var(--le); }
  .chan .cot { border-bottom: 1px solid rgba(51, 52, 42, .12); }
  .chan h4 { margin: 0; }
  .chan h4 button { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; cursor: pointer; font-size: 12px; }
  .chan h4 svg { display: block; width: 16px; height: 16px; transition: transform .25s; }
  .chan .cot.mo h4 svg { transform: rotate(45deg); }
  .js .chan ul { display: none; padding-bottom: 10px; }
  .js .chan .cot.mo ul { display: block; }
  .chan li a { display: block; font-size: 15px; padding: 9px 0; }
  .chan .day { grid-template-columns: 1fr; justify-items: center; gap: 20px; margin-top: 36px; text-align: center; }
  .chan .day .logo { order: -1; }
  .chan .day .mxh { justify-content: center; }
  .chan .day a { padding: 8px 0; }

  /* Sản phẩm */
  .cua-hang { padding: 22px 0 64px; }
  .chip-dm {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 6px var(--le) 18px; scrollbar-width: none;
    position: sticky; top: var(--dau); z-index: 5; background: var(--nen); transition: top .35s var(--ease);
  }
  body.dau-an .chip-dm { top: 0; padding-top: 12px; }
  .chip-dm::-webkit-scrollbar { display: none; }
  .chip-dm a { flex: none; padding: 9px 16px; }
  .luoi-sp { grid-template-columns: 1fr 1fr; gap: 30px 12px; padding: 0 var(--le); }
  .the-sp-lon .nhan { font-size: 10px; margin-top: 10px; }
  .the-sp-lon h3 { font-size: 15px; }
  .the-sp-lon .phu { font-size: 12px; }
  .the-sp-lon .gia { font-size: 14px; }
  .trong-trang { padding-top: 26px; }
  .trong-trang .hang-nut { flex-direction: column; align-self: stretch; }

  .sp-chinh { grid-template-columns: 1fr; padding-top: var(--dau); }
  .bo-anh { height: auto; min-height: 0; max-height: none; aspect-ratio: 4 / 5; }
  .thong-tin { padding: 22px var(--le) 8px; max-width: none; }
  .thong-tin h1 { font-size: 26px; margin: 10px 0 6px; }
  .thong-tin .gia { font-size: 18px; margin-bottom: 18px; }
  .mo-ta summary { font-size: 15px; padding: 18px 0; }
  .mo-ta .bung { font-size: 15px; }
  .anh-them { display: none; }
  .thanh-mua {
    display: flex; gap: 10px; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px var(--le) calc(10px + env(safe-area-inset-bottom));
    background: rgba(249, 248, 246, .97); box-shadow: 0 -1px 0 rgba(51, 52, 42, .1);
    transform: translateY(110%); transition: transform .35s var(--ease);
  }
  .thanh-mua.hien-ra { transform: none; }
  .thanh-mua .tt { flex: 1; min-width: 0; }
  .thanh-mua .tt b { display: block; font-weight: 400; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .thanh-mua .tt span { font-size: 13px; color: var(--chu-2); }
  .thanh-mua .nut-goi { width: 48px; min-height: 48px; }
  .thanh-mua .nut-chinh { display: grid; place-items: center; min-height: 48px; background: var(--chu); color: var(--trang); padding: 0 22px; font-size: 13px; letter-spacing: .1em; }
  .sp-trang .chan { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  /* Trang phụ */
  .gioi-thieu { padding: 52px var(--le) 44px; }
  .gioi-thieu p { font-size: 16px; line-height: 1.8; }
  .buoc-di { padding: 60px var(--le) 50px; }
  .buoc-di ol { grid-template-columns: 1fr; gap: 0; margin-top: 26px; }
  .buoc-di li { display: grid; grid-template-columns: 44px 1fr; column-gap: 8px; padding: 18px 0; border-top: 1px solid var(--vien); }
  .buoc-di li:last-child { border-bottom: 1px solid var(--vien); }
  .buoc-di b { grid-row: span 2; border: 0; padding: 2px 0 0; margin: 0; }
  .buoc-di h3 { font-size: 19px; margin-bottom: 4px; }
  .buoc-di p { font-size: 15px; }
  .hoi-dap { padding: 56px var(--le) 0; }
  .phu-giua { font-size: 15px; margin-bottom: 20px; }

  .dau-chu { padding: calc(var(--dau) + 30px) var(--le) 24px; }
  .dau-chu h1 { font-size: 28px; }
  .luoi-blog-trang { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow: visible; gap: 22px; }
  .luoi-blog.luoi-2 { grid-template-columns: none; }
  .chu-dai { font-size: 16px; line-height: 1.8; }
  .chu-dai h2 { font-size: 21px; margin-top: 32px; }
  .bo-chu { grid-template-columns: 1fr; gap: 0; padding: 0 0 60px; }
  .muc-luc {
    flex-direction: row; border: 0; overflow-x: auto; gap: 8px; padding: 4px var(--le) 18px;
    position: sticky; top: var(--dau); z-index: 5; background: var(--nen); scrollbar-width: none; transition: top .35s var(--ease);
  }
  body.dau-an .muc-luc { top: 0; padding-top: 12px; }
  .muc-luc::-webkit-scrollbar { display: none; }
  .muc-luc a { flex: none; white-space: nowrap; border: 1px solid var(--vien); border-radius: 999px; padding: 8px 14px; margin: 0; }
  .muc-luc a[aria-current] { background: var(--chu); border-color: var(--chu); color: var(--trang); }
  .trang-chu-chu .chu-dai { padding: 10px var(--le) 0; }
  .trang-bai .anh-bai { padding: 0; }
  .trang-bai .anh-bai img { aspect-ratio: 4 / 3; }
  .trang-bai .chu-dai { padding: 30px var(--le) 10px; }
  .bai-khac { padding-top: 44px; margin-top: 40px; }

  .nut-nhanh { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 var(--le) 26px; }
  .nut-nhanh a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 6px; background: var(--trang); font-size: 14px; }
  .nut-nhanh svg { width: 22px; height: 22px; }
  .bo-lien-he { grid-template-columns: 1fr; gap: 34px; padding: 0 0 50px; }
  .thong-tin-ch .anh { display: none; }
  .thong-tin-ch dl { grid-template-columns: 1fr; gap: 0; margin: 0; padding: 0 var(--le); }
  .thong-tin-ch dl > div { display: grid; grid-template-columns: 110px 1fr; padding: 14px 0; border-top: 1px solid var(--vien); }
  .thong-tin-ch dl > div:last-child { border-bottom: 1px solid var(--vien); }
  .thong-tin-ch dt { margin: 3px 0 0; }
  .dat-lich { padding: 34px var(--le); }
  .form-hen .hai-cot { grid-template-columns: 1fr; gap: 20px; }

  /* Bán hàng */
  .dai-thu { position: absolute; bottom: auto; top: calc(var(--dau) + 6px); left: 8px; font-size: 11px; padding: 5px 9px; }
  .sp-trang .dai-thu { top: calc(var(--dau) + 6px); }
  .hang-nut-sp { flex-wrap: wrap; }
  .hang-nut-sp .nut-lien-he { flex: 1 1 100%; }
  .nut-mua-ngay { flex: 1; }
  .bao-them { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); right: 12px; left: 12px; width: auto; }
  .sp-trang .bao-them { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .bo-gio { grid-template-columns: 1fr; gap: 28px; padding: 0 var(--le); }
  .dong-gio { grid-template-columns: 84px 1fr; gap: 14px; }
  .dong-gio .thanh-tien { grid-column: 2; font-size: 14px; }
  .tom-tat { position: static; padding: 22px; }
  .tom-tat .tom-tat-ds .dong-gio { grid-template-columns: 56px 1fr; }
  .form-don .hai-cot { grid-template-columns: 1fr; }
  .form-don .cot-don { gap: 28px; }
  .don-xong { padding-top: calc(var(--dau) + 32px); padding-left: var(--le); padding-right: var(--le); }
  .ck-luoi { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .qr-ck { max-width: 240px; }
  .khoi-ck, .khoi-tom-tat { padding: 20px; }
}