/* HerbalSeed — giao diện chung. Màu & chữ theo bộ nhận diện. */
:root {
  --xanh: #579B8C;       /* chủ đạo */
  --xanh-dam: #315F55;   /* chữ, nút */
  --xanh-dam-2: #1F3D36;
  --kem: #F5F1E8;
  --sage: #A7C4B7;
  --chu: #1F2E2A;
  --chu-phu: #5B6B66;
  --vien: #E7E2D6;
  --vien-dam: #D6D0C2;
  --sale: #B4532A;       /* chỉ dùng cho Sale */
  --sale-nen: #FBF1EA;
  --sale-nhat: #FBEDE6;
  --sale-chu: #9A3F1E;
  --ok: #2F7A4F;
  --goi: #2F8A57; --zalo: #0068FF; --fb: #1877F2;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rong: 1240px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); color: var(--chu); background: #fff; font-size: 15px; line-height: 1.55; }
img { max-width: 100%; display: block; }
a { color: var(--xanh-dam); }
a:hover { color: var(--xanh-dam-2); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--xanh); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); color: var(--xanh-dam); line-height: 1.2; margin: 0; text-wrap: balance; }
.khung { max-width: var(--rong); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
@media (min-width: 768px) { .khung { padding-left: 24px; padding-right: 24px; } }
.an { display: none !important; }
.so { font-variant-numeric: tabular-nums; }

/* Nút */
.nut { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 24px; font-weight: 600; font-size: 15px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; background: none; white-space: nowrap; }
.nut-chinh { background: var(--xanh-dam); color: #fff; }
.nut-chinh:hover { background: var(--xanh-dam-2); color: #fff; }
.nut-vien { border-color: var(--xanh-dam); color: var(--xanh-dam); }
.nut-sale { background: var(--sale); color: #fff; }
.nut-sale:hover { background: var(--sale-chu); color: #fff; }
.nut:disabled, .nut[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.nut-nho { height: 40px; padding: 0 16px; font-size: 13px; }

/* Thanh trên cùng + header */
.thanh-tren { background: var(--xanh-dam); color: var(--kem); font-size: 12px; font-weight: 500; }
.thanh-tren .khung { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; }
@media (max-width: 767px) { .thanh-tren .phai { display: none; } .thanh-tren .khung { justify-content: center; } }
.dau-trang { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--vien); }
.dau-trang .hang1 { display: flex; align-items: center; gap: 20px; padding-top: 12px; padding-bottom: 12px; }
.dau-trang .logo img { height: 46px; width: auto; }
.tim { flex: 1 1 280px; display: flex; align-items: center; gap: 10px; background: var(--kem); border-radius: 24px; padding: 0 16px; height: 46px; min-width: 0; }
.tim input { border: 0; background: transparent; outline: none; flex: 1; min-width: 0; font-size: 14px; }
.nut-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; position: relative; border-radius: 22px; color: var(--xanh-dam); text-decoration: none; }
.dem-gio { position: absolute; top: 4px; right: 2px; background: var(--sale); color: #fff; font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.nut-gio { height: 44px; border-radius: 22px; background: var(--xanh-dam); color: #fff; padding: 0 18px; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; }
.chi-pc { display: none; }
@media (min-width: 900px) { .chi-pc { display: inline-flex; } .chi-dt { display: none !important; } }
@media (max-width: 899px) {
  .dau-trang .hang1 { gap: 4px; justify-content: space-between; }
  .dau-trang .logo img { height: 38px; }
  .dau-trang .tim { display: none; }
  .tim-dt { padding-bottom: 10px; }
  .tim-dt .tim { display: flex; }
}
@media (min-width: 900px) { .tim-dt { display: none; } }

/* Menu PC */
.menu-pc { display: none; }
@media (min-width: 900px) { .menu-pc { display: flex; flex-wrap: wrap; gap: 0 6px; } }
.menu-pc .muc { position: relative; }
.menu-pc .muc > a { display: flex; align-items: center; gap: 6px; padding: 10px 14px 13px; font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; }
.menu-pc .muc.dang-xem > a, .menu-pc .muc:hover > a, .menu-pc .muc:focus-within > a { border-bottom-color: var(--xanh); }
.menu-pc .tha { position: absolute; top: 100%; left: 0; min-width: 260px; background: #fff; border: 1px solid var(--vien); border-radius: 16px; box-shadow: 0 16px 36px rgba(31,46,42,.14); padding: 8px; display: none; flex-direction: column; z-index: 50; }
.menu-pc .muc:hover .tha, .menu-pc .muc:focus-within .tha { display: flex; }
.menu-pc .tha a { text-decoration: none; color: var(--chu); font-size: 14px; font-weight: 500; padding: 11px 14px; border-radius: 10px; display: flex; justify-content: space-between; gap: 12px; }
.menu-pc .tha a:hover { background: var(--kem); }
.menu-pc .tha small { color: var(--chu-phu); }

/* Menu điện thoại (ngăn kéo) */
.man-che { position: fixed; inset: 0; background: rgba(31,46,42,.5); z-index: 80; display: none; }
.man-che.mo { display: block; }
.ngan-keo { position: fixed; top: 0; bottom: 0; z-index: 90; background: #fff; width: min(400px, 100%); display: flex; flex-direction: column; transition: transform .2s ease; padding-bottom: env(safe-area-inset-bottom); }
.ngan-keo.trai { left: 0; transform: translateX(-100%); }
.ngan-keo.phai { right: 0; transform: translateX(100%); }
.ngan-keo.mo { transform: none; }
@media (prefers-reduced-motion: reduce) { .ngan-keo { transition: none; } }
.ngan-keo .dau { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--vien); }
.ngan-keo .than { flex: 1; overflow-y: auto; padding: 6px 16px; }
.ngan-keo .chan { padding: 14px 16px; border-top: 1px solid var(--vien); }
.nhom-menu { border-bottom: 1px solid #F0ECE2; }
.nhom-menu > button { width: 100%; height: 56px; border: 0; background: none; font-weight: 700; font-size: 16px; color: var(--xanh-dam); display: flex; align-items: center; justify-content: space-between; padding: 0; cursor: pointer; }
.nhom-menu > button svg { transition: transform .15s; }
.nhom-menu.mo > button svg { transform: rotate(180deg); }
.nhom-menu .con { display: none; flex-direction: column; gap: 6px; padding-bottom: 12px; }
.nhom-menu.mo .con { display: flex; }
.nhom-menu .con a { text-decoration: none; color: var(--chu); font-size: 14px; padding: 12px; border-radius: 10px; background: #FAF8F3; }
.ba-nut { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.ba-nut a { height: 46px; border-radius: 23px; color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.nen-goi { background: var(--goi); } .nen-zalo { background: var(--zalo); } .nen-fb { background: var(--fb); }

/* Nút liên hệ nổi */
.lien-he-noi { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; z-index: 30; }
.lien-he-noi a { width: 52px; height: 52px; border-radius: 26px; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; font-size: 12px; font-weight: 700; box-shadow: 0 6px 16px rgba(31,46,42,.25); }
body.co-thanh-mua .lien-he-noi { bottom: calc(92px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { body.co-thanh-mua .lien-he-noi { bottom: 24px; } .lien-he-noi { right: 24px; bottom: 24px; } .lien-he-noi a { width: 56px; height: 56px; border-radius: 28px; } }

/* Khối chung */
.muc-trang { padding-top: 40px; }
@media (min-width: 900px) { .muc-trang { padding-top: 56px; } }
.tieu-de-muc { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.tieu-de-muc h2 { font-size: 24px; }
@media (min-width: 900px) { .tieu-de-muc h2 { font-size: 32px; } }
.tieu-de-muc a { font-size: 14px; font-weight: 600; text-decoration: none; }
.phu { color: var(--chu-phu); font-size: 14px; }

/* Hero */
.hero { margin-top: 16px; background: var(--kem); border-radius: 24px; overflow: hidden; position: relative; display: flex; flex-wrap: wrap; }
.hero::before { content: ""; position: absolute; right: 6%; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: var(--sage); opacity: .45; }
.hero .chu-hero { position: relative; flex: 1 1 420px; padding: 32px 22px 8px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.hero .nhan { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--xanh-dam); }
.hero h1 { font-size: 32px; max-width: 560px; }
.hero p { margin: 0; color: #44544F; max-width: 500px; }
.hero .nut-nhom { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.hero .hinh-hero { position: relative; flex: 1 1 380px; min-height: 230px; display: flex; align-items: flex-end; justify-content: center; gap: 18px; padding: 0 24px; }
.hero .hinh-hero::after { content: ""; position: absolute; bottom: 0; left: 12%; right: 12%; height: 26%; background: #E3DCCB; border-radius: 18px 18px 0 0; }
.chai { position: relative; z-index: 1; border-radius: 18px 18px 10px 10px; margin-bottom: 9%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--kem); }
@media (min-width: 900px) { .hero .chu-hero { padding: 64px 56px; } .hero h1 { font-size: 50px; } .hero p { font-size: 17px; } .hero .hinh-hero { min-height: 420px; } }

/* Cam kết */
.cam-ket { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; padding-top: 20px; }
@media (min-width: 900px) { .cam-ket { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; padding-top: 28px; } }
.cam-ket > div { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--vien); border-radius: 16px; }
.cam-ket .vong { width: 46px; height: 46px; border-radius: 50%; background: var(--kem); display: flex; align-items: center; justify-content: center; flex: none; color: var(--xanh-dam); }
.cam-ket b { display: block; font-size: 13px; }
.cam-ket span { font-size: 12px; color: var(--chu-phu); }
@media (min-width: 900px) { .cam-ket b { font-size: 14px; } .cam-ket span { font-size: 13px; } }

/* Thẻ sản phẩm */
.luoi-sp { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (min-width: 700px) { .luoi-sp { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1000px) { .luoi-sp { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; } }
.the-sp { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--vien); border-radius: 18px; padding: 10px 10px 14px; background: #fff; min-width: 0; }
.the-sp .anh { aspect-ratio: 1/1; border-radius: 14px; background: var(--kem); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.the-sp .anh img.sp { width: 100%; height: 100%; object-fit: cover; }
.the-sp .anh img.la { width: 22%; opacity: .35; }
.nhan-anh { position: absolute; left: 8px; top: 8px; background: #fff; color: var(--xanh-dam); font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 11px; }
.nhan-anh.giam { background: var(--sale); color: #fff; font-size: 13px; font-weight: 700; }
.nhan-anh.het { left: auto; right: 8px; background: rgba(31,46,42,.75); color: #fff; }
.the-sp .hang { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--xanh); }
.the-sp .ten { font-size: 14px; font-weight: 500; line-height: 1.4; min-height: 39px; text-decoration: none; color: var(--chu); }
.the-sp .gia-hang { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.gia { font-size: 16px; font-weight: 700; color: var(--xanh-dam); }
.gia.sale { color: var(--sale); }
.gia-cu { font-size: 13px; color: #7D8783; text-decoration: line-through; }
.dong-ho { display: flex; align-items: center; gap: 6px; background: var(--sale-nhat); border-radius: 10px; padding: 7px 10px; font-size: 12px; color: var(--sale-chu); }
.dong-ho strong { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Hot Sale */
.hot-sale { background: var(--sale-nen); border-radius: 24px; padding: 22px 0 22px; }
.hot-sale .tieu-de-muc { padding: 0 16px; }
.hot-sale h2 { color: var(--sale); display: flex; align-items: center; gap: 8px; }
.hot-sale .tieu-de-muc a { color: var(--sale-chu); }
.hot-sale .cuon { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 4px; scroll-snap-type: x mandatory; }
.hot-sale .cuon .the-sp { flex: none; width: 172px; border: 0; scroll-snap-align: start; }
@media (min-width: 900px) {
  .hot-sale { padding: 32px; }
  .hot-sale .tieu-de-muc { padding: 0; }
  .hot-sale .cuon { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; padding: 0; overflow: visible; }
  .hot-sale .cuon .the-sp { width: auto; }
}

/* Thương hiệu, bill, review */
.thuong-hieu { display: flex; flex-wrap: wrap; gap: 10px; }
.thuong-hieu a { text-decoration: none; font-weight: 600; font-size: 14px; padding: 0 20px; height: 44px; border-radius: 22px; background: var(--kem); display: flex; align-items: center; }
.khoi-bill { background: var(--xanh-dam); border-radius: 24px; padding: 24px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; color: #DCE8E3; }
.khoi-bill h2 { color: #fff; font-size: 24px; }
.khoi-bill > div:first-child { flex: 1 1 320px; display: flex; flex-direction: column; gap: 10px; }
.khoi-bill .ba-anh { flex: 1 1 320px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.khoi-bill .ba-anh > * { aspect-ratio: 3/4; border-radius: 12px; background: #3E7366; display: flex; align-items: center; justify-content: center; font-size: 11px; text-align: center; overflow: hidden; }
.khoi-bill .ba-anh img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .khoi-bill { padding: 48px; gap: 40px; } .khoi-bill h2 { font-size: 34px; } }
.review-tom { display: flex; flex-wrap: wrap; gap: 10px; }
.review-tom span { display: flex; align-items: center; gap: 8px; background: var(--kem); border-radius: 14px; padding: 9px 14px; font-size: 13px; }
.luoi-review { display: flex; gap: 10px; overflow-x: auto; align-items: flex-start; padding-bottom: 4px; }
.luoi-review a { flex: none; width: 150px; position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--vien); text-decoration: none; display: block; }
.luoi-review .giu-cho { aspect-ratio: 9/16; background: repeating-linear-gradient(180deg, var(--kem) 0 18px, #EFEAE0 18px 24px); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--chu-phu); padding: 8px; text-align: center; }
.luoi-review img { width: 100%; height: auto; }
.nguon { position: absolute; left: 6px; top: 6px; color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 9px; }
@media (min-width: 900px) {
  .luoi-review { display: block; columns: 4 240px; column-gap: 16px; overflow: visible; }
  .luoi-review a { width: auto; margin-bottom: 16px; break-inside: avoid; }
  .luoi-review a:nth-child(even) .giu-cho { aspect-ratio: 3/4; }
}
.the-gioi-thieu { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--chu); background: var(--kem); border-radius: 18px; padding: 16px 18px; }
.the-gioi-thieu b { font-family: var(--serif); font-size: 18px; color: var(--xanh-dam); display: block; }

/* Chân trang */
.chan-trang { margin-top: 56px; background: var(--xanh-dam); color: #DCE8E3; font-size: 14px; line-height: 1.7; }
.chan-trang .luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; padding-top: 40px; padding-bottom: 32px; }
.chan-trang a { color: #DCE8E3; }
.chan-trang strong { color: #fff; display: block; margin-bottom: 4px; }
.chan-trang .cot { display: flex; flex-direction: column; gap: 4px; }
.chan-trang .duoi { border-top: 1px solid #45786C; font-size: 12px; color: #B9CEC6; padding-top: 14px; padding-bottom: 18px; }
body.co-thanh-mua .chan-trang { padding-bottom: 80px; }
@media (min-width: 900px) { body.co-thanh-mua .chan-trang { padding-bottom: 0; } }

/* Chi tiết sản phẩm */
.duong-dan { font-size: 13px; color: var(--chu-phu); display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; }
.duong-dan a { text-decoration: none; }
.ct-sp { display: flex; flex-wrap: wrap; gap: 28px 48px; padding-top: 16px; align-items: flex-start; }
.ct-sp .bo-anh { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ct-sp .anh-lon { aspect-ratio: 1/1; background: var(--kem); border-radius: 22px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ct-sp .anh-lon img.sp { width: 100%; height: 100%; object-fit: cover; }
.ct-sp .anh-nho { display: flex; gap: 8px; overflow-x: auto; }
.ct-sp .anh-nho button { flex: none; width: 64px; height: 64px; border-radius: 10px; background: var(--kem); border: 1px solid var(--vien); padding: 0; cursor: pointer; overflow: hidden; font-size: 9px; color: var(--chu-phu); }
.ct-sp .anh-nho button[aria-current="true"] { border: 2px solid var(--xanh-dam); }
.ct-sp .anh-nho img { width: 100%; height: 100%; object-fit: cover; }
.ct-sp .thong-tin { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ct-sp h1 { font-size: 28px; color: var(--chu); }
@media (min-width: 900px) { .ct-sp h1 { font-size: 38px; } }
.ct-sp .gia-ct { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ct-sp .gia-ct .gia { font-size: 26px; }
.tinh-trang { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 10px; }
.con-hang { color: var(--ok); background: #E4F1E8; }
.het-hang { color: #8A3B1C; background: var(--sale-nhat); }
.so-luong { display: inline-flex; align-items: center; border: 1px solid var(--vien-dam); border-radius: 24px; overflow: hidden; }
.so-luong button { width: 46px; height: 48px; border: 0; background: #fff; font-size: 20px; color: var(--xanh-dam); cursor: pointer; }
.so-luong span { width: 40px; text-align: center; font-weight: 600; }
.hop-cam-ket { background: var(--kem); border-radius: 16px; padding: 14px 16px; display: grid; gap: 8px; font-size: 13px; }
@media (min-width: 700px) { .hop-cam-ket { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.mua-pc { display: none; gap: 12px; flex-wrap: wrap; }
@media (min-width: 900px) { .mua-pc { display: flex; } .mua-pc .nut { flex: 1 1 160px; height: 52px; } }
.thanh-mua { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: #fff; border-top: 1px solid var(--vien); padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); display: flex; gap: 10px; box-shadow: 0 -6px 18px rgba(31,46,42,.06); }
.thanh-mua .nut { flex: 1; height: 48px; padding: 0 10px; }
.thanh-mua .zalo-nho { flex: none; width: 48px; height: 48px; border-radius: 24px; background: var(--zalo); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; text-decoration: none; }
@media (min-width: 900px) { .thanh-mua { display: none; } }
.tab-sp { display: flex; gap: 24px; border-bottom: 1px solid var(--vien); overflow-x: auto; }
.tab-sp button { border: 0; background: none; padding: 12px 0; font-weight: 500; color: var(--chu-phu); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; }
.tab-sp button[aria-selected="true"] { color: var(--xanh-dam); font-weight: 700; border-bottom-color: var(--xanh-dam); }
.noi-dung-tab { padding-top: 16px; max-width: 760px; white-space: pre-line; }
.canh-bao-tpcn { font-size: 13px; color: var(--chu-phu); background: var(--kem); border-radius: 12px; padding: 12px 14px; margin-top: 14px; }
dl.bang { margin: 14px 0 0; display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 8px 14px; font-size: 14px; }
dl.bang dt { color: var(--chu-phu); } dl.bang dd { margin: 0; font-weight: 500; }

/* Giỏ hàng */
.dong-gio { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #F0ECE2; }
.dong-gio .anh-nho { width: 60px; height: 60px; border-radius: 10px; background: var(--kem); flex: none; overflow: hidden; }
.dong-gio .anh-nho img { width: 100%; height: 100%; object-fit: cover; }
.dong-gio .giua { flex: 1; min-width: 0; font-size: 13px; }
.dong-gio .so-luong button { width: 34px; height: 34px; font-size: 16px; }
.dong-gio .so-luong span { width: 28px; font-size: 13px; }
.xoa { border: 0; background: none; color: var(--chu-phu); font-size: 12px; text-decoration: underline; cursor: pointer; padding: 4px 0; }
.trong { text-align: center; color: var(--chu-phu); padding: 40px 0; }

/* Form đặt hàng */
.dat-hang { display: flex; flex-wrap: wrap; gap: 24px; padding-top: 20px; align-items: flex-start; }
.dat-hang form { flex: 3 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.dat-hang aside { flex: 2 1 300px; min-width: 0; background: var(--kem); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.o { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.o input, .o select, .o textarea { height: 48px; border: 1px solid var(--vien-dam); border-radius: 12px; padding: 0 14px; font-size: 15px; font-weight: 400; background: #fff; }
.o textarea { height: auto; padding: 10px 14px; resize: vertical; }
.o .loi { color: #A12D1E; font-weight: 500; font-size: 12px; }
.hai-cot { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (max-width: 520px) { .hai-cot { grid-template-columns: minmax(0,1fr); } }
.chon-tt { display: grid; gap: 10px; }
@media (min-width: 700px) { .chon-tt { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.chon-tt label { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--vien-dam); cursor: pointer; }
.chon-tt label:has(input:checked) { border: 2px solid var(--xanh-dam); background: var(--kem); }
.chon-tt input { accent-color: var(--xanh-dam); width: 18px; height: 18px; }
.chon-tt b { display: block; font-size: 14px; } .chon-tt small { color: var(--chu-phu); font-size: 12px; }
.dong-y { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: var(--chu-phu); font-weight: 400; }
.dong-y input { width: 18px; height: 18px; accent-color: var(--xanh-dam); margin-top: 1px; flex: none; }
.tong { display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed #CFC8B8; padding-top: 12px; font-size: 14px; }
.tong div { display: flex; justify-content: space-between; gap: 12px; }
.tong .cuoi { font-size: 18px; font-weight: 700; color: var(--xanh-dam); }

/* Trang đơn hàng / QR */
.don-hang { max-width: 880px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px; padding-top: 24px; align-items: flex-start; }
.don-hang .qr { flex: 0 1 280px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.don-hang .qr img { width: 260px; height: auto; border-radius: 14px; border: 1px solid var(--vien); background: #fff; }
.don-hang .tt-ck { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.dong-ck { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #F0ECE2; font-size: 14px; }
.dong-ck span:first-child { color: var(--chu-phu); }
.dong-ck b { display: inline-flex; align-items: center; gap: 8px; }
.nut-chep { height: 32px; padding: 0 10px; border-radius: 16px; border: 1px solid var(--vien-dam); background: #fff; font-size: 12px; color: var(--xanh-dam); cursor: pointer; }
.trang-thai { display: flex; gap: 10px; align-items: center; border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.5; }
.trang-thai.cho { background: #FFF7E8; border: 1px solid #EBD9B4; }
.trang-thai.xong { background: #E4F1E8; border: 1px solid #B9DCC6; }
.cham { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cho .cham { background: #B7791F; } .xong .cham { background: var(--ok); }

/* Trang giới thiệu */
.hero-gt { background: var(--kem); border-radius: 24px; padding: 32px 22px; position: relative; overflow: hidden; margin-top: 16px; }
.hero-gt::before { content: ""; position: absolute; right: -80px; top: -100px; width: 360px; height: 360px; border-radius: 50%; background: var(--sage); opacity: .4; }
.hero-gt > * { position: relative; }
.hero-gt h1 { font-size: 30px; max-width: 680px; margin: 10px 0 12px; }
.hero-gt p { max-width: 640px; color: #44544F; margin: 0; }
@media (min-width: 900px) { .hero-gt { padding: 64px; } .hero-gt h1 { font-size: 48px; } .hero-gt p { font-size: 17px; } }
.buoc { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.buoc li { border: 1px solid var(--vien); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.buoc .so-buoc { width: 40px; height: 40px; border-radius: 50%; background: var(--xanh-dam); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.van-ban { max-width: 760px; }
.van-ban h2 { font-size: 24px; margin: 28px 0 10px; }

/* Thông báo nhỏ */
.toast { position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--chu); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,.2); max-width: calc(100vw - 32px); }
body[data-trang="don"] .lien-he-noi { display: none; }
.khung-qr { width: 260px; max-width: 100%; border-radius: 14px; border: 1px solid var(--vien); overflow: hidden; background: #fff; }
.khung-qr svg { display: block; width: 100%; height: auto; }
.qr-trong { width: 260px; height: 260px; display: flex; align-items: center; justify-content: center; background: var(--kem); color: var(--chu-phu); font-size: 13px; text-align: center; padding: 16px; }
.canh-bao-ck { background: #FFF7E8; border: 1px solid #EBD9B4; border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.55; }