/* 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;
  --nen: #FCFAF5;        /* nền trắng ngà, đỡ chói */
  color-scheme: only light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); color: var(--chu); background: var(--nen); 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; }
.dau-trang { position: sticky; top: 0; z-index: 40; background: var(--nen); 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 { display: grid; grid-template-columns: 92px 1fr 92px; align-items: center; gap: 0; }
  .dau-trang .hang1 > [data-mo-menu] { justify-self: start; margin-left: -10px; }
  .dau-trang .hang1 > .logo { justify-self: center; display: flex; }
  .dau-trang .nhom-dt { display: flex; justify-self: end; align-items: center; margin-right: -10px; }
  .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: var(--nen); 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: var(--nen); 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; }
@media (max-width: 899px) { body[data-trang="dat"] .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; }
.thanh-tren a.phai { color: var(--kem); text-decoration: none; }
.thanh-tren a.trai { color: var(--kem); text-decoration: none; }
.thanh-tren a.trai:hover { text-decoration: underline; }
.thanh-tren a.phai b { font-weight: 700; }
@media (max-width: 767px) { .thanh-tren .phai { display: inline; } .thanh-tren .khung { flex-direction: column; align-items: center; gap: 2px; text-align: center; } }
@media (max-width: 899px) { .tim input::placeholder { font-size: 13px; } }
@media (max-width: 420px) { .thanh-tren { font-size: 11px; } }
/* Mã QR Zalo */
.hop-zalo { position: fixed; inset: 0; z-index: 120; background: rgba(31,46,42,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.the-zalo { position: relative; background: #fff; border-radius: 22px; padding: 28px 28px 22px; width: min(360px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.the-zalo .dong-zalo { position: absolute; top: 8px; right: 8px; }
.ten-zalo { font-size: 18px; color: var(--xanh-dam); }
.khung-qr-zalo { border: 1px solid var(--vien); border-radius: 16px; padding: 10px; background: #fff; line-height: 0; }
.khung-qr-zalo svg { width: 100%; height: auto; display: block; }
.qr-chan { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; text-decoration: none; font-size: 12px; line-height: 1.4; color: #DCE8E3; }
.qr-chan svg { width: 84px; height: 84px; border-radius: 8px; flex: none; }
.qr-lien-he { display: flex; gap: 14px; align-items: center; background: #fff; color: var(--chu); border-radius: 16px; padding: 12px; font-size: 13px; line-height: 1.5; }
.qr-lien-he .khung-qr-zalo { width: 120px; flex: none; padding: 6px; }
.the-zalo .hoac { display: flex; align-items: center; gap: 10px; width: 100%; font-size: 12px; color: var(--chu-phu); margin-top: 4px; }
.the-zalo .hoac::before, .the-zalo .hoac::after { content: ""; flex: 1; height: 1px; background: var(--vien); }
.the-zalo .khung-qr-zalo { width: 210px; }
.hai-nut-zalo { display: flex; gap: 8px; width: 100%; flex-wrap: wrap; }
.hai-nut-zalo .nut { flex: 1 1 140px; }
.hop-zalo ~ .toast, .toast { z-index: 130; }
.lien-he-noi a.nut-fb { font-size: 14px; }

/* Contact: nút menu + popup liên hệ */
.menu-pc .muc > button.mo-lh { display: flex; align-items: center; padding: 10px 14px 13px; font: inherit; font-weight: 600; color: inherit; background: none; border: 0; border-bottom: 3px solid transparent; cursor: pointer; }
.menu-pc .muc > button.mo-lh:hover, .menu-pc .muc > button.mo-lh:focus-visible { border-bottom-color: var(--xanh); }
.the-lh { width: min(400px, 100%); align-items: stretch; text-align: left; gap: 0; }
.the-lh .ten-zalo { text-align: center; margin-bottom: 14px; }
.khoi-lh { display: flex; flex-direction: column; gap: 4px; background: var(--kem); border-radius: 14px; padding: 14px; margin-bottom: 6px; }
.khoi-lh .hai-nut-zalo { margin-top: 8px; }
.sdt-lh { font-size: 22px; color: var(--xanh-dam); letter-spacing: .3px; }
.nhan-lh { font-size: 12px; font-weight: 600; color: var(--chu-phu); text-transform: uppercase; letter-spacing: .4px; }
.dong-lh { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--vien); }
.dong-lh:last-child { border-bottom: 0; }
.gt-lh { font-size: 14px; font-weight: 600; text-align: right; }
.gt-lh a { color: var(--xanh-dam); text-decoration: none; }
.gt-lh a:hover { text-decoration: underline; }
.chua-co { color: var(--chu-phu); font-weight: 400; font-style: italic; }
.nhom-menu > button[data-mo-lien-he] { justify-content: flex-start; }
.dong-lh .nhan-lh { flex-shrink: 0; white-space: nowrap; }

/* Banner chạy vòng (trang chủ) */
.banner-chay { position: relative; margin-top: 16px; border-radius: 24px; overflow: hidden; background: var(--kem); }
.banner-chay .ray { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.banner-chay .ray::-webkit-scrollbar { display: none; }
.banner-chay .slide { flex: 0 0 100%; scroll-snap-align: start; margin-top: 0; border-radius: 0; }
.hero .tieu-hero { font-size: 32px; max-width: 560px; }
.hero .hinh-hero img { position: relative; z-index: 1; height: 210px; width: auto; max-width: 92%; object-fit: contain; margin-bottom: 7%; filter: drop-shadow(0 16px 22px rgba(31,46,42,.18)); }
.hero .chu-anh { position: absolute; z-index: 2; right: 16px; bottom: 10px; font-size: 11px; color: var(--chu-phu); background: rgba(255,255,255,.75); padding: 3px 9px; border-radius: 999px; }
.banner-chay .nut-chuyen { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--vien); background: rgba(255,255,255,.9); color: var(--xanh-dam); font-size: 26px; line-height: 1; cursor: pointer; display: none; align-items: center; justify-content: center; padding-bottom: 3px; }
.banner-chay .nut-chuyen:hover { background: #fff; }
.banner-chay .truoc { left: 14px; } .banner-chay .sau { right: 14px; }
.banner-chay .cham-bn { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3; display: flex; justify-content: center; gap: 8px; pointer-events: none; }
.banner-chay .cham-bn button { pointer-events: auto; width: 9px; height: 9px; padding: 0; border-radius: 999px; border: 0; background: rgba(49,95,85,.3); cursor: pointer; transition: width .2s, background .2s; }
.banner-chay .cham-bn button[aria-selected="true"] { width: 26px; background: var(--xanh-dam); }
@media (min-width: 900px) {
  .hero .tieu-hero { font-size: 50px; }
  .hero .hinh-hero img { height: 360px; }
  .banner-chay .nut-chuyen { display: flex; }
  .banner-chay .slide .chu-hero { padding-left: 76px; }
  .hero .chu-anh { right: 76px; bottom: 16px; }
}
@media (max-width: 899px) {
  .banner-chay .slide { flex-direction: column; flex-wrap: nowrap; }
  .banner-chay .hinh-hero { order: -1; flex: none; min-height: 0; height: 220px; padding-top: 14px; }
  .banner-chay .hinh-hero img { height: 190px; margin-bottom: 14px; }
  .banner-chay .slide::before { width: 300px; height: 300px; top: -140px; right: -60px; }
  .banner-chay .chu-hero { flex: 1 1 auto; padding: 14px 20px 40px; gap: 10px; justify-content: flex-start; }
  .banner-chay .tieu-hero { font-size: 26px; }
  .banner-chay .chu-hero p { font-size: 14px; }
  .banner-chay .nut-nhom { flex-wrap: nowrap; gap: 8px; }
  .banner-chay .nut-nhom .nut { flex: 1 1 0; padding-left: 10px; padding-right: 10px; min-height: 44px; font-size: 14px; text-align: center; white-space: nowrap; }
  .banner-chay .chu-anh { display: none; }
}

/* Nút thêm vào giỏ trên khung sản phẩm (không chuyển trang) */
.the-sp .hang-nut { display: flex; gap: 8px; align-items: stretch; }
.the-sp .hang-nut .nut { flex: 1 1 auto; min-width: 0; padding: 0 8px; white-space: nowrap; }
.nut-them-gio { flex: none; position: relative; width: 42px; min-height: 40px; border-radius: 999px; border: 1.5px solid var(--xanh-dam); background: #fff; color: var(--xanh-dam); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .15s, color .15s, transform .15s; }
.nut-them-gio svg { width: 20px; height: 20px; }

.nut-them-gio:hover { background: var(--xanh-dam); color: #fff; }
.nut-them-gio:disabled { opacity: .4; cursor: not-allowed; background: #fff; color: var(--xanh-dam); }
.nut-them-gio.da-them { background: var(--xanh-dam); color: #fff; transform: scale(1.08); }
.nay { animation: nay .5s ease; }
@keyframes nay { 0% { transform: scale(1); } 35% { transform: scale(1.25); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .nay, .nut-them-gio { animation: none; transition: none; } }

/* Phân loại sản phẩm */
.cham-loai { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--chu-phu); margin-top: -2px; }
.cham-loai i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--vien); }
.cham-loai span { margin-left: 4px; }
.ds-loai { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-loai { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 5px 14px 5px 5px; border: 1.5px solid var(--vien); border-radius: 12px; background: #fff; font: inherit; font-size: 14px; color: var(--chu); cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s; }
.chip-loai img { width: 38px; height: 38px; object-fit: cover; border-radius: 8px; background: #fff; }
.chip-loai i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.chip-loai:hover:not([disabled]) { border-color: var(--xanh); }
.chip-loai[aria-pressed="true"] { border-color: var(--xanh-dam); box-shadow: 0 0 0 1px var(--xanh-dam); background: #F4F8F6; font-weight: 600; }
.chip-loai[disabled] { opacity: .45; cursor: not-allowed; }
.chip-loai small { color: var(--chu-phu); font-weight: 400; }
.chon-loai-ct { display: flex; flex-direction: column; gap: 8px; padding: 12px; margin: 0 -12px; border-radius: 14px; }
.chon-loai-ct .loi { color: var(--sale-chu, #A23B1B); font-size: 13px; font-weight: 600; min-height: 0; }
.chon-loai-ct.can-chon { background: #FDF1EC; animation: rung .4s; }
@keyframes rung { 0%,100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.loai-gio { font-size: 13px; color: var(--xanh); font-weight: 500; }
.the-chon { width: min(440px, 100%); align-items: stretch; text-align: left; gap: 12px; }
.dau-chon { display: flex; gap: 14px; align-items: flex-start; padding-right: 30px; }
.dau-chon > div:last-child { display: flex; flex-direction: column; gap: 4px; }
.anh-chon { width: 96px; height: 96px; flex: none; border-radius: 12px; overflow: hidden; background: var(--kem); display: flex; align-items: center; justify-content: center; border: 1px solid var(--vien); }
.anh-chon img.sp { width: 100%; height: 100%; object-fit: cover; } .anh-chon img.la { width: 40%; opacity: .35; }
.hang-chon { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--xanh); }
.the-chon .ds-loai { flex-direction: column; } .the-chon .chip-loai { width: 100%; }
.the-chon .xem-ct { text-align: center; font-size: 13px; color: var(--xanh-dam); }
@media (prefers-reduced-motion: reduce) { .chon-loai-ct.can-chon { animation: none; } }

/* Trang đặt hàng: sửa số lượng / xóa ngay trong tóm tắt */
.dong-dat .sua-dong { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.dong-dat .so-luong button { width: 34px; height: 34px; font-size: 16px; }
.dong-dat .so-luong button:disabled { opacity: .35; cursor: not-allowed; }
.dong-dat .so-luong span { min-width: 30px; text-align: center; }
.dong-dat .xoa { font-size: 13px; }
.dong-dat .tien-dong { white-space: nowrap; align-self: flex-start; }
/* Trang cảm ơn: sản phẩm trong đơn */
.sp-trong-don { border: 1px solid var(--vien); border-radius: 16px; padding: 14px 16px; background: #fff; display: flex; flex-direction: column; gap: 4px; }
.tieu-sp-don { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; border-bottom: 1px solid #F0ECE2; }
.sp-trong-don .dong-gio { padding: 10px 0; }
.tong-don { display: flex; flex-direction: column; gap: 6px; border-top: 1px dashed #CFC8B8; padding-top: 10px; font-size: 14px; }
.tong-don > div { display: flex; justify-content: space-between; gap: 12px; }
.tong-don .cuoi-don { font-size: 17px; font-weight: 700; color: var(--xanh-dam); }

/* Ô mã khuyến mãi (trang đặt hàng) */
.ma-km { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid #ECE6D8; }
.ma-km label { font-size: 13px; font-weight: 600; }
.o-ma-km { display: flex; gap: 8px; }
.o-ma-km input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--vien); border-radius: 10px; background: #fff; font: inherit; font-size: 14px; letter-spacing: .04em; }
.o-ma-km input:focus { outline: 2px solid var(--xanh); outline-offset: 1px; }
.o-ma-km .nut { flex: none; }
.km-bao { font-size: 12px; min-height: 0; }
.km-bao:empty { display: none; }
.km-bao.loi-km { color: #A12D1E; }
.dong-y b { font-weight: 600; color: var(--chu); }
.goi-y-km { font-size: 12px; color: var(--chu-phu); line-height: 1.5; }
.goi-y-km a { color: var(--xanh-dam); font-weight: 600; }

/* Trang cảm ơn: khung lưu mã đơn */
.luu-don { margin-top: 10px; width: min(440px, 100%); border: 1px dashed var(--xanh); border-radius: 16px; padding: 14px 16px; background: #F4F8F6; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.luu-don .ma-don-to { font-size: 26px; font-weight: 700; letter-spacing: .08em; color: var(--xanh-dam); }
.luu-don .phu { font-size: 13px; }
.luu-don .nut-chinh { width: 100%; }

/* Băng ảnh lướt ngang: bill + review (ảnh nhỏ, bấm để phóng to) */
.bang-anh { position: relative; min-width: 0; }
.khoi-bill .bang-anh { flex: 1 1 320px; }
.ray-anh { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px; }
.ray-anh::-webkit-scrollbar { display: none; }
.o-anh { flex: none; position: relative; width: 120px; aspect-ratio: 3/4; border-radius: 12px; overflow: hidden; padding: 0; border: 0; background: #3E7366; cursor: zoom-in; scroll-snap-align: start; }
.o-anh img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.o-anh:hover img { transform: scale(1.04); }
.ray-bill .o-trong { flex: none; width: 120px; aspect-ratio: 3/4; border-radius: 12px; background: #3E7366; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #DCE8E3; }
.o-review { width: 130px; border: 1px solid var(--vien); background: var(--kem); }
.o-review.o-trong { cursor: default; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; color: var(--chu-phu); padding: 8px; background: repeating-linear-gradient(180deg, var(--kem) 0 18px, #EFEAE0 18px 24px); }
.nut-bang { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--vien); background: rgba(255,255,255,.95); color: var(--xanh-dam); font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding-bottom: 2px; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.nut-bang.lui { left: -6px; } .nut-bang.toi { right: -6px; }
@media (min-width: 900px) { .o-anh { width: 140px; } .o-review { width: 150px; } }
/* Hộp xem ảnh phóng to */
.hop-anh { position: fixed; inset: 0; z-index: 140; background: rgba(15,22,20,.92); display: flex; align-items: center; justify-content: center; padding: 56px 16px 24px; }
.hop-anh figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; max-height: 100%; }
.hop-anh img { max-width: min(92vw, 900px); max-height: calc(100vh - 140px); object-fit: contain; border-radius: 8px; background: #fff; }
.hop-anh figcaption { color: #E7EFEC; font-size: 13px; text-align: center; }
.hop-anh .dong-anh { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.hop-anh .chuyen-anh { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; padding-bottom: 4px; }
.hop-anh .chuyen-anh.lui { left: 12px; } .hop-anh .chuyen-anh.toi { right: 12px; }
.hop-anh .dong-anh:hover, .hop-anh .chuyen-anh:hover { background: rgba(255,255,255,.28); }
/* băng ảnh: canh lại – bill 3 ô chia đều khung, nút ‹ › nằm mép ngoài, ẩn khi không cần */
.khoi-bill .bang-anh { flex: 1 1 360px; padding: 0 4px; }
.ray-bill { padding: 0; }
.ray-bill .o-anh, .ray-bill .o-trong { width: calc((100% - 20px) / 3); min-width: 0; }
.ray-bill .o-trong { text-align: center; padding: 0 4px; }
.nut-bang.lui { left: -14px; } .nut-bang.toi { right: -14px; }
.bang-anh.vua .nut-bang { display: none; }
.bang-anh.o-dau .nut-bang.lui, .bang-anh.o-cuoi .nut-bang.toi { opacity: 0; pointer-events: none; }
.nut-bang { transition: opacity .15s; }

/* Combo / quà tặng / ưu đãi (trang sản phẩm, giỏ, đặt hàng) */
.khu-uu-dai { border: 1px dashed var(--sale); background: var(--sale-nen); border-radius: 12px; padding: 14px; display: grid; gap: 10px; }
.tieu-uu-dai { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sale-chu); }
.ds-combo { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.o-combo { text-align: left; border: 1.5px solid var(--vien-dam); background: #fff; border-radius: 10px; padding: 10px 12px; cursor: pointer; display: grid; gap: 2px; font: inherit; color: var(--chu); min-height: 44px; }
.o-combo b { font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.o-combo .gia-combo { font-weight: 700; color: var(--sale-chu); font-size: 15px; }
.o-combo .gia-combo small { font-weight: 500; color: var(--chu-phu); font-size: 12px; }
.o-combo .phu { font-size: 12px; }
.o-combo:hover { border-color: var(--sale); }
.o-combo[aria-pressed="true"] { border-color: var(--sale); box-shadow: 0 0 0 1px var(--sale); background: var(--sale-nhat); }
.nhan-combo { display: inline-block; background: var(--sale); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; line-height: 1.6; }
.nho-combo { margin: -2px 0 0; font-size: 12px; }
.dong-qua { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.icon-qua { font-size: 18px; line-height: 1.2; }
.ds-uu-dai { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; }
.ds-uu-dai li { padding-left: 22px; position: relative; }
.ds-uu-dai li::before { content: '✓'; position: absolute; left: 4px; color: var(--ok); font-weight: 700; }
.gia-cu-nho { color: var(--chu-phu); font-size: 12px; }
.qua-gio { font-size: 12px; color: var(--sale-chu); }
.goi-y-combo { font-size: 12px; color: var(--ok); font-weight: 600; }

/* Thanh sắp xếp & lọc (danh mục / tìm kiếm) */
.thanh-loc { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 0 0 18px; padding: 12px 14px; background: #fff; border: 1px solid var(--vien); border-radius: 12px; }
.o-sx { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--chu-phu); font-weight: 600; }
.o-sx select { height: 40px; border: 1px solid var(--vien-dam); border-radius: 8px; padding: 0 10px; font: inherit; font-weight: 500; color: var(--chu); background: #fff; }
.chip-gia { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-gia button { height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--vien-dam); background: #fff; font: inherit; font-size: 13px; color: var(--chu); cursor: pointer; }
.chip-gia button[aria-pressed="true"] { background: var(--xanh-dam); border-color: var(--xanh-dam); color: #fff; }
.o-con-hang { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; margin-left: auto; }
.o-con-hang input { width: 18px; height: 18px; accent-color: var(--xanh-dam); }
.nut-chu { border: 0; background: none; color: var(--xanh-dam); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0; }
@media (max-width: 720px) {
  .thanh-loc { padding: 10px; gap: 10px; }
  .chip-gia { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; scrollbar-width: none; }
  .chip-gia button { flex: none; }
  .o-con-hang { margin-left: 0; }
}

/* Popup tìm không thấy */
.the-khong-thay { text-align: center; display: grid; gap: 12px; justify-items: center; }
.the-khong-thay p { margin: 0; line-height: 1.6; }
.icon-tim { width: 56px; height: 56px; border-radius: 50%; background: var(--kem); color: var(--xanh-dam); display: flex; align-items: center; justify-content: center; }
.the-khong-thay .hai-nut-zalo { display: grid; gap: 8px; width: 100%; }

/* Thẻ SP đang có ưu đãi: nơ hộp quà treo góc phải + dải chữ dưới ảnh */
.the-sp { position: relative; }
.no-qua { position: absolute; top: -1px; right: 16px; z-index: 2; width: 34px; height: 42px; background: var(--sale); color: #fff; display: flex; align-items: flex-start; justify-content: center; padding-top: 7px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.no-qua svg { width: 19px; height: 19px; }
.co-uu-dai .nhan-anh.het { top: 52px; }
.dai-uu-dai { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(180,83,42,.92); color: #fff; font-size: 11.5px; font-weight: 700; text-align: center; padding: 5px 6px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .no-qua { right: 12px; width: 30px; height: 38px; padding-top: 6px; } .no-qua svg { width: 17px; height: 17px; } .dai-uu-dai { font-size: 10.5px; } }

/* Hỏi đáp sản phẩm (dạng bình luận) */
.hoi-dap h2 .phu { font-family: var(--sans); font-size: 15px; font-weight: 500; }
.form-hoi { background: #fff; border: 1px solid var(--vien); border-radius: 14px; padding: 14px; display: grid; gap: 10px; margin-bottom: 18px; }
.form-hoi .o-nhap { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: var(--chu-phu); }
.form-hoi input, .form-hoi textarea { border: 1px solid var(--vien-dam); border-radius: 10px; padding: 10px 12px; font-size: 15px; font-weight: 400; color: var(--chu); background: #fff; width: 100%; }
.form-hoi input { height: 44px; }
.hang-hoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 320px)); gap: 10px; }
.form-hoi .o-nhap small { font-weight: 400; }
.form-hoi textarea { resize: vertical; min-height: 84px; }
.hang-gui { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hang-gui .phu { font-size: 12px; flex: 1 1 220px; }
.form-hoi .loi { color: #A12D1E; font-size: 13px; font-weight: 600; }
.form-hoi .loi:empty { display: none; }
.ds-hoi { display: grid; gap: 4px; }
.cau-hoi { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--vien); }
.cau-hoi:last-child { border-bottom: 0; }
.cau-hoi .av { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--kem); color: var(--xanh-dam); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.than-hoi { flex: 1; min-width: 0; }
.than-hoi p { margin: 4px 0 0; line-height: 1.6; overflow-wrap: anywhere; }
.dau-hoi { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.dau-hoi .phu { font-size: 12px; }
.tra-loi { display: flex; gap: 10px; margin-top: 10px; padding: 12px; background: var(--kem); border-radius: 12px; }
.tra-loi .av-shop { width: 32px; height: 32px; font-size: 11px; background: var(--xanh-dam); color: #fff; }
.nhan-shop { background: var(--xanh-dam); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; letter-spacing: .04em; }
.cho-tl { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--chu-phu); background: var(--kem); padding: 3px 10px; border-radius: 999px; }
.trong-hoi { color: var(--chu-phu); margin: 4px 0; }

.o #phuong_khac { margin-top: 6px; }
.o select:disabled { background: var(--kem); color: var(--chu-phu); }

/* Thanh toán: freeship QR, COD khóa, dòng giảm giá */
.nhan-freeship { font-style: normal; display: inline-block; margin-left: 6px; background: var(--ok); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; vertical-align: 1px; }
.chon-tt label.khoa { opacity: .55; cursor: not-allowed; }
.chon-tt label.khoa small { color: #A12D1E; opacity: 1; }
.tien-giam { color: var(--ok); font-weight: 700; }
.goi-y-ship { margin: -2px 0 2px; font-size: 12px; color: var(--chu-phu); background: var(--kem); padding: 6px 10px; border-radius: 8px; }
.km-bao.ok-km { color: var(--ok); }
.o-ma-km input:disabled { background: var(--kem); color: var(--ok); font-weight: 700; }

/* Hành trình đơn hàng + mã vận đơn */
.hanh-trinh { background: #fff; border: 1px solid var(--vien); border-radius: 14px; padding: 14px 16px; display: grid; gap: 10px; }
.hanh-trinh ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.hanh-trinh li { display: flex; gap: 12px; align-items: flex-start; position: relative; padding-bottom: 14px; color: var(--chu-phu); font-size: 14px; }
.hanh-trinh li:last-child { padding-bottom: 0; }
.hanh-trinh li:not(:last-child)::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: 0; width: 2px; background: var(--vien); }
.hanh-trinh li.xong:not(:last-child)::before { background: var(--ok); }
.cham-ht { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--vien-dam); background: #fff; margin-top: 2px; position: relative; z-index: 1; }
.hanh-trinh li.xong { color: var(--chu); }
.hanh-trinh li.xong .cham-ht { background: var(--ok); border-color: var(--ok); }
.hanh-trinh li.hien-tai { font-weight: 700; }
.hanh-trinh li.hien-tai .cham-ht { box-shadow: 0 0 0 4px rgba(47,122,79,.18); }
.hanh-trinh li small { display: block; font-size: 12px; font-weight: 400; color: var(--chu-phu); }
.van-don { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; background: var(--kem); border-radius: 10px; padding: 10px 12px; }
.van-don > div { display: grid; gap: 2px; }
.van-don b { display: flex; align-items: center; gap: 8px; font-size: 16px; letter-spacing: .03em; }
.don-huy { margin: 0; color: #A12D1E; }

/* Trang tình trạng đơn (tra cứu) */
.dau-tinh-trang { text-align: center; padding-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 18px; }
.nhan-tt { display: inline-block; padding: 5px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; background: var(--kem); color: var(--xanh-dam); }
.nhan-tt.tt-dang_giao, .nhan-tt.tt-da_xac_nhan { background: #E6F0FB; color: #1F5FA8; }
.nhan-tt.tt-hoan_thanh { background: #E3F2E8; color: var(--ok); }
.nhan-tt.tt-huy { background: #FBE9E7; color: #A12D1E; }
.nhan-tt.tt-hoan, .nhan-tt.tt-da_hoan { background: #FBE9E7; color: #A12D1E; }
.hanh-trinh li.loi .cham-ht { background: #A12D1E; border-color: #A12D1E; box-shadow: 0 0 0 4px rgba(161,45,30,.15); }
.don-tinh-trang { display: block; max-width: 640px; margin: 0 auto; }
.don-tinh-trang > .tt-ck { width: 100%; }
.khoi-tt-ck { display: grid; gap: 12px; justify-items: stretch; }
.khoi-tt-ck .qr { justify-self: center; }
.dau-tinh-trang .ma-don-to { font-size: 32px; font-weight: 800; letter-spacing: .08em; color: var(--xanh-dam); font-family: var(--sans); }
.nhom-chon { display: grid; gap: 8px; }
.the-chon .nhom-chon + .nhom-chon, .chon-loai-ct .nhom-chon + .nhom-chon { margin-top: 6px; }
.chip-loai.mo { opacity: .55; border-style: dashed; }

/* Về Herbal.Seed: câu chuyện + các nhóm hàng săn */
.cau-chuyen { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: center; }
.anh-cau-chuyen { flex: 1 1 320px; max-width: 440px; margin: 0; }
.anh-cau-chuyen img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: 22px; box-shadow: 0 14px 34px rgba(31,61,54,.16); }
.anh-cau-chuyen figcaption { font-size: 12px; color: var(--chu-phu); text-align: center; margin-top: 8px; }
.chu-cau-chuyen { flex: 1 1 380px; min-width: 0; }
.chu-cau-chuyen h2 { font-size: 30px; margin-bottom: 12px; }
.chu-cau-chuyen p { margin: 0 0 12px; line-height: 1.75; }
.chu-cau-chuyen .loi-ket { font-family: var(--serif); font-size: 19px; color: var(--xanh-dam); line-height: 1.5; margin-top: 16px; }
.chu-cau-chuyen .nut-nhom { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.o-san { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.o-san li { background: #fff; border: 1px solid var(--vien); border-radius: 14px; padding: 14px 16px; display: grid; gap: 4px; }
.o-san b { color: var(--xanh-dam); }
.o-san span { font-size: 13px; color: var(--chu-phu); }
@media (min-width: 900px) { .o-san { grid-template-columns: repeat(3, 1fr); } }
.moc-moi { display: grid; gap: 2px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #F2F7F4; border: 1px solid #D5E6DC; font-size: 14px; }
.moc-moi .phu { font-size: 12px; }
.moc-moi b { font-weight: 500; }
.noi-dung-tab .anh-nd { display: block; max-width: 100%; height: auto; margin: 10px 0; border-radius: 12px; }
/* nội dung SP có định dạng (soạn ở trang quản lý) */
.noi-dung-tab.nd-html { white-space: normal; }
.nd-html p, .nd-html div, .nd-html h3, .nd-html h4 { margin: 0; }
.nd-html h3 { font-size: 1.25em; margin: 10px 0 4px; } .nd-html h4 { font-size: 1.1em; margin: 8px 0 4px; }
.nd-html ul, .nd-html ol { margin: 4px 0 8px; padding-left: 22px; }
.nd-html img { display: block; max-width: 100%; height: auto; margin: 10px 0; border-radius: 12px; }
.nd-html table, .ql-soan table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: .95em; }
.nd-html th, .nd-html td, .ql-soan th, .ql-soan td { border: 1px solid #DDD8CC; padding: 8px 10px; text-align: left; vertical-align: top; }
.nd-html th, .ql-soan th { background: #F3F1EA; font-weight: 600; }
.nd-html blockquote { margin: 8px 0; padding: 8px 14px; border-left: 3px solid #2F6B4F; background: #F6F8F4; }
.c-nho { font-size: .85em; } .c-lon { font-size: 1.2em; } .c-to { font-size: 1.5em; line-height: 1.3; }
.m-do { color: #C0392B; } .m-cam { color: #D9731A; } .m-xanh { color: #2F6B4F; } .m-hong { color: #C2185B; } .m-xam { color: #7A7A7A; }
.nen-vang { background: #FFF0A8; } .nen-xanh { background: #DCEFE3; } .nen-hong { background: #FBE0EA; }
.canh-giua { text-align: center; } .canh-giua img { margin-left: auto; margin-right: auto; } .canh-phai { text-align: right; }
@media (max-width: 640px) { .nd-html table { display: block; overflow-x: auto; } }
.tra-loi .av-shop { overflow: hidden; } .tra-loi .av-shop img { width: 100%; height: 100%; object-fit: cover; }
.nd-html table, .ql-soan table { table-layout: fixed; }
.nd-html td, .nd-html th { overflow-wrap: anywhere; }
/* ---------- trang Order: tự tính giá hàng Mỹ ---------- */
.nhom-menu > a.nhom-link { display: flex; align-items: baseline; gap: 8px; height: 56px; font-weight: 700; font-size: 16px; color: var(--xanh-dam); text-decoration: none; line-height: 56px; }
.nhom-menu > a.nhom-link small { font-weight: 500; font-size: 12px; color: var(--chu-phu); }
.od-dau { padding: 28px 0 8px; max-width: 760px; }
.od-dau h1 { font-size: 32px; margin: 0 0 8px; }
.od-dau .phu { margin: 0; }
.od-buoc { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.od-buoc li { display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border-radius: 999px; background: var(--kem); font-size: 13px; font-weight: 600; color: var(--xanh-dam); }
.od-buoc b { width: 24px; height: 24px; border-radius: 50%; background: var(--xanh-dam); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.od-luoi { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; padding: 20px 0 40px; }
.od-luoi form { flex: 3 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.od-ds { display: flex; flex-direction: column; gap: 14px; }
.od-khoi { background: #fff; border: 1px solid var(--vien); border-radius: 20px; padding: 18px; display: grid; gap: 12px; }
.od-khoi h2 { font-size: 18px; margin: 0; }
.od-sp-dau { display: flex; justify-content: space-between; align-items: center; }
.od-xoa { border: 0; background: none; color: #A12D1E; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; padding: 6px; }
.od-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.od-3 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr) minmax(0, 1.2fr); gap: 12px; }
.od-3 .o, .od-2 .o { min-width: 0; }
.od-3 input, .od-2 input { width: 100%; min-width: 0; }
.od-can { display: flex; gap: 6px; } .od-can input { flex: 1; } .od-can select { width: 76px; flex: none; padding: 0 8px; }
.od-uoc select { width: 100%; color: var(--chu-phu); }
.od-sp-gia { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 1px dashed var(--vien-dam); font-size: 14px; color: var(--chu-phu); }
.od-sp-gia b { font-size: 17px; color: var(--xanh-dam); }
#od-them { align-self: flex-start; }
.od-luoi .loi { color: #A12D1E; font-weight: 600; font-size: 13px; margin: 0; min-height: 1em; }
.od-tong { flex: 2 1 300px; min-width: 0; position: sticky; top: 140px; background: var(--kem); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.od-tong-tieu { font-size: 18px; color: var(--xanh-dam); }
.od-dong { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.od-dong:first-of-type b { font-size: 22px; color: var(--xanh-dam); }
.od-coc { padding: 10px 12px; margin: 0 -12px; background: #fff; border-radius: 12px; } .od-coc b { color: var(--sale); }
.od-ghi { font-size: 12px; color: var(--chu-phu); margin: 0; }
.od-zalo { font-size: 13px; text-align: center; color: var(--xanh-dam); }
.od-xong { padding: 24px 0 48px; }
.od-xong-the { max-width: 620px; margin: 0 auto; background: #fff; border: 1px solid var(--vien); border-radius: 24px; padding: 28px; text-align: center; display: grid; gap: 6px; }
.od-xong-the h2 { margin: 6px 0; } .od-xong-the p { margin: 0; } .od-xong-the .nut-nhom { justify-content: center; margin-top: 12px; }
.od-tick { width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; background: var(--xanh-dam); color: #fff; font-size: 28px; display: flex; align-items: center; justify-content: center; }
.od-ma { font-size: 20px; letter-spacing: .04em; color: var(--xanh-dam); }
@media (max-width: 640px) {
  .od-dau h1 { font-size: 26px; }
  .od-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .od-3 .o:last-child { grid-column: 1 / -1; }
  .od-tong { position: static; }
}
.od-thanh { display: none; }
.od-thanh[hidden] { display: none !important; }
@media (max-width: 640px) {
  .od-thanh { position: fixed; left: 12px; right: 76px; bottom: 12px; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 16px; background: var(--xanh-dam); color: #fff; text-decoration: none; font-size: 14px; box-shadow: 0 10px 28px rgba(31,46,42,.28); }
  .od-thanh b { font-size: 16px; } .od-thanh-nut { font-weight: 700; white-space: nowrap; }
  .od-luoi { padding-bottom: 80px; }
}
/* Order: gợi ý khi gõ tên */
.od-tim { position: relative; }
.od-tim > label { font-size: 13px; font-weight: 600; }
.od-goi-y { position: absolute; left: 0; right: 0; top: calc(100% - 2px); z-index: 30; background: #fff; border: 1px solid var(--vien-dam); border-radius: 14px; box-shadow: 0 14px 34px rgba(0,0,0,.14); max-height: 380px; overflow-y: auto; padding: 6px; }
.od-goi-y[hidden] { display: none; }
.od-gy-nhom { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--chu-phu); padding: 8px 10px 4px; }
.od-gy { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 10px; background: none; font: inherit; color: var(--chu); cursor: pointer; text-decoration: none; }
.od-gy:hover, .od-gy.dang-chon { background: var(--kem); }
.od-gy img, .od-gy i { width: 40px; height: 40px; flex: none; border-radius: 8px; object-fit: contain; background: #F3F1EA; }
.od-gy span { display: grid; gap: 2px; min-width: 0; } .od-gy b { font-size: 14px; font-weight: 600; line-height: 1.35; } .od-gy small { font-size: 12px; color: var(--chu-phu); }
.od-da-chon { font-size: 12px; color: var(--xanh-dam); font-weight: 600; } .od-da-chon[hidden] { display: none; }
.od-sp select { width: 100%; }
.od-sp .od-can select { width: 80px; flex: none; }
.od-sp .od-can input { min-width: 0; }
.od-gy-tim { display: grid; gap: 2px; width: 100%; margin-top: 4px; padding: 12px; border: 1px dashed var(--xanh-dam); border-radius: 12px; background: #F6F8F4; color: var(--xanh-dam); font: inherit; font-weight: 700; font-size: 14px; text-align: left; cursor: pointer; }
.od-gy-tim small { font-weight: 500; color: var(--chu-phu); font-size: 12px; }
.od-gy-tim.dang-chon, .od-gy-tim:hover { background: var(--kem); }
.od-gy-tb { margin: 6px 4px; padding: 10px 12px; font-size: 13px; color: var(--chu-phu); background: #F7F5EF; border-radius: 10px; }
.od-gy-san { background: #F2F7F3; }
body.od-dang-go .od-thanh { display: none !important; }
@media (max-width: 760px) { .od-goi-y { max-height: 62vh; } }
.od-lien-ket { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; } .od-lien-ket[hidden] { display: none; }
.od-lien-ket a { color: var(--xanh-dam); font-weight: 600; }
.od-o-ten { position: relative; display: block; }
.od-o-ten input { width: 100%; padding-right: 44px; }
.od-xoa-ten { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%; background: #E9E5DA; color: var(--chu); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.od-xoa-ten:hover { background: #DCD6C7; } .od-xoa-ten[hidden] { display: none; }
/* Order: khung lưu ý đầu trang */
.od-luu-y { margin-top: 18px; background: #FFF8E6; border: 1px solid #F1DFAE; border-radius: 18px; padding: 16px 18px; max-width: 900px; }
.od-luu-y-tieu { display: block; font-size: 15px; color: #7A5A12; margin-bottom: 8px; }
.od-luu-y ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.od-luu-y li { display: flex; gap: 10px; align-items: flex-start; }
.od-luu-y li > span { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.od-luu-y p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--chu); }
.od-luu-y a { color: var(--xanh-dam); font-weight: 600; }
.od-dau { max-width: 900px; }
@media (max-width: 640px) { .od-luu-y { padding: 14px; } .od-luu-y p { font-size: 13.5px; } }
/* Order: popup cảm ơn sau khi gửi */
.od-popup-nen { position: fixed; inset: 0; z-index: 300; background: rgba(20,30,25,.55); display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; overflow-y: auto; }
.od-popup { position: relative; width: min(560px, 100%); margin: auto 0; background: #fff; border-radius: 24px; padding: 26px 22px 22px; display: grid; gap: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.25); text-align: left; }
.od-popup h2 { margin: 0; font-size: 21px; text-align: center; color: var(--xanh-dam); }
.od-popup .od-tick { margin: 0 auto; }
.od-popup-dong { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #F3F1EA; font-size: 22px; cursor: pointer; color: var(--chu); }
.od-popup-ma { margin: 0; text-align: center; font-size: 15px; display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.od-popup-ma b { font-size: 18px; letter-spacing: .04em; color: var(--xanh-dam); }
.od-popup-ds { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.od-popup-ds li { display: flex; gap: 10px; align-items: flex-start; } .od-popup-ds li > span { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #F6F2E6; display: flex; align-items: center; justify-content: center; }
.od-popup-ds p { margin: 0; font-size: 14px; line-height: 1.55; }
.od-popup-stk { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; padding: 14px; border: 1px solid var(--vien); border-radius: 16px; background: #FBFAF6; }
.od-popup-qr { width: 150px; flex: none; }
.od-popup-tt { flex: 1 1 220px; min-width: 0; }
.od-popup-ghi { margin: 8px 0 0; font-size: 12px; color: var(--chu-phu); }
.od-popup .nut-nhom { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
body.od-khoa-cuon { overflow: hidden; }
@media (max-width: 480px) { .od-popup { padding: 22px 16px 18px; } .od-popup-qr { width: 100%; max-width: 200px; margin: 0 auto; } }
.od-sl-ghi { display: block; font-size: 11.5px; font-weight: 500; color: var(--chu-phu); margin-top: 4px; line-height: 1.35; }
.od-sl-ghi.dat { color: var(--xanh-dam); font-weight: 600; } .od-sl-ghi a { color: var(--xanh-dam); }
/* Order: ảnh khách gửi */
.od-anh-kh { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--vien-dam); border-radius: 14px; background: #FCFBF7; }
.od-anh-tieu { font-size: 13px; font-weight: 600; } .od-anh-tieu small { font-weight: 500; color: var(--chu-phu); }
.od-anh-ds { display: flex; gap: 8px; flex-wrap: wrap; } .od-anh-ds:empty { display: none; }
.od-anh-o { position: relative; width: 76px; height: 76px; border-radius: 12px; overflow: hidden; border: 1px solid var(--vien); background: #F3F1EA; display: flex; align-items: center; justify-content: center; }
.od-anh-o img { width: 100%; height: 100%; object-fit: cover; } .od-anh-o i { font-style: normal; font-size: 24px; }
.od-anh-o.dang img { opacity: .45; } .od-anh-o b { position: absolute; inset: auto 0 0; font-size: 10px; text-align: center; background: rgba(255,255,255,.85); padding: 2px; }
.od-anh-o button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
.od-anh-cu { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; } .od-anh-cu[hidden] { display: none; }
.od-anh-chon { display: inline-flex; align-items: center; padding: 0 14px; min-height: 42px; border-radius: 999px; border: 1px solid var(--xanh-dam); color: var(--xanh-dam); font-weight: 600; font-size: 14px; cursor: pointer; background: #fff; }
.od-anh-dan { flex: 1 1 200px; min-height: 42px; padding: 10px 12px; border: 1px solid var(--vien-dam); border-radius: 12px; background: #fff; font-size: 13px; color: var(--chu-phu); outline: none; caret-color: transparent; }
.od-anh-dan:focus { border-color: var(--xanh-dam); box-shadow: 0 0 0 3px rgba(49,95,85,.15); }
.od-anh-ghi { font-size: 12px; color: var(--chu-phu); }
.od-popup-luuy h2 { margin-top: 4px; } .od-popup-luuy .od-popup-ds { max-height: 56vh; overflow-y: auto; padding-right: 4px; }
.od-ic { width: 16px; height: 16px; fill: none; stroke: var(--xanh-dam, #315F55); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.od-luu-y li > span, .od-popup-luuy li > span { background: #fff; border: 1px solid #E8DDBE; }
/* Tra cứu đơn order */
.tc-order { margin: 22px 0 40px; background: #fff; border: 1px solid var(--vien, #E6E0D0); border-radius: 18px; padding: 18px; }
.tc-dau { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; border-bottom: 1px dashed #E0D8C4; padding-bottom: 10px; }
.tc-dau span { font-size: 14px; color: #6b7570; }
.tc-dau b { font-size: 18px; color: var(--xanh-dam); letter-spacing: .5px; }
.tc-buoc { list-style: none; margin: 14px 0 6px; padding: 0; }
.tc-buoc li { position: relative; padding: 0 0 16px 30px; color: #9aa09c; font-size: 14.5px; }
.tc-buoc li::before { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #CFC8B6; background: #fff; z-index: 1; }
.tc-buoc li::after { content: ""; position: absolute; left: 10px; top: 18px; bottom: -2px; width: 2px; background: #E3DCCB; }
.tc-buoc li:last-child { padding-bottom: 0; } .tc-buoc li:last-child::after { display: none; }
.tc-buoc li b { display: block; font-weight: 600; }
.tc-buoc li small { display: block; font-size: 12.5px; margin-top: 2px; color: #6b7570; }
.tc-buoc li.qua { color: var(--xanh-dam); } .tc-buoc li.qua::before { background: var(--xanh-dam); border-color: var(--xanh-dam); } .tc-buoc li.qua::after { background: var(--xanh-dam); }
.tc-buoc li.dang { color: var(--xanh-dam); } .tc-buoc li.dang b { font-weight: 800; } .tc-buoc li.dang::before { background: #C9962B; border-color: #C9962B; box-shadow: 0 0 0 4px #F6E9C8; }
.tc-sp { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #E0D8C4; font-size: 14px; }
.tc-sp p { margin: 4px 0 0; } .tc-sp span { color: #6b7570; }
.tc-gia { margin: 10px 0 0; font-size: 15px; }
/* đầu trang PC: mép trái menu thẳng với logo, mục Contact cùng màu các mục khác */
@media (min-width: 900px) {
  .menu-pc { margin-left: -14px; }
  .menu-pc .muc > button.mo-lh { color: var(--xanh-dam); }
  .menu-pc .muc > a { color: var(--xanh-dam); }
}

/* ===== Đánh giá sản phẩm (khách đã mua) ===== */
body.od-khoa-cuon { overflow: hidden; }
.dg-sao { display: inline-flex; gap: 2px; vertical-align: middle; }
.dg-sao svg { width: 18px; height: 18px; fill: #E3DDCF; display: block; }
.dg-sao .bat svg { fill: #E0A526; }
.dg-sao.nho svg { width: 14px; height: 14px; }
.dg-tong { display: grid; gap: 16px; background: #fff; border: 1px solid var(--vien); border-radius: 16px; padding: 16px; }
@media (min-width: 520px) { .dg-tong { grid-template-columns: 140px 1fr; align-items: center; gap: 22px; } }
.dg-diem { display: grid; justify-items: center; gap: 4px; text-align: center; }
.dg-diem b { font-size: 40px; line-height: 1; color: var(--xanh-dam); font-family: var(--serif); }
.dg-diem > span:not(.dg-sao) { display: none; }
.dg-diem small { color: var(--chu-phu); font-size: 13px; }
.dg-thanh { display: grid; gap: 6px; font-size: 12px; color: var(--chu-phu); }
.dg-thanh div { display: grid; grid-template-columns: 34px 1fr 26px; align-items: center; gap: 8px; }
.dg-thanh i { height: 8px; border-radius: 6px; background: #EFEBE1; overflow: hidden; }
.dg-thanh em { display: block; height: 100%; background: #E0A526; border-radius: 6px; }
.dg-viet { display: grid; justify-items: center; text-align: center; gap: 4px; background: var(--kem); border-radius: 14px; padding: 14px 10px; }
.dg-viet b { color: var(--xanh-dam); font-size: 15px; }
.dg-viet .phu { font-size: 13px; }
.dg-chon { display: flex; gap: 4px; align-items: center; margin-top: 4px; }
.dg-chon button { border: 0; background: none; padding: 3px; cursor: pointer; border-radius: 8px; line-height: 0; }
.dg-chon button svg { width: 32px; height: 32px; fill: #fff; stroke: #CDBF9C; stroke-width: 1.2; transition: transform .12s, fill .12s; }
.dg-chon button.bat svg { fill: #E0A526; stroke: #E0A526; }
.dg-chon button:hover svg { transform: scale(1.12); }
.dg-chon button:focus-visible { outline: 2px solid var(--xanh); }
.dg-chon.lon { justify-content: center; flex-wrap: wrap; }
.dg-chon.lon button svg { width: 36px; height: 36px; }
.dg-chu { width: 100%; text-align: center; font-size: 13px; font-weight: 600; color: var(--xanh-dam); min-height: 18px; }
.dg-ds { display: grid; gap: 10px; }
.dg-mot { background: #fff; border: 1px solid var(--vien); border-radius: 14px; padding: 14px 16px; display: grid; gap: 6px; }
.dg-mot-dau { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; }
.dg-da-mua { font-size: 12px; color: var(--ok); font-weight: 600; }
.dg-mot-dau time { margin-left: auto; font-size: 12px; color: var(--chu-phu); }
.dg-mot p { margin: 0; font-size: 14px; line-height: 1.6; white-space: pre-line; }
.dg-trong { text-align: center; }
.dg-popup .nut-nhom { display: flex; gap: 10px; flex-wrap: wrap; }
.dg-popup .nut-nhom .nut { flex: 1 1 140px; }
.dg-popup .o small.phu { font-weight: 400; font-size: 12px; }
.dg-popup .loi { color: #A12D1E; font-size: 14px; font-weight: 600; text-align: center; }
.dg-popup .loi:empty { display: none; }
/* trang chủ */
.dg-the { flex: none; width: 280px; scroll-snap-align: start; background: #fff; border: 1px solid var(--vien); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--chu); transition: border-color .15s, box-shadow .15s; }
.dg-the:hover { border-color: var(--sage); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.dg-the-sp { display: flex; gap: 10px; align-items: center; }
.dg-the-sp img { flex: none; width: 56px; height: 56px; object-fit: contain; border-radius: 10px; background: var(--kem); }
.dg-the-sp > div { display: grid; gap: 3px; min-width: 0; }
.dg-the-sp b { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dg-the-diem { font-size: 12px; color: var(--chu-phu); display: flex; align-items: center; gap: 4px; }
.dg-the-diem b { color: var(--chu); font-size: 12px; }
.dg-the p { margin: 0; font-size: 14px; line-height: 1.55; flex: 1; }
.dg-the-ten { font-size: 12px; color: var(--ok); font-weight: 600; }
@media (min-width: 900px) { .dg-the { width: 300px; } }
/* dòng sao gọn dưới tên sản phẩm + popup bảng đánh giá */
.dg-dong { margin: -4px 0 2px; min-height: 26px; }
.dg-mo { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 2px 0; cursor: pointer; font: inherit; font-size: 14px; color: var(--chu); }
.dg-mo b { font-size: 14px; }
.dg-mo > span:last-child { color: var(--xanh-dam); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dg-mo:hover > span:last-child { color: var(--xanh); }
.dg-bang { width: min(640px, 100%); }
.dg-ten-sp { margin: -8px 0 0; text-align: center; font-size: 13px; }
.dg-bang .dg-ds { max-height: none; }
.dg-bang .dg-mot { background: var(--nen); }
.dg-form { display: grid; gap: 14px; }
.dg-viet.dg-form { justify-items: stretch; text-align: left; gap: 12px; padding: 16px; }
.dg-viet.dg-form > b, .dg-viet.dg-form .loi { text-align: center; }
.dg-viet.dg-form .o input, .dg-viet.dg-form .o textarea { background: #fff; }
.dg-viet.dg-form .dg-chon { margin-top: 0; }
.dg-xong { gap: 6px; }
.dg-ds-tieu { margin: 4px 0 -4px; font-size: 16px; color: var(--xanh-dam); font-family: var(--sans); }
.dg-them { justify-self: center; min-width: 220px; }
.dg-mot[hidden] { display: none; }
.od-re { display: inline-flex; align-items: center; line-height: 1.45; gap: 8px; margin: 10px 0 0; padding: 8px 14px; border-radius: 999px; background: #EAF3EF; color: var(--xanh-dam); font-size: 14px; }
.od-re .od-ic { width: 18px; height: 18px; flex: none; }
.sp-re { margin: 0; align-self: flex-start; font-size: 13px; border-radius: 14px; }
/* đặt mua hộ khi hết hàng */
.mua-ho { display: grid; gap: 10px; padding: 14px 16px; border: 1px dashed var(--sage); border-radius: 14px; background: #F4FAF7; }
.mua-ho p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--chu); }
.mua-ho .mua-pc .nut { flex: 1; text-align: center; text-decoration: none; }
.mua-ho-nho { margin: -4px 0 0; font-size: 13px; color: var(--chu-phu); }
.mua-ho-nho a { font-weight: 600; color: var(--xanh-dam); }
.od-mua-ho { display: grid; gap: 4px; padding: 12px 16px; margin-bottom: 12px; border-radius: 14px; background: #EAF3EF; border: 1px solid var(--sage); font-size: 14px; line-height: 1.5; }
.od-mua-ho b { color: var(--xanh-dam); }
.od-anh-shop img { object-fit: contain !important; background: #fff; }