/*
Theme Name: Hoàng Trà Luxe
Theme URI: https://trasentayho.vn
Author: Thiết kế riêng cho Hoàng Trà
Description: Giao diện thương mại điện tử hiện đại cho Trà Sen Tây Hồ — Hoàng Trà. Thẻ bo góc lớn, chữ sans đậm, nhấn đỏ sơn mài, tối ưu cho quà biếu tặng.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: hoangtra-luxe
Tags: woocommerce, e-commerce, gifts
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --bg:#FFFFFF;
  --panel:#F4F4F6;
  --panel-2:#FAFAFA;
  --ink:#121014;
  --ink-70:#4B4952;
  --ink-50:#6F6C76;   /* đạt 4.5:1 trên nền trắng — chuẩn WCAG AA cho chữ nhỏ */
  --line:#E9E9EE;

  --brand:#C8102E;
  --brand-ink:#96061F;
  --brand-soft:#FDEEF1;
  --gold:#B08D3F;
  --green:#1BA94C;

  --sans:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --r-card:22px;
  --r-panel:32px;
  --r-pill:999px;
  --r-field:14px;

  --sh-1:0 2px 10px rgba(18,16,20,.05);
  --sh-2:0 12px 34px rgba(18,16,20,.09);
  --sh-3:0 20px 50px rgba(18,16,20,.13);

  --wrap:1360px;          /* cột nội dung */
  --gut:clamp(.9rem,2.6vw,2rem);   /* mép ngoài của khối nền */
  --pad:clamp(1.15rem,2.8vw,2.5rem);  /* đệm trong khối nền */
  --pad-y:clamp(1.9rem,4.2vw,3.25rem);

  /* Cụm nút nổi góc phải dưới — dùng chung cho nút hotline và nút lên đầu
     trang. Trước đây mỗi nút một token riêng (--gut cho nút hotline,
     clamp(1rem,2.5vw,1.75rem) cho nút lên đầu) nên ở khổ 375px một nút
     cách mép 14,4px còn nút kia 16px: hai nút không bao giờ thẳng hàng. */
  --noi-phai:clamp(1rem,2.5vw,1.75rem);
  --noi-duoi:clamp(1rem,2.5vw,1.75rem);
  --noi-co:56px;          /* đường kính chung, cũng là bề ngang nút hotline */
  --noi-khe:.7rem;
  --section:clamp(2.25rem,4.6vw,3.75rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   2. RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5{margin:0;font-weight:700;line-height:1.18;letter-spacing:-.02em}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.2em}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ============================================================
   3. LAYOUT
   ============================================================ */
/* Một lưới duy nhất cho cả site:
   - cột nội dung  = .wrap        (thụt vào --gut + --pad)
   - khối nền      = .wrap--panel (chỉ thụt vào --gut, đệm trong đúng --pad)
   nhờ vậy chữ trong khối nền và chữ ngoài khối nền luôn thẳng một mép. */
.wrap{width:min(100% - ((var(--gut) + var(--pad))*2),var(--wrap));margin-inline:auto}
.wrap--wide{width:min(100% - ((var(--gut) + var(--pad))*2),var(--wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - ((var(--gut) + var(--pad))*2),820px);margin-inline:auto}
.wrap--panel{width:min(100% - (var(--gut)*2),calc(var(--wrap) + (var(--pad)*2)));margin-inline:auto}
.section{padding-block:var(--section)}
.section--tight{padding-block:clamp(2rem,4vw,3.25rem)}
main{display:block;min-height:40vh}

/* khối nền xám bo góc — mô típ chính của giao diện */
.section--paper > .wrap,.section--sand > .wrap,.section--ink > .wrap{
  width:min(100% - (var(--gut)*2),calc(var(--wrap) + (var(--pad)*2)));
  border-radius:var(--r-panel);padding:var(--pad-y) var(--pad);margin-block:0;
}
.section--paper > .wrap,.section--sand > .wrap{background:var(--panel)}
.section--ink > .wrap{background:var(--ink);color:#fff}
.section--ink h1,.section--ink h2,.section--ink h3{color:#fff}

/* ============================================================
   4. TYPE
   ============================================================ */
.display{font-weight:800;letter-spacing:-.03em;line-height:1.08}
.d1{font-size:clamp(2.35rem,5.4vw,4.35rem)}
.d2{font-size:clamp(1.85rem,3.6vw,3rem)}
.d3{font-size:clamp(1.45rem,2.4vw,2.15rem)}
.d4{font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:700;line-height:1.3}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.74rem;font-weight:600;letter-spacing:.04em;
  color:var(--brand);background:var(--brand-soft);
  padding:.45em 1em;border-radius:var(--r-pill);margin:0 0 1.1rem;
}
.section--ink .eyebrow,.band .eyebrow{background:rgba(255,255,255,.14);color:#fff}
.lede{font-size:clamp(.98rem,1.15vw,1.08rem);color:var(--ink-70);line-height:1.75}
.muted{color:var(--ink-50)}
.serif-q{font-size:clamp(1.25rem,2.2vw,1.8rem);font-weight:600;line-height:1.45;letter-spacing:-.02em}

/* gạch nhấn thay cho hoa văn cũ */
.orn{display:flex;justify-content:center;margin:1.1rem 0 0}
.orn i{display:block;width:44px;height:4px;border-radius:var(--r-pill);background:var(--brand)}
.orn--left{justify-content:flex-start}

.sec-head{text-align:center;max-width:680px;margin:0 auto clamp(2rem,4vw,3rem)}
.sec-head .lede{margin-top:.9rem}
.sec-head--left{text-align:left;margin-inline:0}

/* ============================================================
   5. NÚT
   ============================================================ */
.btn{
  --bg:var(--brand);--fg:#fff;--bd:var(--brand);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-size:.92rem;font-weight:600;letter-spacing:0;line-height:1;
  padding:1.05em 1.9em;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  border-radius:var(--r-pill);cursor:pointer;text-align:center;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),background .28s,color .28s,border-color .28s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(200,16,46,.28)}
.btn::after{
  content:"";width:15px;height:15px;flex:none;
  background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;
  --arrow:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  transition:transform .3s var(--ease);
}
.btn:hover::after{transform:translateX(3px)}
.btn--solid{--bg:var(--brand);--fg:#fff;--bd:var(--brand)}
.btn--dark{--bg:var(--ink);--fg:#fff;--bd:var(--ink)}
.btn--dark:hover{box-shadow:0 10px 24px rgba(18,16,20,.25)}
.btn--gold,.btn--ghost{--bg:#fff;--fg:var(--ink);--bd:var(--line)}
.btn--gold:hover,.btn--ghost:hover{--bd:var(--brand);--fg:var(--brand);box-shadow:var(--sh-2)}
.btn--light{--bg:#fff;--fg:var(--ink);--bd:#fff}
.btn--light:hover{box-shadow:0 10px 26px rgba(0,0,0,.22)}
.btn--sm{padding:.8em 1.35em;font-size:.84rem}
.btn--plain::after{display:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}

.link-u{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.9rem;font-weight:600;color:var(--brand);
min-height:24px;align-items:center;   /* vùng chạm tối thiểu WCAG 2.5.8 */
}
.link-u::after{content:"→";transition:transform .3s var(--ease)}
.link-u:hover::after{transform:translateX(3px)}

/* ============================================================
   6. HEADER 2 TẦNG
   ============================================================ */
.top-bar{display:none}

.site-head{position:sticky;top:0;z-index:120;background:#fff;border-bottom:1px solid var(--line)}
.site-head.is-stuck{box-shadow:var(--sh-1)}

/* Hàng 1 chia 3 vùng: logo trái — ô tìm kiếm căn giữa — hotline + biểu tượng phải.
   Khoảng thở hai bên ô tìm kiếm bằng nhau nên hàng luôn cân, không còn lỗ trống một phía. */
.head-row1{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(1rem,2.2vw,2rem);padding-block:.85rem;
}
.head-left{display:flex;align-items:center;gap:.75rem;min-width:0}
.head-right{display:flex;align-items:center;gap:clamp(.6rem,1.4vw,1.15rem);justify-self:end}
.brand{flex:none;display:block}
.brand img{height:56px;width:auto;transition:height .3s var(--ease)}
.site-head.is-stuck .brand img{height:44px}
.brand__text{font-size:1.2rem;font-weight:800;letter-spacing:-.02em}

.searchbox{width:100%;max-width:660px;margin-inline:auto;position:relative}
.searchbox input{
  width:100%;border:1px solid var(--line);background:var(--panel-2);
  border-radius:var(--r-pill);padding:.9rem 3.4rem .9rem 1.25rem;font-size:.95rem;
  transition:.25s;
}
.searchbox input:focus{background:#fff;border-color:var(--brand);outline:0;box-shadow:0 0 0 3px rgba(200,16,46,.22)}
.searchbox button{
  position:absolute;right:.3rem;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border:0;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;cursor:pointer;transition:.25s;
}
.searchbox button:hover{background:var(--brand-ink)}
.searchbox svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}

/* khối hotline nằm ở hàng 1, đẩy về sát nhóm biểu tượng */
.hmeta--head{flex:none}
.head-tools{display:flex;align-items:center;gap:.5rem;flex:none}
.icon-btn{
  background:none;border:0;padding:0;cursor:pointer;position:relative;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink);
  transition:background .25s,color .25s;
}
.icon-btn:hover{background:var(--panel);color:var(--brand)}
/* Nút gọi hotline chỉ thay thế tài khoản + giỏ hàng ở khổ hẹp,
   nơi khối hotline chữ ở hàng 1 đã bị ẩn. */
.icon-btn--goi{display:none;color:var(--brand)}
.icon-btn--goi:hover{background:var(--brand-soft)}
.icon-btn svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6}
.cart-count{
  position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;
  background:var(--brand);color:#fff;border-radius:var(--r-pill);font-size:.66rem;font-weight:700;
  display:grid;place-items:center;line-height:1;border:2px solid #fff;
}

.head-row2{border-top:1px solid var(--line);display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);padding-block:.55rem}
.site-head.is-stuck .head-row2{display:none}
.nav{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem}
.nav ul{display:flex;align-items:center;gap:.35rem;list-style:none;margin:0;padding:0}
.nav a{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.92rem;font-weight:500;padding:.6rem .9rem;border-radius:var(--r-pill);
  white-space:nowrap;transition:background .25s,color .25s;
}
.nav a:hover,.nav .current-menu-item > a{background:var(--brand-soft);color:var(--brand)}
.nav li.menu-item-has-children > a::after{
  content:"";width:9px;height:9px;margin-left:.1rem;
  border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.5;
}
.nav li{position:relative}
.nav .sub-menu{
  position:absolute;top:calc(100% + .4rem);left:0;min-width:250px;display:block;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:.5rem;
  box-shadow:var(--sh-2);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:.28s var(--ease);z-index:5;
}
.nav li:hover > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav .sub-menu a{display:block;padding:.65rem .9rem;border-radius:12px;font-size:.9rem}
.nav .sub-menu li.menu-item-has-children > a::after{display:none}

.head-meta{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem);margin-left:auto;flex:none}
.hmeta{display:flex;align-items:center;gap:.65rem;white-space:nowrap}
.hmeta__i{width:36px;height:36px;border-radius:50%;background:var(--brand-soft);display:grid;place-items:center;flex:none}
.hmeta__i svg{width:18px;height:18px;stroke:var(--brand);fill:none;stroke-width:1.7}
.hmeta small{display:block;font-size:.72rem;color:var(--ink-50);line-height:1.3}
.hmeta b{display:block;font-size:.88rem;font-weight:600;color:var(--brand);line-height:1.3}
.hmeta > span:not(.hmeta__i){display:block}
.hmeta span span{display:block;font-size:.84rem;font-weight:500;line-height:1.3}
/* vòng tròn icon: tăng độ ưu tiên để không bị quy tắc chữ ở trên đè mất canh giữa */
.hmeta span.hmeta__i{display:grid;place-items:center}

.burger{display:none}
@media(max-width:1320px){
  .head-meta .hmeta:first-child{display:none}
}
@media(max-width:1120px){
  .hmeta--head{display:none}
  .icon-btn--goi{display:grid}
  .icon-btn--wc{display:none}
  .head-row2 .nav{display:none}
  .burger{display:grid}
  /* menu đã chuyển vào nút hamburger — hai khối thông tin trải đều cho kín hàng */
  .head-meta{margin-left:0;flex:1 1 auto;justify-content:space-between}
  .head-meta .hmeta:first-child{display:flex}
}
@media(max-width:860px){
  .head-row2{display:none}
  /* Lưới 3 cột với hai cột biên bằng nhau (1fr) thì logo ở cột giữa
     luôn nằm đúng tâm màn hình, không bị nút menu đẩy lệch sang trái. */
  .head-row1{grid-template-columns:1fr auto 1fr;gap:.7rem .9rem;padding-block:.7rem}
  .head-left{display:contents}
  .burger{grid-column:1;grid-row:1;justify-self:start}
  .brand{grid-column:2;grid-row:1;justify-self:center}
  .head-right{grid-column:3;grid-row:1;justify-self:end}
  /* Khổ điện thoại bỏ hẳn ô tìm kiếm: nó chiếm 59px trong header cao 151px
     — gần 40% chiều cao — trong khi khách chủ yếu duyệt theo menu và các
     khối sản phẩm. Header còn đúng ba phần cân nhau: menu · logo · hotline.
     Trang kết quả tìm kiếm vẫn chạy bình thường qua /?s= */
  .searchbox{display:none}

  /* Logo là khối xếp dọc: huy hiệu ở trên, chữ "HOÀNG TRÀ" ở dưới.
     Ở 44px thì phần chữ chỉ còn khoảng 6px — nhỏ quá, khó đọc trên
     điện thoại. Nâng lên 58px cho phần chữ đủ rõ; hai cột biên vẫn
     rộng chán nên không ảnh hưởng bố cục. */
  .brand img{height:58px}
  .site-head.is-stuck .brand img{height:48px}
}

/* ngăn kéo di động */
.drawer{
  position:fixed;inset:0 0 0 auto;width:min(88vw,380px);background:#fff;z-index:200;
  transform:translateX(101%);transition:transform .45s var(--ease);
  display:flex;flex-direction:column;padding:1.25rem var(--gut) 2.5rem;overflow-y:auto;
}
.drawer.is-open{transform:translateX(0)}
.drawer__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.drawer__top .eyebrow{margin:0}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer > nav > ul > li{border-bottom:1px solid var(--line)}
.drawer a{display:block;padding:.9rem 0;font-size:1.02rem;font-weight:600}
.drawer .sub-menu{padding:0 0 .7rem .9rem}
.drawer .sub-menu a{font-size:.95rem;font-weight:400;padding:.72rem 0;color:var(--ink-70)}
.scrim{position:fixed;inset:0;background:rgba(18,16,20,.45);opacity:0;visibility:hidden;transition:.4s;z-index:190}
.scrim.is-open{opacity:1;visibility:visible}

.search-pane{position:fixed;inset:0;background:#fff;z-index:210;display:grid;place-items:center;opacity:0;visibility:hidden;transition:.35s var(--ease)}
.search-pane.is-open{opacity:1;visibility:visible}
.search-pane form{width:min(100% - 3rem,680px);display:flex;gap:.75rem}
.search-pane input[type=search]{
  flex:1;border:1px solid var(--line);background:var(--panel-2);border-radius:var(--r-pill);
  padding:1.1rem 1.6rem;font-size:1.05rem;outline:0;
}
.search-pane input[type=search]:focus{border-color:var(--brand);background:#fff}
.search-pane__close{position:absolute;top:1.5rem;right:var(--gut)}

/* ============================================================
   7. HERO
   ============================================================ */
.hero{padding-block:var(--section) 0}
.hero > .wrap{width:min(100% - (var(--gut)*2),calc(var(--wrap) + (var(--pad)*2)))}
.hero__panel{
  position:relative;overflow:hidden;border-radius:var(--r-panel);
  background:linear-gradient(120deg,var(--brand-ink) 0%,var(--brand) 55%,#E0243F 100%);
  color:#fff;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  min-height:clamp(420px,54vw,560px);
}
.hero__copy{padding:var(--pad-y) var(--pad);position:relative;z-index:2}
.hero__copy .eyebrow{background:rgba(255,255,255,.16);color:#fff}
.hero__copy .d1{color:#fff}
.hero__sub{display:block;font-size:.4em;font-weight:600;letter-spacing:-.01em;opacity:.9;margin-top:.55rem}
.hero__copy .lede{color:rgba(255,255,255,.88);margin-top:1.1rem;max-width:44ch}
.hero__media{position:relative;height:100%;min-height:320px}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__panel::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:34%;z-index:1;
  background:linear-gradient(90deg,var(--brand) 0%,rgba(200,16,46,.55) 38%,transparent 88%);
  pointer-events:none;
}
.hero__badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.hero__badges span{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:500;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);
  padding:.45em .95em;border-radius:var(--r-pill);
}
@media(max-width:900px){
  .hero__panel{grid-template-columns:1fr;min-height:0}
  .hero__media{order:-1;aspect-ratio:16/10;min-height:0}
  .hero__panel::after{inset:auto 0 0 0;width:100%;height:55%;background:linear-gradient(0deg,var(--brand) 12%,transparent 100%)}
}

/* dải chip danh mục */
.chips{display:flex;gap:.7rem;overflow-x:auto;padding-block:.35rem;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  display:inline-flex;align-items:center;gap:.6rem;flex:none;
  background:var(--panel);border:1px solid transparent;border-radius:var(--r-pill);
  padding:.7rem 1.2rem;font-size:.92rem;font-weight:500;transition:.25s var(--ease);
}
.chip:hover{background:#fff;border-color:var(--brand);color:var(--brand);box-shadow:var(--sh-1);transform:translateY(-2px)}
.chip svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;flex:none}

/* dải chạy chữ */
.strip{background:var(--ink);color:rgba(255,255,255,.88);overflow:hidden;padding:.85rem 0;border-radius:var(--r-pill);margin-top:1.1rem}
.strip__track{display:flex;gap:2.5rem;white-space:nowrap;animation:slide 36s linear infinite;width:max-content}
.strip span{font-size:.85rem;font-weight:500;display:flex;align-items:center;gap:2.5rem}
.strip span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand)}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.strip__track{animation:none}}

/* ============================================================
   8. THẺ SẢN PHẨM
   ============================================================ */
/* Lưới sản phẩm: 3 cột ở khổ rộng, 2 cột từ 920px xuống. Bộ hàng có 9 món nên
   ở khổ 2 cột hàng cuối chỉ còn một thẻ — flex bọc dòng canh giữa phần dư đó
   thay vì bỏ trống bên phải. Thẻ căng đều chiều cao theo từng hàng. */
.pgrid,ul.products{
  --khe:clamp(.9rem,1.6vw,1.5rem);--cot:3;
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--khe);
  list-style:none;margin:0;padding:0;
}
.pgrid > *,ul.products > *{
  flex:1 1 calc((100% - (var(--cot) - 1) * var(--khe)) / var(--cot));
  max-width:calc((100% - (var(--cot) - 1) * var(--khe)) / var(--cot));
}
@media(max-width:920px){
  .pgrid,ul.products{--cot:2}

  /* Số sản phẩm lẻ thì hàng cuối chỉ còn một thẻ đứng trơ. Cho thẻ đó trải
     hết bề ngang để hàng cuối vẫn kín, thay vì bỏ trống nửa hàng.
     :last-child:nth-child(odd) chỉ khớp khi TỔNG số thẻ là số lẻ. */
  .pgrid > li:last-child:nth-child(odd),
  ul.products > li:last-child:nth-child(odd){
    flex-basis:100%;max-width:100%;
  }
  /* Ảnh vuông kéo cả thẻ cao quá khi trải ngang — hạ xuống khổ ngang cho cân. */
  .pgrid > li:last-child:nth-child(odd) .pcard__media,
  ul.products > li:last-child:nth-child(odd) .pcard__media{aspect-ratio:16 / 10}
}
.woocommerce ul.products::before,.woocommerce ul.products::after,
ul.products::before,ul.products::after{content:none;display:none}
ul.products li.product{width:auto!important;margin:0!important;float:none!important;clear:none!important}

.pcard{
  position:relative;display:flex;flex-direction:column;height:100%;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:transparent}
.pcard__media{position:relative;overflow:hidden;background:var(--panel-2);aspect-ratio:1/1}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),opacity .4s}
.pcard__media .alt{position:absolute;inset:0;opacity:0}
.pcard:hover .alt{opacity:1}
.pcard:hover .pcard__media img{transform:scale(1.05)}
.pcard__body{padding:1.05rem 1.15rem 1.2rem;display:flex;flex-direction:column;flex:1;gap:.45rem}
.pcard__cat{font-size:.72rem;font-weight:500;color:var(--ink-50);line-height:1.4}
/* tên luôn chiếm đúng 2 dòng để giá và nút của mọi thẻ nằm cùng một độ cao */
.pcard__title{
  font-size:1rem;font-weight:600;line-height:1.4;letter-spacing:-.01em;margin:0;
  min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pcard__title a::after{content:"";position:absolute;inset:0;z-index:2}
.pcard__foot{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  margin-top:auto;padding-top:.65rem;min-height:56px;
}
.pcard__price{font-size:1rem;font-weight:700;color:var(--brand);letter-spacing:-.01em;line-height:1.3}
/* giá gạch nằm trên một dòng riêng nhưng không làm thẻ cao thêm — đã trừ bằng min-height của chân thẻ */
.pcard__price del{display:block;color:var(--ink-50);font-weight:400;font-size:.78rem;text-decoration:line-through;line-height:1.3}
.pcard__price ins{text-decoration:none;color:var(--brand)}
/* Thẻ chỉ còn một nút: trải hết bề ngang cho vùng bấm rộng, dễ chạm. */
.pcard__foot--mot{justify-content:stretch}
.pcard__foot--mot .pcard__cta{flex:1 1 auto;text-align:center}

.pcard__ask{
  font-size:.92rem;font-weight:700;color:var(--brand);
  line-height:1.3;letter-spacing:-.01em;
}
.pcard__cta{
  position:relative;z-index:3;flex:none;
  border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);
  padding:.55em 1.1em;font-size:.82rem;font-weight:600;transition:.25s;
}
.pcard__cta:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.badge{
  position:absolute;top:.75rem;left:.75rem;z-index:3;background:var(--brand);color:#fff;
  font-size:.7rem;font-weight:600;padding:.35rem .8rem;border-radius:var(--r-pill);
}
.badge--gold{background:var(--gold)}

/* ============================================================
   9. KHỐI CHIA ĐÔI / CÂU CHUYỆN
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(1.5rem,4vw,3.5rem)}
.split--rev .split__media{order:2}
.split__media img{width:100%;aspect-ratio:4/3.2;object-fit:cover;border-radius:var(--r-card)}
@media(max-width:860px){
  .split{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
}

/* danh sách đánh số */
.steps{list-style:none;margin:1.8rem 0 0;padding:0;counter-reset:s;display:grid;gap:.75rem}
.steps li{
  counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:1rem;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.1rem 1.25rem;
  transition:border-color .25s,box-shadow .25s;
}
.steps li:hover{border-color:transparent;box-shadow:var(--sh-1)}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-size:.92rem;font-weight:700;color:var(--brand);
  background:var(--brand-soft);width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;flex:none;
}
.steps h3{font-size:1.02rem;font-weight:600;margin-bottom:.25rem;letter-spacing:-.01em}
.steps p{margin:0;font-size:.92rem;color:var(--ink-70);line-height:1.6}
.steps--grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.steps--big li{padding:1.4rem 1.5rem}
.steps--big h3{font-size:1.12rem}

/* số liệu */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.stats div{background:rgba(255,255,255,.07);border-radius:18px;padding:clamp(1.1rem,2.5vw,1.75rem) 1rem;text-align:center}
.stats b{display:block;font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;line-height:1;letter-spacing:-.03em;color:#fff}
.stats small{display:block;margin-top:.5rem;font-size:.82rem;color:rgba(255,255,255,.62)}
@media(max-width:700px){.stats{grid-template-columns:1fr 1fr}}

/* ============================================================
   10. THẺ NỘI DUNG
   ============================================================ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:clamp(.85rem,1.6vw,1.25rem)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.25rem,2.5vw,1.75rem);transition:.3s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:transparent}
.card__n{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand);font-size:.86rem;font-weight:700;margin-bottom:1rem;
}
/* Thẻ phân loại có ảnh: trang chủ là trang bán hàng chính nên mỗi dòng trà
   cần thấy được sản phẩm thật, không chỉ chữ. Ảnh tràn hết mép thẻ, số thứ tự
   đè lên góc để không chiếm thêm chiều cao. */
.card--anh{padding-top:0;overflow:hidden;position:relative}
.card__anh{
  display:block;margin:0 calc(clamp(1.25rem,2.5vw,1.75rem) * -1) 1rem;
  overflow:hidden;background:var(--panel-2);
}
.card__anh img{
  display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;
  transition:transform .55s var(--ease);
}
.card--anh:hover .card__anh img{transform:scale(1.05)}
.card__anh:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.card--anh .card__n{
  position:absolute;top:calc(clamp(1.25rem,2.5vw,1.75rem) * .55);
  left:calc(clamp(1.25rem,2.5vw,1.75rem) * .55);
  background:#fff;box-shadow:var(--sh-1);margin-bottom:0;
}
.card h3{font-size:1.08rem;font-weight:600;margin-bottom:.5rem}
.card p{font-size:.92rem;color:var(--ink-70);margin:0;line-height:1.65}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.85rem,1.8vw,1.35rem)}
.trio > div{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.3rem,2.6vw,1.9rem);transition:.3s var(--ease)}
.trio > div:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:transparent}
.trio__i{width:44px;height:44px;padding:11px;border-radius:14px;background:var(--brand-soft);stroke:var(--brand);fill:none;stroke-width:1.7;margin-bottom:1.1rem;box-sizing:border-box}
.trio h3{font-size:1.1rem;font-weight:600;margin-bottom:.5rem}
.trio p{font-size:.93rem;color:var(--ink-70);margin:0}
@media(max-width:620px){.trio{grid-template-columns:1fr}}

/* lưới hộp quà */
/* 3 dáng hộp -> 3 cột; trang bộ sưu tập 8 mẫu -> 4 cột (xem .boxgrid--4) */
/* Dùng flex thay grid để hàng cuối lẻ tự căn giữa — số mẫu hộp thay đổi
   theo mùa, lưới cột cứng sẽ để lại ô trống lệch hẳn về một bên. */
.boxgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(.85rem,1.8vw,1.35rem)}
.boxgrid > *{flex:0 1 calc((100% - 2*clamp(.85rem,1.8vw,1.35rem))/3)}
.boxgrid--4 > *{flex:0 1 calc((100% - 3*clamp(.85rem,1.8vw,1.35rem))/4)}
@media(max-width:920px){.boxgrid > *{flex:0 1 calc((100% - clamp(.85rem,1.8vw,1.35rem))/2)}}

@media(max-width:920px){.boxgrid--4 > *{flex:0 1 calc((100% - clamp(.85rem,1.8vw,1.35rem))/2)}}
/* thẻ hộp quà: căng đều chiều cao, chú thích khoá số dòng để mọi thẻ bằng nhau */
.boxcard{
  margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;transition:.3s var(--ease);display:flex;flex-direction:column;height:100%;
}
.boxcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:transparent}
.boxcard img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--panel-2)}
.boxcard figcaption{padding:1.1rem 1.2rem 1.4rem;flex:1;display:flex;flex-direction:column}
.boxcard h3{
  font-size:1.02rem;font-weight:600;margin-bottom:.4rem;line-height:1.4;min-height:1.4em;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.boxcard p{
  font-size:.9rem;color:var(--ink-70);margin:0;line-height:1.6;min-height:4.8em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* danh sách tích */
.ticks{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.6rem}
.ticks li{position:relative;padding-left:2.1rem;font-size:.98rem;color:var(--ink-70);line-height:1.6}
.ticks li::before{
  content:"";position:absolute;left:0;top:.15em;width:22px;height:22px;border-radius:50%;
  background:var(--brand-soft) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ============================================================
   11. DẢI ẢNH NỀN
   ============================================================ */
.band{
  position:relative;isolation:isolate;color:#fff;text-align:center;overflow:hidden;
  border-radius:var(--r-panel);padding-block:clamp(2.75rem,6vw,4.75rem);
  width:min(100% - (var(--gut)*2),calc(var(--wrap) + (var(--pad)*2)));
  margin:var(--section) auto;
}
/* Khối .band đã tự thụt vào một lần bằng --gut. Lớp bọc bên trong tính
   bề rộng theo 100% của chính khối này, nên nếu vẫn trừ (gut + pad) thì
   nội dung bị thụt hai lần: ở khổ 360px nó nằm ở 47px trong khi mọi
   trang khác là 33px. Bên trong .band chỉ trừ phần đệm. */
.band > .wrap--narrow{width:min(100% - (var(--pad)*2),820px)}
.band > .wrap,.band > .wrap--wide{width:min(100% - (var(--pad)*2),var(--wrap))}

.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,16,20,.66),rgba(18,16,20,.8));z-index:-1}
.band h2{color:#fff}
.band .lede{color:rgba(255,255,255,.85)}
.band .btn-row{justify-content:center}
.band-outer{padding-block:0}
.band-outer > .wrap{padding:0}

/* ============================================================
   12. BÀI VIẾT
   ============================================================ */
/* 3 bài mỗi khối -> 3 cột, không để hàng lẻ ô trống */
/* Lưới thẻ bài viết. Dùng flex bọc dòng thay vì grid để hàng cuối lẻ được
   canh giữa: số bài trong một khối không phải lúc nào cũng chia hết cho số
   cột (trang cuối của chuyên mục, kết quả tìm kiếm, chuyên mục ít bài).
   Thẻ vẫn rộng đúng một cột nhờ max-width, nên hàng đầy trông y như grid. */
.jgrid{
  --khe:clamp(.9rem,1.8vw,1.4rem);--cot:3;
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--khe);
}
.jgrid > *{
  flex:1 1 calc((100% - (var(--cot) - 1) * var(--khe)) / var(--cot));
  max-width:calc((100% - (var(--cot) - 1) * var(--khe)) / var(--cot));
}
@media(max-width:920px){.jgrid{--cot:2}}
@media(max-width:600px){.jgrid{--cot:1}}
.jcard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;transition:.3s var(--ease)}
.jcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:transparent}
.jcard__media{overflow:hidden;aspect-ratio:16/10;background:var(--panel-2);margin:0}
.jcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.jcard:hover .jcard__media img{transform:scale(1.05)}
.jcard time{font-size:.78rem;color:var(--ink-50);padding:1.1rem 1.2rem 0;display:block}
.jcard h3{font-size:1.05rem;font-weight:600;line-height:1.4;margin:.45rem 0 .5rem;padding:0 1.2rem}
.jcard h3 a::after{content:"";position:absolute;inset:0}
.jcard p{font-size:.9rem;color:var(--ink-70);margin:0;padding:0 1.2rem 1.35rem;line-height:1.6}

/* ============================================================
   13. TRANG CON
   ============================================================ */
.page-head{text-align:center;padding-block:clamp(2rem,4vw,3.25rem) clamp(1.25rem,2.5vw,2rem)}
.page-head .orn{margin-top:1rem}
.crumbs{font-size:.84rem;color:var(--ink-50);margin-bottom:1rem}
/* Liên kết đường dẫn chỉ cao 18px theo cỡ chữ — dưới mức 24px của
   WCAG 2.5.8. Nới đệm dọc để vùng chạm đạt chuẩn, chữ không xê dịch. */
.crumbs a{display:inline-block;padding-block:.2rem}
.crumbs a:hover{color:var(--brand)}
.crumbs .sep{margin:0 .45rem;opacity:.45}

.phero{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;
  background:var(--panel);border-radius:var(--r-panel);overflow:hidden;
  width:min(100% - (var(--gut)*2),calc(var(--wrap) + (var(--pad)*2)));
  margin:var(--section) auto 0;
}
.phero__copy{padding:var(--pad-y) var(--pad)}
.phero__copy .crumbs{margin-bottom:1.1rem}
.phero__copy .lede{margin-top:1rem;max-width:46ch}
.phero__media{height:100%;min-height:clamp(240px,32vw,420px)}
.phero__media img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){
  .phero{grid-template-columns:1fr}
  .phero__media{order:-1;aspect-ratio:16/10;min-height:0}
}

/* liên hệ */
.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:clamp(.8rem,1.6vw,1.2rem)}
.ccard{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.3rem,2.5vw,1.8rem);text-align:center;transition:.3s var(--ease)}
.ccard:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:transparent}
.ccard__i{width:44px;height:44px;padding:11px;border-radius:14px;background:var(--brand-soft);stroke:var(--brand);fill:none;stroke-width:1.7;margin:0 auto 1rem;box-sizing:border-box}
.ccard h3{font-size:1rem;font-weight:600;margin-bottom:.45rem}
.ccard p{font-size:.93rem;color:var(--ink-70);margin:0;line-height:1.7}
.ccard a:hover{color:var(--brand)}
.contact-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:start}
.map{border-radius:var(--r-card);overflow:hidden;min-height:420px;height:100%;background:var(--panel-2)}
.map iframe{width:100%;height:100%;min-height:420px;border:0;display:block}
@media(max-width:900px){.contact-split{grid-template-columns:1fr}}

/* nội dung bài viết / trang */
.entry{font-size:1.02rem;line-height:1.8;color:var(--ink-70)}
.entry > *+*{margin-top:1.1em}
.entry h2,.entry h3,.entry h4{color:var(--ink)}
.entry h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-top:2em;font-weight:700}
.entry h3{font-size:clamp(1.22rem,1.8vw,1.5rem);margin-top:1.7em;font-weight:600}
.entry h4{font-size:1.08rem;margin-top:1.5em;font-weight:600}
.entry img{border-radius:var(--r-card);margin-inline:auto}
.entry figure{margin:2em 0}
.entry figcaption{font-size:.86rem;color:var(--ink-50);text-align:center;margin-top:.7rem}
.entry blockquote{
  margin:2em 0;padding:1.4rem 1.6rem;background:var(--panel);border-radius:var(--r-card);
  border-left:4px solid var(--brand);font-size:1.08rem;font-weight:500;color:var(--ink);
}
.entry blockquote p:last-child{margin:0}
.entry a:not(.btn){color:var(--brand);font-weight:500}
.entry a:not(.btn):hover{text-decoration:underline}
.entry ul,.entry ol{padding-left:1.35em}
.entry li{margin-bottom:.45em}
.entry table{width:100%;border-collapse:collapse;font-size:.94rem;border-radius:var(--r-card);overflow:hidden}
.entry th,.entry td{border:1px solid var(--line);padding:.8rem 1rem;text-align:left}
.entry th{background:var(--panel);font-weight:600;color:var(--ink)}

.post-meta{display:flex;gap:1.2rem;justify-content:center;font-size:.86rem;color:var(--ink-50);margin-top:1rem}
.post-hero{margin-block:clamp(1.25rem,3vw,2.25rem)}
.post-hero img{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:var(--r-panel)}

.pager{display:flex;justify-content:center;gap:.4rem;margin-top:clamp(2rem,4vw,3rem);list-style:none;padding:0}
.pager a,.pager span{display:grid;place-items:center;min-width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:.92rem;font-weight:500;padding:0 .9rem}
.pager .current{background:var(--brand);color:#fff;border-color:var(--brand)}
.pager a:hover{border-color:var(--brand);color:var(--brand)}

.seo-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem);font-size:1rem;line-height:1.8;color:var(--ink-70)}
.seo-cols h3{
  font-family:var(--serif,inherit);font-size:clamp(1.05rem,1.6vw,1.25rem);
  font-weight:600;color:var(--ink);line-height:1.35;margin:0 0 .7rem;
}
.seo-cols > div > h3:first-child{margin-top:0}
.seo-cols strong{color:var(--ink);font-weight:600}
.seo-cols a{color:var(--brand);font-weight:500}
.seo-cols a:hover{text-decoration:underline}
@media(max-width:820px){.seo-cols{grid-template-columns:1fr}}

.author-box__dn{
  margin-top:.65rem;font-size:.86rem;line-height:1.65;color:var(--ink-60,var(--ink-70));
}
.author-box__dn a{color:var(--brand);font-weight:500}
.author-box__dn a:hover{text-decoration:underline}

/* ============================================================
   14. FOOTER
   ============================================================ */
.site-foot{background:var(--ink);color:rgba(255,255,255,.66);margin-top:var(--section);padding-block:clamp(2.5rem,5vw,4rem) 0;font-size:.94rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1.05fr 1fr 1.15fr;gap:clamp(1.25rem,2.4vw,2.25rem)}
.site-foot .foot-h{font-size:.95rem;font-weight:600;color:#fff;margin-bottom:1.1rem;letter-spacing:0}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:.6rem}
.site-foot a:hover{color:#fff}
.foot-brand img{height:56px;width:auto;margin-bottom:1.1rem;filter:brightness(0) invert(1);opacity:.95}
.foot-brand p{font-size:.93rem;line-height:1.7;max-width:40ch}
.foot-contact li{display:flex;gap:.7rem;align-items:flex-start}
.foot-contact svg{width:18px;height:18px;stroke:var(--brand);fill:none;stroke-width:1.7;flex:none;margin-top:.25em}
.foot-hot{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:1.1rem;
  background:var(--brand);color:#fff;border-radius:var(--r-pill);padding:.75rem 1.35rem;
  font-size:1.05rem;font-weight:700;letter-spacing:-.01em;transition:.25s;
}
.foot-hot:hover{background:#fff;color:var(--brand)}
.socials{display:flex;gap:.55rem;margin-top:1.4rem}
.socials a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:.25s}
.socials a:hover{background:var(--brand);color:#fff}
.socials svg{width:17px;height:17px;fill:currentColor}
.foot-bottom{
  margin-top:clamp(2rem,4vw,3rem);border-top:1px solid rgba(255,255,255,.1);
  padding-block:1.35rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.86rem;color:rgba(255,255,255,.45);
}
@media(max-width:1180px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr;row-gap:2.25rem}}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.foot-grid{grid-template-columns:1fr}}

/* ============================================================
   15. WOOCOMMERCE
   ============================================================ */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  list-style:none;border:1px solid var(--line);border-left:4px solid var(--brand);
  background:var(--panel-2);border-radius:var(--r-field);padding:1rem 1.3rem;margin:0 0 1.5rem;
  font-size:.95rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before,
.woocommerce-message::after,.woocommerce-info::after,.woocommerce-error::after{content:none!important;display:none!important}
.woocommerce-message .button,.woocommerce-info .button{margin-left:auto}

.shop-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1.25rem;flex-wrap:wrap;margin-bottom:1.5rem}
/* Khi xuống hàng ở màn hẹp, cho ô sắp xếp chiếm trọn bề ngang cho gọn */
@media(max-width:420px){
  .shop-toolbar .woocommerce-ordering{width:100%}
  .shop-toolbar .woocommerce-ordering select{width:100%}
}
.woocommerce-result-count{margin:0;font-size:.92rem;color:var(--ink-50)}
.woocommerce-ordering select,.woocommerce select,.entry select{
  /* Ô chọn co theo chữ dài nhất trong danh sách. Ở màn 320px nó rộng
     322px trong khi cột chữ chỉ 254px, làm cả trang cuộn ngang. */
  max-width:100%;
  border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);
  padding:.7rem 2.4rem .7rem 1.2rem;font-size:.9rem;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2379767F' fill='none' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1rem center;background-size:11px;
}

.product-main{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.5rem,3.5vw,3rem);align-items:start}
@media(max-width:900px){.product-main{grid-template-columns:1fr}}
/* Biểu mẫu bình luận / nhận xét: trước đây WooCommerce tự dựng ô nhập,
   nay dùng biểu mẫu mặc định của WordPress nên phải tự ràng bề ngang,
   nếu không textarea tràn ra ngoài và kéo trang cuộn ngang trên điện thoại. */
.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-respond textarea,
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"]{
  width:100%;max-width:100%;box-sizing:border-box;
  border:1px solid var(--line);border-radius:14px;padding:.75rem .9rem;
  font:inherit;font-size:1rem;background:#fff;color:var(--ink);
}
.comment-form textarea:focus-visible,
.comment-respond textarea:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.comment-form p{margin:0 0 .9rem}

/* Bố cục hai cột của trang sản phẩm. Trước đây do CSS của WooCommerce lo;
   bỏ plugin rồi thì theme phải tự dựng. Ảnh bên trái, thông tin bên phải,
   mọi khối phía sau trải hết bề ngang. */
/* Chỉ áp cho khối sản phẩm trên TRANG CHI TIẾT. Thẻ sản phẩm trong lưới
   cũng mang lớp .product.type-product do post_class() sinh ra, nếu không
   giới hạn thì thẻ bị ép thành lưới hai cột và phần chữ bị cắt mất. */
.woocommerce > .product.type-product{
  display:grid;
  grid-template-columns:minmax(0,46%) minmax(0,1fr);
  gap:clamp(1.5rem,3.5vw,3rem);
  align-items:start;
}
.woocommerce > .product.type-product > *:nth-child(n+3){grid-column:1 / -1}
@media(max-width:900px){
  /* minmax(0,1fr) chứ không phải 1fr: cột auto cho phép ảnh gốc 600px đẩy
     cột rộng hơn khung và kéo cả trang cuộn ngang ở khổ 320px. */
  .woocommerce > .product.type-product{grid-template-columns:minmax(0,1fr);gap:clamp(1.2rem,3vw,1.8rem)}
  .woocommerce > .product.type-product > *{grid-column:1 / -1;min-width:0}
}
.woocommerce > .product.type-product > *{min-width:0}
.woocommerce-product-gallery img,
.woocommerce > .product.type-product img{max-width:100%;height:auto}
/* Nút ảnh nhỏ: thẻ button nên phải gỡ kiểu mặc định của trình duyệt */
.flex-control-thumbs .htl-thumb{
  display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:12px;
}
.flex-control-thumbs .htl-thumb img{display:block}
.flex-control-thumbs .htl-thumb:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.woocommerce-product-gallery{position:relative}
.woocommerce-product-gallery__wrapper{margin:0}
.woocommerce-product-gallery img{width:100%;border-radius:var(--r-card);background:var(--panel-2)}
.flex-control-thumbs{display:flex;gap:.6rem;list-style:none;padding:0;margin:.7rem 0 0;flex-wrap:wrap}
.flex-control-thumbs li{width:calc(25% - .45rem)}
.flex-control-thumbs img{cursor:pointer;opacity:.55;border-radius:12px;transition:.25s}
.flex-control-thumbs img.flex-active,.flex-control-thumbs img:hover{opacity:1}
.woocommerce-product-gallery__trigger{position:absolute;top:.85rem;right:.85rem;z-index:5;background:#fff;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--sh-1)}

.summary .product_title{font-size:clamp(1.55rem,2.8vw,2.3rem);font-weight:700;line-height:1.2;margin-bottom:1rem}
.summary .price{font-size:1.7rem;font-weight:800;color:var(--brand);display:block;margin-bottom:1.2rem;letter-spacing:-.02em}
.summary .price del{color:var(--ink-50);font-size:1.05rem;font-weight:400;margin-right:.6rem}
.summary .price ins{text-decoration:none;color:var(--brand)}
.woocommerce-product-details__short-description{color:var(--ink-70);font-size:.98rem;line-height:1.75;padding-bottom:1.3rem;border-bottom:1px solid var(--line)}
table.variations{width:100%;margin:1.3rem 0;border-collapse:collapse}
table.variations th,table.variations td{padding:.5rem 0;text-align:left;vertical-align:middle}
table.variations th{font-size:.88rem;font-weight:600;color:var(--ink);width:130px}
.reset_variations{font-size:.85rem;color:var(--ink-50)}

.quantity{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);height:52px;overflow:hidden}
.quantity input[type=number]{width:76px;border:0;text-align:center;background:none;-moz-appearance:textfield}
.quantity input::-webkit-outer-spin-button,.quantity input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
form.cart{display:flex;gap:.7rem;flex-wrap:wrap;align-items:stretch;margin-block:1.4rem}
form.cart.variations_form{display:block}
form.cart .single_add_to_cart_button{flex:1;min-width:200px}

.woocommerce .button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt,.wp-element-button{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-size:.92rem;font-weight:600;line-height:1;
  padding:1.05em 1.9em;border:1px solid var(--brand);background:var(--brand);color:#fff;
  border-radius:var(--r-pill);cursor:pointer;transition:.28s var(--ease);
}
.woocommerce .button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{
  background:var(--brand-ink);border-color:var(--brand-ink);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(200,16,46,.28);
}
.woocommerce .button.disabled,.woocommerce button.button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.woocommerce a.added_to_cart{display:inline-block;margin-top:.7rem;font-size:.88rem;font-weight:600;color:var(--brand)}

.product_meta{font-size:.9rem;color:var(--ink-50);border-top:1px solid var(--line);padding-top:1.2rem;margin-top:1.4rem}
.product_meta > span{display:block;margin-bottom:.35rem}
.product_meta a{display:inline-block;padding-block:.2rem}
.product_meta a:hover{color:var(--brand)}

/* Tab sản phẩm — dạng viên thuốc như phần còn lại của giao diện.
   WooCommerce vẽ tab bằng bộ chọn `.woocommerce div.product …` (độ ưu
   tiên 0,4,2) cộng hai lớp giả ::before/::after giả lập góc cong kiểu
   thư mục. Bộ chọn ngắn hơn sẽ thua, nên phải lặp đúng bộ chọn của
   WooCommerce — style.css nạp sau nên thắng ở thế hoà. */
.woocommerce-tabs{margin-top:clamp(2.5rem,5vw,4rem)}

.woocommerce div.product .woocommerce-tabs ul.tabs{
  display:flex;flex-wrap:wrap;gap:.5rem;
  list-style:none;margin:0 0 clamp(1.5rem,3vw,2.25rem);padding:0;
  border:0;overflow:visible;
}
/* bỏ khung và các góc cong giả lập */
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{
  content:none;display:none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  display:block;margin:0;padding:0;
  background:none;border:0;border-radius:0;box-shadow:none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:block;padding:.8rem 1.4rem;   /* cao ~46px — đạt vùng chạm 44px */
  background:var(--panel);border-radius:var(--r-pill);
  font-size:.92rem;font-weight:600;line-height:1.35;
  color:var(--ink-70);text-shadow:none;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{
  background:#E7E7EC;color:var(--ink);
}
/* chữ trắng trên nền đỏ thương hiệu — 5,87:1 */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a:hover{
  background:var(--brand);color:#fff;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;
}
.woocommerce-tabs .panel h2{font-size:1.4rem;margin-bottom:1rem}

.related > h2,.upsells > h2,.cross-sells > h2{font-size:clamp(1.45rem,2.6vw,2rem);font-weight:700;letter-spacing:-.02em;text-align:center;margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.related,.upsells{margin-top:clamp(3rem,6vw,5rem)}
.onsale{display:none}

.woocommerce table.shop_table{width:100%;border-collapse:collapse;border:0;font-size:.95rem}
.woocommerce table.shop_table th{font-size:.86rem;font-weight:600;color:var(--ink-50);padding:0 1rem 1rem 0;text-align:left;border-bottom:1px solid var(--line)}
.woocommerce table.shop_table td{padding:1.25rem 1rem 1.25rem 0;border-bottom:1px solid var(--line);vertical-align:middle}
.woocommerce table.shop_table img{width:78px;border-radius:14px}
.product-name a{font-weight:600}
.woocommerce .cart_totals h2,.woocommerce-billing-fields h3,#order_review_heading,.woocommerce-checkout h3{font-size:1.35rem;font-weight:700;margin-bottom:1.2rem}
.cart-collaterals .cart_totals{background:var(--panel);border-radius:var(--r-card);padding:clamp(1.4rem,3vw,2rem)}
.woocommerce form .form-row{margin-bottom:1.1rem;display:block}
.woocommerce form .form-row label{display:block;font-size:.88rem;font-weight:500;margin-bottom:.45rem}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce-page input[type=text],.woocommerce-page input[type=email],.woocommerce-page input[type=tel],
.woocommerce-page input[type=password],.woocommerce-page textarea,.select2-container--default .select2-selection--single{
  width:100%;border:1px solid var(--line);background:#fff;padding:.9rem 1.15rem;font-size:.95rem;border-radius:var(--r-field);height:auto;
}
.woocommerce form .form-row input.input-text:focus,.woocommerce-page textarea:focus{border-color:var(--brand);outline:0;box-shadow:0 0 0 3px rgba(200,16,46,.22)}
#add_payment_method #payment,.woocommerce-checkout #payment{background:var(--panel);border:0;border-radius:var(--r-card)}
.woocommerce-checkout #payment div.payment_box{background:#fff;border-radius:var(--r-field)}

.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;background:var(--panel);border-radius:var(--r-card);padding:.5rem}
.woocommerce-MyAccount-navigation a{display:block;padding:.8rem 1.1rem;border-radius:14px;font-size:.93rem;font-weight:500}
.woocommerce-MyAccount-navigation li.is-active a{background:#fff;color:var(--brand);box-shadow:var(--sh-1)}
.woocommerce-account .woocommerce{display:grid;grid-template-columns:260px 1fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:start}
@media(max-width:820px){.woocommerce-account .woocommerce{grid-template-columns:1fr}}

/* khối đặt làm quà trên trang sản phẩm */
/* Khối thay ô giá khi sản phẩm chưa công bố giá. Dùng chung ngôn ngữ với
   .gift-note (nền panel, bo góc thẻ, icon nền trắng) nhưng gọn hơn vì nằm
   ngay đầu cột thông tin, phía trên nút thêm vào giỏ. */
.summary .price:has(.gia-hoi){margin-bottom:1.3rem}
.gia-hoi{
  display:flex;gap:.85rem;align-items:center;
  background:var(--panel);border-radius:var(--r-card);
  padding:.95rem 1.15rem;font-size:1rem;
}
.gia-hoi__i{
  width:40px;height:40px;padding:10px;border-radius:12px;background:#fff;
  stroke:var(--brand);fill:none;stroke-width:1.7;flex:none;box-sizing:border-box;
}
.gia-hoi__noi{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.gia-hoi__nhan{
  font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-60,var(--ink-70));line-height:1.2;
}
.gia-hoi__sdt{
  font-size:clamp(1.25rem,2.4vw,1.5rem);font-weight:800;letter-spacing:-.02em;
  color:var(--brand);line-height:1.2;text-decoration:none;
}
.gia-hoi__sdt:hover,.gia-hoi__sdt:focus-visible{text-decoration:underline}
.gia-hoi__gio{font-size:.82rem;color:var(--ink-70);line-height:1.4}
@media(max-width:400px){
  .gia-hoi{gap:.7rem;padding:.85rem .95rem}
  .gia-hoi__i{width:36px;height:36px;padding:9px;border-radius:11px}
}

.dat-lh{margin:1.4rem 0}
.dat-lh__nut{display:flex;gap:.7rem;flex-wrap:wrap}
.dat-lh__nut .btn{flex:1 1 auto}
.dat-lh__note{margin:.85rem 0 0;font-size:.86rem;color:var(--ink-70);line-height:1.6}
@media(max-width:420px){.dat-lh__nut .btn{flex:1 1 100%}}

.gift-note{display:flex;gap:1rem;align-items:flex-start;margin-top:1.5rem;background:var(--panel);border-radius:var(--r-card);padding:clamp(1.1rem,2.2vw,1.5rem)}
.gift-note__i{width:42px;height:42px;padding:11px;border-radius:13px;background:#fff;stroke:var(--brand);fill:none;stroke-width:1.7;flex:none;box-sizing:border-box}
.gift-note h3{font-size:1.02rem;font-weight:600;margin-bottom:.4rem}
.gift-note p{font-size:.92rem;color:var(--ink-70);margin:0 0 .4rem;line-height:1.6}
.gift-note a{color:var(--brand);font-weight:600}
.gift-note__links{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.7rem!important}

/* ============================================================
   16. NỘI DUNG CŨ DỰNG BẰNG UX BUILDER
   ============================================================ */
.fs-section{padding-block:clamp(1.5rem,3vw,2.5rem);position:relative;background-size:cover;background-position:center;border-radius:var(--r-card)}
.fs-section.has-bg{isolation:isolate;color:#fff;padding-inline:clamp(1.25rem,3vw,2.5rem);overflow:hidden}
.fs-section.has-bg::before{content:"";position:absolute;inset:0;background:var(--fs-overlay,rgba(18,16,20,.58));z-index:-1}
.fs-section.is-dark,.fs-section.is-dark h1,.fs-section.is-dark h2,.fs-section.is-dark h3,.fs-section.is-dark h4{color:#fff}
.fs-section.is-dark p,.fs-section.is-dark .lede{color:rgba(255,255,255,.85)}
.wrap--narrow > .entry > .fs-section > .wrap{width:min(100%,860px)}
.contact-split .fs-section{padding-block:0;background:none!important}
.contact-split .fs-section::before{display:none}
.contact-split .fs-section .wrap{width:100%}

.fs-row{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.2vw,2rem);align-items:start}
.fs-row.v-middle{align-items:center}
.fs-col{grid-column:span var(--span,12);min-width:0}
.fs-col > *:first-child{margin-top:0}
.fs-col.ta-center{text-align:center}
@media(max-width:820px){.fs-col{grid-column:span var(--span-sm,12)}}

.fs-title{text-align:center;margin-block:clamp(1.25rem,2.5vw,2rem)}
.fs-figure{margin:1.4rem 0}
.fs-figure img{width:100%;border-radius:var(--r-card)}
.fs-gallery{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:.85rem;margin:1.4rem 0}
.fs-gallery img{border-radius:var(--r-card);width:100%;aspect-ratio:1/1;object-fit:cover}
.fs-slider{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.9rem;margin:1.4rem 0}
.fs-slider > *{flex:0 0 min(86%,400px);scroll-snap-align:start;margin:0}
.fs-banner{padding-block:clamp(2.5rem,6vw,4.5rem);background-size:cover;background-position:center;position:relative;isolation:isolate;border-radius:var(--r-panel);overflow:hidden}
.fs-banner.is-dark{color:#fff}
.fs-banner::before{content:"";position:absolute;inset:0;background:rgba(18,16,20,.5);z-index:-1}

.fs-menu{list-style:none;margin:1rem 0;padding:0;display:grid;gap:.45rem}
.fs-menu__t{font-size:.82rem;font-weight:600;color:var(--brand);margin-bottom:.3rem}
.fs-menu a:hover{color:var(--brand)}
.fs-logo{height:56px;width:auto}
.fs-gap{display:block}
.fs-divider{border-top:1px solid var(--line);margin:1.75rem 0}
.fs-box{border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.25rem,2.5vw,1.9rem);background:#fff}

.fs-acc{display:grid;gap:.6rem;margin:1.5rem 0}
.fs-acc__i{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:border-color .25s,box-shadow .25s}
.fs-acc__i[open],.fs-acc__i:hover{border-color:transparent;box-shadow:var(--sh-1)}
.fs-acc__i summary{
  cursor:pointer;list-style:none;padding:1.15rem 3.25rem 1.15rem 1.35rem;position:relative;
  font-size:1.02rem;font-weight:600;line-height:1.45;transition:color .25s;
}
.fs-acc__i summary::-webkit-details-marker{display:none}
.fs-acc__i summary::after{
  content:"";position:absolute;right:1.15rem;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;background:var(--brand-soft)
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/14px no-repeat;
  transition:transform .3s var(--ease);
}
.fs-acc__i[open] summary::after{transform:translateY(-50%) rotate(180deg)}
.fs-acc__i summary:hover{color:var(--brand)}
.fs-acc__b{padding:0 1.35rem 1.3rem;color:var(--ink-70);font-size:.96rem;line-height:1.7}
.fs-acc__b > *:first-child{margin-top:0}
.fs-acc__b > *:last-child{margin-bottom:0}

/* Contact Form 7 */
.entry .wpcf7 input[type=text],.entry .wpcf7 input[type=email],.entry .wpcf7 input[type=tel],
.entry .wpcf7 input[type=url],.entry .wpcf7 textarea,.entry .wpcf7 select{
  width:100%;border:1px solid var(--line);background:#fff;padding:.9rem 1.15rem;
  font-size:.96rem;font-family:var(--sans);border-radius:var(--r-field);margin-top:.35rem;
}
.entry .wpcf7 input:focus,.entry .wpcf7 textarea:focus{border-color:var(--brand);outline:0;box-shadow:0 0 0 3px rgba(200,16,46,.22)}
.entry .wpcf7 label{display:block;font-size:.88rem;font-weight:500;color:var(--ink);margin-bottom:1rem}
.entry .wpcf7 input[type=submit]{
  width:auto;background:var(--brand);color:#fff;border:1px solid var(--brand);cursor:pointer;
  font-size:.92rem;font-weight:600;padding:1.05em 1.9em;border-radius:var(--r-pill);transition:.28s var(--ease);
}
.entry .wpcf7 input[type=submit]:hover{background:var(--brand-ink);border-color:var(--brand-ink);transform:translateY(-2px)}

/* ============================================================
   17. TIỆN ÍCH
   ============================================================ */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;z-index:999;padding:1rem}
.skip-link:focus{left:1rem;top:1rem;background:var(--ink);color:#fff;border-radius:12px}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.to-top{
  position:fixed;z-index:100;
  right:var(--noi-phai);
  /* xếp ngay trên nút hotline, cùng trục dọc */
  bottom:calc(var(--noi-duoi) + var(--noi-co) + var(--noi-khe) + env(safe-area-inset-bottom,0px));
  width:var(--noi-co);height:var(--noi-co);border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:#fff;border:0;cursor:pointer;box-shadow:var(--sh-2);
  opacity:0;visibility:hidden;transition:.3s var(--ease);
}
.to-top.is-on{opacity:1;visibility:visible}
.to-top svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.to-top:hover{background:var(--brand);transform:translateY(-2px)}

/* ============================================================
   18. MÀN HÌNH NHỎ
   ============================================================ */
@media(max-width:620px){
  .btn{padding:.95em 1.5em;font-size:.88rem}
  .btn-row .btn{flex:1 1 100%}
  .pgrid,ul.products{--khe:.7rem;--cot:2}
  .pcard__body{padding:.85rem .9rem 1rem;gap:.4rem}
  .pcard__title{font-size:.9rem}
  .pcard__foot{flex-direction:column;align-items:flex-start;gap:.5rem}
  .pcard__cta{width:100%;text-align:center}
  .boxgrid > *,.boxgrid--4 > *{flex:0 1 calc((100% - clamp(.85rem,1.8vw,1.35rem))/2)}
  .boxcard figcaption{padding:.9rem}
  .boxcard h3{font-size:.94rem}
  .boxcard p{font-size:.88rem}   /* 13,44px quá nhỏ để đọc trên điện thoại */
  .fs-gallery{--cols:2!important}
  .section--paper > .wrap,.section--sand > .wrap,.section--ink > .wrap{border-radius:24px}
  .hero__panel,.phero,.band{border-radius:24px}
}

/* tiêu đề cấp 2 của trang cửa hàng */
.shop-h2{font-size:clamp(1.25rem,2vw,1.6rem);font-weight:700;letter-spacing:-.02em;margin:0 0 1rem}

/* khối thông tin cuối trang sản phẩm & cửa hàng */
.prod-info,.shop-outro{border-top:1px solid var(--line);margin-top:clamp(2.5rem,5vw,4rem)}
.prod-info .sec-head{margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.prod-info__note{margin:1.5rem 0 0;font-size:.96rem;color:var(--ink-70);text-align:center}
.prod-info__note a,.shop-outro a{color:var(--brand);font-weight:500}
.shop-outro h2{margin-bottom:.5rem}

/* ============================================================
   19. CHUẨN CẢM ỨNG & ĐỌC TRÊN THIẾT BỊ NHỎ
   ============================================================ */

/* iOS tự phóng to trang khi chạm vào ô nhập có cỡ chữ dưới 16px.
   Ép 16px ở khổ nhỏ để bỏ hẳn hiện tượng nhảy khung khó chịu đó. */
@media(max-width:860px){
  input[type=text],input[type=search],input[type=email],input[type=tel],
  input[type=url],input[type=password],input[type=number],textarea,select{
    font-size:16px;
  }
  .searchbox input{font-size:16px;padding-block:.95rem}
}

/* Chữ phụ trên điện thoại: nâng lên tối thiểu 12px cho dễ đọc */
@media(max-width:620px){
  .eyebrow{font-size:.8rem}
  .pcard__cat{font-size:.78rem}
  .badge{font-size:.75rem}
  .site-foot small{font-size:.78rem!important}
  .jcard time{font-size:.8rem}
  .crumbs{font-size:.86rem}
}

/* Vùng chạm trong danh sách và menu luôn đủ 44px chiều cao */
@media(max-width:1120px){
  .drawer > nav > ul > li > a{min-height:48px;display:flex;align-items:center}
  .drawer .sub-menu a{min-height:44px;display:flex;align-items:center}
  .pager a,.pager span{min-width:44px;height:44px}
  .woocommerce-MyAccount-navigation a{min-height:44px;display:flex;align-items:center}
  .fs-acc__i summary{min-height:52px;display:flex;align-items:center}
}

/* Khoảng cách với nút hotline giờ tính từ biến --noi-co nên không cần
   đặt cứng 64px cho khổ nhỏ nữa. */

/* --- Vùng chạm: đưa mọi nút/link bấm được lên tối thiểu 44px --- */
.pcard__cta{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.btn{min-height:44px}
.socials a{width:44px;height:44px}
.brand{min-height:44px;display:flex;align-items:center}

/* Link trong chân trang và link chữ: nới chiều cao chạm cho thoải mái */
@media(max-width:1120px){
  .site-foot li a{display:inline-flex;align-items:center;min-height:32px}
  .foot-contact li a{min-height:36px}
  .link-u{min-height:32px;align-items:center}
  .fs-menu a{display:inline-flex;align-items:center;min-height:32px}
}

/* Trên điện thoại, nút "Mua" trải rộng cả thẻ cho dễ bấm bằng ngón cái */
@media(max-width:620px){
  .pcard__cta{width:100%}
  .socials{gap:.7rem}
}

/* Quy tắc 16px ở trên bị các selector cụ thể hơn đè mất (.entry .wpcf7 input,
   .woocommerce-ordering select...). Lặp lại với độ ưu tiên tương đương để ăn chắc. */
@media(max-width:860px){
  .entry .wpcf7 input[type=text],
  .entry .wpcf7 input[type=email],
  .entry .wpcf7 input[type=tel],
  .entry .wpcf7 input[type=url],
  .entry .wpcf7 textarea,
  .entry .wpcf7 select,
  .woocommerce-ordering select,
  .woocommerce select,
  .entry select,
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce-page input[type=text],
  .woocommerce-page input[type=email],
  .woocommerce-page input[type=tel],
  .woocommerce-page input[type=password],
  .woocommerce-page textarea,
  .quantity input[type=number]{
    font-size:16px;
  }
}

/* Nút gọi nổi của plugin (góc trái dưới) và nút lên đầu trang (góc phải dưới)
   luôn nằm đè lên nội dung. Chừa khoảng an toàn cuối trang để hai nút đó
   không che mất dòng cuối của chân trang trên điện thoại. */
@media(max-width:620px){
  .foot-bottom{padding-bottom:4.5rem}
  .site-foot{padding-bottom:0}
}

/* ============================================================
   20. CÂN ĐỐI TRÊN ĐIỆN THOẠI
   ============================================================ */

/* --- Hero: gom lại để nút bấm nằm trong màn hình đầu tiên ---
   Trước: khối cao 847px trên màn 812px, ảnh 216px còn chữ 595px (lệch 1:2,75).
   Giờ nén chữ và hạ ảnh xuống tỉ lệ 2:1 cho cân. */
@media(max-width:620px){
  .hero{padding-block:.6rem 0}
  .hero__panel{min-height:0}
  .hero__media{aspect-ratio:16/9}
  .hero__copy{padding:1.35rem var(--pad) 1.6rem}
  .hero .d1{font-size:2rem;line-height:1.1}
  .hero__sub{font-size:.95rem;margin-top:.45rem;line-height:1.35}
  .hero .lede{font-size:.95rem;line-height:1.6;margin-top:.8rem}
  .hero .btn-row{gap:.55rem;margin-top:1.15rem}
  .hero .eyebrow{margin-bottom:.8rem}

  /* 3 nhãn đặc điểm: cho trượt ngang trên một dòng thay vì xuống 2 dòng */
  .hero__badges{
    margin-top:.9rem;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .hero__badges::-webkit-scrollbar{display:none}
  .hero__badges span{flex:none;font-size:.78rem;padding:.4em .85em}
}

/* --- Các lưới thẻ: trượt ngang thay vì xếp dọc ---
   Ba thẻ xếp dọc làm khối dài gần 2 màn hình. Trượt ngang là mẫu quen thuộc
   trên điện thoại, rút khối xuống còn khoảng một màn hình. */
@media(max-width:620px){
  .jgrid,
  .trio,
  .section:not(.section--paper) > .wrap > .cards,
  .section--paper > .wrap > .cards{
    display:flex;gap:.8rem;overflow-x:auto;
    flex-wrap:nowrap;justify-content:flex-start;
    scroll-snap-type:x mandatory;
    padding-bottom:.6rem;margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad);
    /* Không có scroll-padding thì điểm neo của scroll-snap tính từ mép
       trong khung cuộn, bỏ qua padding: trình duyệt tự cuộn sang phải đúng
       bằng padding (18px) ngay khi tải, thẻ đầu tiên rơi về 15px thay vì
       33px — lệch hẳn so với tiêu đề và mọi khối khác trên trang. */
    scroll-padding-inline:var(--pad);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .jgrid::-webkit-scrollbar,.trio::-webkit-scrollbar,.cards::-webkit-scrollbar{display:none}
  .jgrid > *,
  .trio > div,
  .cards > .card{
    flex:0 0 78%;max-width:none;scroll-snap-align:start;border-radius:var(--r-card);
  }
  /* .cards vốn dùng viền chung 1px — khi trượt ngang thì mỗi thẻ cần viền riêng */
  .cards{background:none}
  .cards > .card{border:1px solid var(--line)}
}

/* --- Nhịp dọc: rút khoảng cách giữa các khối trên màn nhỏ --- */
@media(max-width:620px){
  :root{--section:2rem}
  .sec-head{margin-bottom:1.5rem}
  .sec-head .lede{font-size:.95rem}
}

/* --- Máy tính bảng: hero cũng phải gọn để nút bấm nằm trong màn hình --- */
@media(min-width:621px) and (max-width:900px){
  .hero{padding-block:.75rem 0}
  .hero__panel{min-height:0}
  .hero__media{aspect-ratio:16/9}
  .hero__copy{padding:1.75rem var(--pad) 2rem}
  .hero .lede{margin-top:.9rem}
}

/* --- Sơ đồ trang --- */
.sitemap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem);align-items:start}
.sitemap-grid h2{font-size:1.15rem;font-weight:700;margin-bottom:.9rem}
.sitemap-grid h3{font-size:1rem;font-weight:600;margin:1.5rem 0 .7rem}
.sitemap-list{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.sitemap-list a{display:inline-flex;align-items:center;min-height:36px;font-size:.96rem;color:var(--ink-70)}
.sitemap-list a:hover{color:var(--brand)}
@media(max-width:900px){.sitemap-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.sitemap-grid{grid-template-columns:1fr}}

/* trang 404: dải chip gợi ý xuống dòng thay vì trượt ngang */
.error404 .chips{overflow:visible;flex-wrap:wrap;gap:.65rem}
.error404 .chip{flex:0 0 auto}

/* --- Nút Zalo nổi: viên thuốc có nhãn chữ, không dùng lại logo thương hiệu --- */


/* ============================================================
   21. BÀI VIẾT: MỤC LỤC & KHỐI TÁC GIẢ
   ============================================================ */
.toc{
  background:var(--panel);border-radius:var(--r-card);
  padding:clamp(1.1rem,2.4vw,1.6rem) clamp(1.2rem,2.6vw,1.8rem);
  margin-bottom:clamp(1.75rem,3.5vw,2.5rem);
}
.toc__h{font-size:1rem;font-weight:700;margin:0 0 .85rem;letter-spacing:-.01em}
.toc__list{list-style:none;margin:0;padding:0;counter-reset:toc;display:grid;gap:.1rem}
.toc__i{counter-increment:toc}
.toc__i a{
  display:flex;gap:.6rem;align-items:baseline;padding:.42rem 0;
  font-size:.97rem;color:var(--ink-70);line-height:1.5;
}
.toc__i a::before{content:counter(toc) ".";color:var(--brand);font-weight:600;font-size:.86rem;flex:none}
.toc__i a:hover{color:var(--brand)}
.toc__i--3{padding-left:1.4rem}
.toc__i--3 a{font-size:.92rem}
.toc__i--3 a::before{content:"–";color:var(--ink-50)}

/* chừa chỗ cho header dính khi bấm vào mục lục */
.entry h2[id],.entry h3[id]{scroll-margin-top:160px}

.author-box{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,2.4vw,1.6rem);align-items:start;
  background:var(--panel);border-radius:var(--r-card);
  padding:clamp(1.25rem,2.6vw,1.9rem);margin-top:clamp(2rem,4vw,3rem);
}
.author-box__logo{width:72px;height:auto;flex:none}
.author-box__h{font-size:1.08rem;font-weight:700;margin:0 0 .5rem}
.author-box p{font-size:.96rem;color:var(--ink-70);margin:0 0 .5rem;line-height:1.7}
.author-box__links{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:.9rem!important}
@media(max-width:620px){
  .author-box{grid-template-columns:1fr;text-align:left}
  .author-box__logo{width:56px}
}

/* dòng thông tin đầu bài */
.post-meta{flex-wrap:wrap;row-gap:.35rem}
.post-meta span,.post-meta time{position:relative}
.post-meta > *:not(:last-child)::after{content:"·";margin-left:1.2rem;color:var(--line);position:absolute}

/* --- Bảng thông tin nhanh trên trang sản phẩm --- */
.spec-table{width:100%;border-collapse:collapse;margin-top:1.4rem;font-size:.94rem}
.spec-table th,.spec-table td{padding:.7rem 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.spec-table th{width:38%;font-weight:500;color:var(--ink-50);font-size:.9rem}
.spec-table td{color:var(--ink)}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
@media(max-width:480px){.spec-table th{width:44%}}

/* --- Bảng dữ kiện và bảng so sánh trên trang chủ ---
   Dạng bảng để người đọc quét nhanh, đồng thời là cấu trúc mà bộ máy tìm
   kiếm và trợ lý AI trích được nguyên cặp "tiêu chí – giá trị". */
.spec-table caption,.bang-ss caption{
  caption-side:top;text-align:left;
  font-size:.74rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-60,var(--ink-70));padding-bottom:.8rem;
}
.spec-table--tom-tat{margin-top:clamp(1.8rem,3.4vw,2.6rem)}
.spec-table--tom-tat th{width:30%}
@media(max-width:620px){.spec-table--tom-tat th{width:40%}}

.bang-goi-y{
  display:none;margin:clamp(1.5rem,3vw,2.2rem) 0 .5rem;
  font-size:.82rem;color:var(--ink-50);
}
@media(max-width:760px){.bang-goi-y{display:block}}
.bang-cuon{
  margin-top:clamp(1.5rem,3vw,2.2rem);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
@media(max-width:760px){.bang-cuon{margin-top:0}}
.bang-cuon:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
.bang-ss{
  width:100%;min-width:640px;border-collapse:collapse;
  font-size:.92rem;line-height:1.6;text-align:left;
}
.bang-ss th,.bang-ss td{
  padding:.8rem .9rem;border-bottom:1px solid var(--line);vertical-align:top;
}
.bang-ss thead th{
  font-weight:600;color:var(--ink);font-size:.88rem;
  border-bottom:2px solid var(--line);
}
.bang-ss tbody th{font-weight:500;color:var(--ink-50);width:18%}
.bang-ss tbody td{color:var(--ink-70)}
.bang-ss tbody tr:last-child th,.bang-ss tbody tr:last-child td{border-bottom:0}
.bang-ss thead th:first-child,.bang-ss tbody th{padding-left:0}

/* ============================================================
   22. SỬA TƯƠNG PHẢN
   ============================================================ */
/* Màu vàng --gold chỉ đạt 2,84:1 trên nền sáng — không dùng cho chữ nhỏ.
   Dùng màu thương hiệu (5,88:1) cho các liên kết này. */
.contact-form .lede a,
.fs-acc__b a,
.prod-info__note a{color:var(--brand)}

/* ============================================================
   23. ẢNH TRONG BÀI VIẾT
   WordPress cổ điển gắn thuộc tính width cố định lên figure.wp-caption
   theo kích thước ảnh gốc. Ảnh 1200px nằm trong cột chữ 820px sẽ tràn ra
   ngoài và kéo cả trang cuộn ngang. Ràng buộc lại theo bề rộng cột.
   ============================================================ */
/* Tab mô tả sản phẩm của WooCommerce không mang lớp .entry nên luật
   dưới đây trước kia không với tới: một ảnh 1196px trong cột 342px làm
   trang sản phẩm cuộn ngang 866px trên điện thoại. Gộp cả hai vùng. */
.entry figure,
.entry .wp-caption,
.entry .wp-block-image,
.entry .gallery,
.woocommerce-Tabs-panel figure,
.woocommerce-Tabs-panel .wp-caption,
.woocommerce-Tabs-panel .wp-block-image,
.woocommerce-Tabs-panel .gallery{
  width:auto!important;max-width:100%!important;
  margin-left:auto;margin-right:auto;
}
.woocommerce-Tabs-panel figure img,
.woocommerce-Tabs-panel .wp-caption img,
.entry figure img,
.entry .wp-caption img,
.entry .wp-block-image img,
.entry p > img,
.entry > img{
  display:block;width:100%;height:auto;
  border-radius:var(--r-card);
}
/* ảnh nhỏ hơn cột thì giữ nguyên kích thước thật, không kéo giãn cho vỡ nét */
.entry img[width]{max-width:100%}
.entry figure{margin-block:clamp(1.6rem,3vw,2.4rem)}

/* chú thích ảnh */
.entry figcaption,
.entry .wp-caption-text{
  margin-top:.75rem;font-size:.9rem;line-height:1.6;
  color:var(--ink-50);text-align:center;
}

/* các lớp căn lề mặc định của WordPress */
.entry .aligncenter{margin-left:auto;margin-right:auto;display:block}
.entry .alignnone{margin-inline:0}
@media(min-width:861px){
  .entry .alignleft{float:left;margin:.4rem 1.75rem 1.25rem 0;max-width:46%}
  .entry .alignright{float:right;margin:.4rem 0 1.25rem 1.75rem;max-width:46%}
}
@media(max-width:860px){
  .entry .alignleft,.entry .alignright{float:none;margin-inline:auto;max-width:100%}
}
.entry .alignwide,.entry .alignfull{max-width:100%!important;width:auto!important}

/* dọn float trước tiêu đề để không chèn lên nhau */
.entry h2,.entry h3{clear:both}

/* thư viện ảnh nhiều cột của WordPress */
.entry .gallery{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.entry .gallery-item{margin:0!important;width:auto!important}
.entry .gallery img{border:0!important;border-radius:var(--r-card)}

/* ============================================================
   24. KHỐI ĐÁNH GIÁ SAO (kk Star Ratings)
   Giữ nguyên hình học của plugin: sao 24px, cách nhau 5px.
   Lớp phủ .kksr-stars-active được tính sẵn bằng pixel ở phía
   máy chủ, nên chỉ phóng to cả cụm bằng transform — đổi kích
   thước từng sao sẽ làm lệch phần tô điểm.
   ============================================================ */
.kk-star-ratings{
  display:grid!important;
  justify-items:center;
  gap:.5rem;
  width:100%;
  max-width:560px;
  margin:clamp(2rem,4.5vw,3rem) auto 0!important;
  padding:clamp(1.2rem,3.2vw,1.65rem) clamp(1rem,3.2vw,1.9rem);
  background:linear-gradient(180deg,#FDFBF5 0%,#F8F3E7 100%);
  border:1px solid rgba(161,122,43,.24);
  border-radius:var(--r-card);
  box-shadow:var(--sh-1);
  text-align:center;
}

/* câu hỏi mở đầu — đổi theo loại nội dung đang xem */
.kk-star-ratings::before{
  content:"Nội dung này hữu ích với bạn chứ?";
  font-size:clamp(.98rem,2.4vw,1.06rem);
  font-weight:700;line-height:1.45;letter-spacing:-.01em;
  color:var(--ink);
}
.single-post .kk-star-ratings::before{content:"Bài viết này hữu ích với bạn chứ?"}
.single-product .kk-star-ratings::before{content:"Bạn thấy sản phẩm này thế nào?"}

/* gợi ý thao tác — ẩn khi khối đã khoá (đã bình chọn hoặc chỉ đọc) */
.kk-star-ratings:not(.kksr-disabled)::after{
  content:"Nhấn vào sao để gửi đánh giá của bạn";
  font-size:.82rem;line-height:1.5;color:var(--ink-50);
}

/* cụm sao */
.kk-star-ratings .kksr-stars{
  /* dịch phải 2.5px (nửa khoảng hở) để phần nhìn thấy được của cụm sao
     nằm đúng giữa thẻ — ô sao cuối vẫn mang 5px đệm phải của plugin */
  transform:scale(1.52) translateX(2.5px);transform-origin:center;
  transition:transform .22s var(--ease);
}
.kk-star-ratings:not(.kksr-disabled) .kksr-stars:hover{transform:scale(1.6) translateX(2.5px)}

/* hộp mỗi sao 29x30px, nhân 1.52 thành ~44x46px — đạt mức 44x44 của WCAG 2.5.8 */
.kk-star-ratings .kksr-stars .kksr-star{padding-block:3px!important}

.kk-star-ratings .kksr-stars .kksr-star .kksr-icon{
  background-size:100% 100%;background-repeat:no-repeat;background-position:center;
}

/* ba trạng thái của sao — lặp đúng bộ chọn của plugin để giữ nguyên
   thứ tự ưu tiên, style.css nạp sau nên tự động thắng */
.kk-star-ratings .kksr-stars .kksr-star .kksr-icon,
.kk-star-ratings:not(.kksr-disabled) .kksr-stars .kksr-star:hover ~ .kksr-star .kksr-icon{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23E9E0CA%22%20stroke%3D%22%23C8B896%22%20stroke-width%3D%221.2%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%203.1l2.72%205.51%206.08.88-4.4%204.29%201.04%206.06L12%2016.98l-5.44%202.86%201.04-6.06-4.4-4.29%206.08-.88z%22%2F%3E%3C%2Fsvg%3E");
}
.kk-star-ratings .kksr-stars .kksr-stars-active .kksr-star .kksr-icon{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23A17A2B%22%20stroke%3D%22%238A6622%22%20stroke-width%3D%221.2%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%203.1l2.72%205.51%206.08.88-4.4%204.29%201.04%206.06L12%2016.98l-5.44%202.86%201.04-6.06-4.4-4.29%206.08-.88z%22%2F%3E%3C%2Fsvg%3E");
}
.kk-star-ratings.kksr-disabled .kksr-stars .kksr-stars-active .kksr-star .kksr-icon,
.kk-star-ratings:not(.kksr-disabled) .kksr-stars:hover .kksr-star .kksr-icon{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%238A6622%22%20stroke%3D%22%236F521B%22%20stroke-width%3D%221.2%22%20stroke-linejoin%3D%22round%22%20d%3D%22M12%203.1l2.72%205.51%206.08.88-4.4%204.29%201.04%206.06L12%2016.98l-5.44%202.86%201.04-6.06-4.4-4.29%206.08-.88z%22%2F%3E%3C%2Fsvg%3E");
}

/* viền sáng khi dùng bàn phím */
.kk-star-ratings .kksr-star:focus-visible{
  outline:2px solid var(--brand);outline-offset:3px;border-radius:6px;
}

/* điểm số và số lượt — viên thuốc nền vàng nhạt */
.kk-star-ratings .kksr-legend{
  margin:0!important;
  padding:.34rem .95rem;
  font-size:.92rem!important;font-weight:600;line-height:1.4;
  color:#7A5E24;
  background:rgba(161,122,43,.13);
  border-radius:var(--r-pill);
  font-variant-numeric:tabular-nums;
}
/* khi chưa có lượt nào: bỏ làm mờ của plugin để chữ vẫn đủ tương phản */
.kk-star-ratings .kksr-legend .kksr-muted{
  opacity:1;color:var(--ink-50);font-weight:500;
}

@media(max-width:600px){
  .kk-star-ratings{max-width:none}
}

/* ============================================================
   25. KHUNG NHẬN XÉT SẢN PHẨM (WooCommerce)
   Mặc định của WooCommerce còn nguyên tông tím–xám và nút bấm
   bo 3px, lệch hẳn với giao diện. Lặp đúng bộ chọn của plugin
   để ghi đè, và dùng lại đúng bộ sao vàng của khối đánh giá.
   ============================================================ */
#reviews .woocommerce-Reviews-title,
#reviews #respond .comment-reply-title{
  font-size:clamp(1.15rem,2.2vw,1.4rem);font-weight:700;
  letter-spacing:-.02em;margin:0 0 .85rem;display:block;
}
#reviews .woocommerce-noreviews{color:var(--ink-70);margin:0 0 1.5rem}
#reviews #respond{margin-top:1.75rem}
#reviews #respond .comment-form-rating{margin-bottom:1.1rem}
#reviews #respond label{
  display:block;font-size:.92rem;font-weight:600;
  color:var(--ink);margin-bottom:.45rem;
}
#reviews #respond .comment-form-cookies-consent label{
  display:inline;font-weight:400;color:var(--ink-70);font-size:.88rem;
}
#reviews #respond textarea#comment{min-height:150px;resize:vertical}

/* chọn số sao — cùng bộ màu với khối đánh giá bài viết */
.woocommerce #review_form p.stars{margin:0 0 .3rem;line-height:1}
.woocommerce #review_form p.stars a{
  width:44px;height:44px;font-size:30px;   /* vùng chạm 44x44 */
  /* Sao rỗng tô màu nhạt chỉ đạt 1,95:1 trên nền trắng — người dùng
     khó thấy chỗ bấm. Giữ ruột nhạt để phân biệt với sao đã chọn,
     nhưng viền nét đậm 4,10:1 để đường bao luôn rõ. */
  color:#EFE9DA;-webkit-text-stroke:1px #8A7C5E;
  transition:color .18s var(--ease),-webkit-text-stroke-color .18s var(--ease);
}
.woocommerce #review_form p.stars a::before{
  width:44px;height:44px;line-height:44px;text-align:center;
}
.woocommerce #review_form p.stars:hover a{color:#8A6622;-webkit-text-stroke-color:#6F521B}
.woocommerce #review_form p.stars a:hover ~ a{color:#EFE9DA;-webkit-text-stroke-color:#8A7C5E}
.woocommerce #review_form p.stars.selected a.active,
.woocommerce #review_form p.stars.selected a:not(.active){color:#A17A2B;-webkit-text-stroke-color:#6F521B}
.woocommerce #review_form p.stars.selected a.active ~ a{color:#EFE9DA;-webkit-text-stroke-color:#8A7C5E}
.woocommerce #review_form p.stars a:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:8px;
}

/* nút gửi — dùng lại dáng nút đặc của giao diện */
.woocommerce #review_form #respond .form-submit{margin:1.4rem 0 0}
.woocommerce #review_form #respond input#submit{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1.05em 1.9em;                     /* cao ~46px */
  font-family:var(--sans);font-size:.92rem;font-weight:600;line-height:1;
  color:#fff;background:var(--brand);border:1px solid var(--brand);
  border-radius:var(--r-pill);cursor:pointer;text-shadow:none;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.woocommerce #review_form #respond input#submit:hover{
  transform:translateY(-2px);box-shadow:0 10px 24px rgba(200,16,46,.28);
  background:var(--brand);color:#fff;
}

/* sao trong danh sách nhận xét đã đăng */
.woocommerce #reviews .commentlist .star-rating span::before,
.woocommerce .star-rating span::before{color:#A17A2B}
.woocommerce #reviews .commentlist li .comment-text{
  border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1rem,2.4vw,1.4rem);
}

/* ============================================================
   26. KHỐI LIÊN KẾT NHÓM TRANG HỖ TRỢ
   ============================================================ */
.ho-tro{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:clamp(1.75rem,3.5vw,2.5rem);
  border-top:1px solid var(--line);
}
.ho-tro__h{font-size:clamp(1.1rem,2.2vw,1.35rem);font-weight:700;letter-spacing:-.02em;margin:0 0 1.15rem}
.ho-tro__ds{
  list-style:none;margin:0;padding:0;
  display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
}
.ho-tro__ds a{
  display:block;height:100%;
  padding:.95rem 1.1rem;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-field);
  text-decoration:none;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
.ho-tro__ds a:hover{background:#fff;border-color:var(--brand);transform:translateY(-2px)}
.ho-tro__ds b{display:block;font-size:.95rem;font-weight:600;color:var(--ink);margin-bottom:.2rem}
.ho-tro__ds span{display:block;font-size:.85rem;line-height:1.5;color:var(--ink-70)}

/* ============================================================
   27. ĐOẠN GIỚI THIỆU CHUYÊN MỤC
   Trước đây dùng chung lớp .lede nên thừa hưởng canh giữa của
   .page-head: đoạn văn dài căn giữa thì so le hai mép, các đoạn
   lại dính liền nhau và liên kết không nổi lên. Tách riêng.
   ============================================================ */
.archive-intro,
.term-description{          /* WooCommerce dùng lớp riêng cho danh mục sản phẩm */
  max-width:62ch;
  /* Căn trái theo đúng mép của tiêu đề, lưới sản phẩm và mọi khối khác trong
     trang. Trước đây dùng margin auto nên khối bị đẩy vào giữa, đoạn giới
     thiệu thụt vào 243px so với H2 ngay dưới — nhìn như lỗi bố cục. */
  margin:clamp(1.2rem,2.4vw,1.75rem) 0 0;
  text-align:left;
  font-size:clamp(.98rem,1.15vw,1.06rem);
  line-height:1.75;
  color:var(--ink-70);
}
.archive-intro > *:first-child,.term-description > *:first-child{margin-top:0}
.archive-intro > *:last-child,.term-description > *:last-child{margin-bottom:0}
.archive-intro p,.term-description p{margin:0 0 .95rem}
.archive-intro p:last-child,.term-description p:last-child{margin-bottom:0}
.archive-intro a,
.term-description a{
  color:var(--brand);font-weight:500;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:rgba(200,16,46,.4);
  transition:text-decoration-color .2s var(--ease);
}
.archive-intro a:hover,.term-description a:hover{text-decoration-color:var(--brand)}

/* Câu đầu đóng vai dẫn dắt — cho đậm hơn một chút */
.archive-intro > p:first-of-type,.term-description > p:first-of-type{color:var(--ink);font-size:1.05em}

@media(max-width:600px){
  .archive-intro,.term-description{max-width:none}
}

/* ============================================================
   28. NÚT HIỆN MẬT KHẨU (WooCommerce)
   Mặc định 22x22px — dưới mức 24x24 của WCAG 2.5.8.
   ============================================================ */
.woocommerce form .password-input{position:relative;display:block}
.woocommerce form .show-password-input{
  width:32px;height:32px;
  top:50%;transform:translateY(-50%);right:.6rem;
  display:flex;align-items:center;justify-content:center;
}
.woocommerce form .show-password-input::after{
  content:"";width:20px;height:20px;
  background:currentColor;opacity:.55;
  -webkit-mask:var(--mat) center/contain no-repeat;mask:var(--mat) center/contain no-repeat;
  --mat:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.woocommerce form .show-password-input.display-password::after{opacity:1}


/* ============================================================
   29. CỤM LIÊN HỆ NỔI
   ------------------------------------------------------------
   Trước đây có hai nút nổi riêng lẻ ở mép TRÁI: viên "Nhắn Zalo"
   rộng 137px và nút gọi tròn 55px của plugin. Trên điện thoại
   chúng đè lên chữ của bài viết. Gom về một nút tròn ở mép phải,
   chạm vào mới bung danh sách kênh — giống cách các trang đặt
   dịch vụ Việt Nam hay làm.
   ============================================================ */
.lhn-dang-mo .to-top{opacity:0;visibility:hidden;pointer-events:none}

.lhn{
  position:fixed;z-index:120;
  right:var(--noi-phai);
  bottom:calc(var(--noi-duoi) + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;
}

/* --- nút chính --- */
.lhn__nut{
  width:var(--noi-co);height:var(--noi-co);border:0;border-radius:50%;
  background:var(--brand);color:#fff;cursor:pointer;
  display:grid;place-items:center;
  box-shadow:0 0 0 3px rgba(255,255,255,.9), 0 10px 26px rgba(200,16,46,.45);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;
}
.lhn__nut:hover{transform:translateY(-2px);box-shadow:0 0 0 3px rgba(255,255,255,.95), 0 14px 32px rgba(200,16,46,.52)}
.lhn__nut:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* Bỏ chữ "Hotline" dưới nút: chỉ còn ống nghe trên nền đỏ, gọn và nổi hơn.
   Nút trở lại hình tròn đều, không cần chừa chỗ cho chữ nữa. */
.lhn__nut{
  height:var(--noi-co);min-height:0;border-radius:50%;
  padding:0;place-items:center;
}
.lhn__nut svg{width:25px;height:25px}
.lhn__i{display:grid;place-items:center;grid-area:1/1;transition:opacity .2s var(--ease),transform .25s var(--ease)}
.lhn__i--dong{opacity:0;transform:rotate(-45deg) scale(.7)}
.lhn.is-mo .lhn__nut{background:var(--ink);box-shadow:0 8px 22px rgba(18,16,20,.32)}
.lhn.is-mo .lhn__i--mo{opacity:0;transform:rotate(45deg) scale(.7)}
.lhn.is-mo .lhn__i--dong{opacity:1;transform:none}

/* --- danh sách kênh --- */
.lhn__ds{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;align-items:flex-end;gap:.55rem;
}
.lhn__ds[hidden]{display:none}
.lhn__kenh{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.4rem .4rem .4rem .95rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);
  color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:600;
  box-shadow:var(--sh-2);white-space:nowrap;
  opacity:0;transform:translateY(8px) scale(.96);
  transition:opacity .22s var(--ease),transform .22s var(--ease),border-color .2s;
}
.lhn.is-mo .lhn__kenh{opacity:1;transform:none}
.lhn.is-mo li:nth-child(2) .lhn__kenh{transition-delay:.05s}
.lhn__kenh:hover{border-color:var(--brand)}
.lhn__kenh:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.lhn__nhan{line-height:1}
.lhn__kenh .lhn__i{
  width:40px;height:40px;border-radius:50%;flex:none;
  color:#fff;position:static;
}
.lhn__kenh .lhn__i svg{width:21px;height:21px}
.lhn__kenh.is-goi .lhn__i{background:#1BA94C}
.lhn__kenh.is-zalo .lhn__i{background:#0068FF}

@media(max-width:600px){
  /* Khổ hẹp thu nút xuống 54px — đổi luôn biến chung để nút lên đầu trang
     co theo, giữ hai nút cùng một trục dọc. */
  :root{--noi-co:54px}
  .lhn__nut{width:var(--noi-co);min-height:var(--noi-co);border-radius:calc(var(--noi-co) / 2)}
  .lhn__nut svg{width:23px;height:23px}
  .lhn__kenh{font-size:.86rem;padding:.35rem .35rem .35rem .85rem}
  .lhn__kenh .lhn__i{width:38px;height:38px}
}
@media(prefers-reduced-motion:reduce){
  .lhn__nut,.lhn__kenh,.lhn__i{transition:none}
}

/* ============================================================
   34. TRẢI NGHIỆM TRÊN ĐIỆN THOẠI — BIỂU MẪU
   ------------------------------------------------------------
   Ô tick của Contact Form 7 để mặc định chỉ 13×13px, nhãn cao 25px:
   ngón tay khó trúng, dưới xa mức 44px của WCAG 2.5.8. Phóng ô tick và
   biến cả dòng nhãn thành vùng bấm. Nút gửi cũng chỉ rộng 83px — quá
   hẹp cho hành động chính trên màn hình nhỏ.
   ============================================================ */
.wpcf7-list-item{margin:0}
.wpcf7-list-item label,
.wpcf7-acceptance label{
  display:flex;align-items:center;gap:.6rem;
  min-height:44px;cursor:pointer;
}
.wpcf7-list-item input[type="checkbox"],
.wpcf7-list-item input[type="radio"],
.wpcf7-acceptance input[type="checkbox"]{
  width:22px;height:22px;flex:none;margin:0;
  accent-color:var(--brand);cursor:pointer;
}
.wpcf7-list-item .wpcf7-list-item-label{line-height:1.4}

/* Các lựa chọn xếp dọc, cách nhau đủ để không bấm nhầm */
.wpcf7-checkbox,.wpcf7-radio,.wpcf7-acceptance{
  display:flex;flex-direction:column;gap:.15rem;
}

@media(max-width:620px){
  /* Hành động chính trải hết bề ngang cho dễ bấm bằng một tay.
     Phải dùng .entry cho đủ độ ưu tiên: quy tắc kiểu dáng sẵn có của nút
     gửi là `.entry .wpcf7 input[type=submit]`, chặt hơn `.wpcf7 input`. */
  .entry .wpcf7 input[type=submit],
  .entry .wpcf7 button[type=submit]{width:100%;min-height:52px;font-size:1rem}
}

/* ============================================================
   35. TRANG CHỦ — CÂU CHUYỆN & BA BƯỚC ĐẶT HÀNG
   ============================================================ */

/* Trích dẫn trong khối câu chuyện */
.trich-dan{
  margin:0 0 1.25rem;padding:1.1rem 1.25rem;
  background:#fff;border-left:3px solid var(--brand);border-radius:0 var(--r-card) var(--r-card) 0;
}
.trich-dan blockquote{
  margin:0;font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.6;
  font-weight:500;color:var(--ink);
}

/* Ba bước đặt hàng. Không dùng .cards hay .trio vì hai khối đó chuyển
   thành băng chuyền ngang ở khổ hẹp — các bước phải đọc theo thứ tự nên
   cần xếp dọc trên điện thoại. */
.buoc{
  list-style:none;margin:clamp(1.6rem,3vw,2.4rem) 0 0;padding:0;
  display:grid;gap:clamp(.9rem,1.8vw,1.4rem);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media(max-width:820px){.buoc{grid-template-columns:1fr}}
.buoc__i{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-card);padding:clamp(1.3rem,2.5vw,1.8rem);
}
.buoc__so{
  position:absolute;top:clamp(1.3rem,2.5vw,1.8rem);right:clamp(1.3rem,2.5vw,1.8rem);
  font-size:2.4rem;font-weight:800;line-height:1;color:var(--brand-soft);
}
.buoc__icon{
  width:44px;height:44px;padding:11px;border-radius:14px;box-sizing:border-box;
  background:var(--brand-soft);stroke:var(--brand);fill:none;stroke-width:1.7;
  margin-bottom:.9rem;display:block;
}
.buoc__i h3{font-size:1.06rem;font-weight:600;margin:0 0 .45rem}
.buoc__i p{margin:0;font-size:.94rem;line-height:1.7;color:var(--ink-70)}
.buoc__i a{color:var(--brand);font-weight:600}
.buoc__i a:hover{text-decoration:underline}

/* ============================================================
 * 36. Dấu Bộ Công Thương ở chân trang
 * ---------------------------------------------------------- */
.foot-bct{display:inline-flex;align-items:center}
.foot-bct a{display:inline-flex;align-items:center;opacity:.8;transition:opacity .2s}
.foot-bct a:hover,.foot-bct a:focus-visible{opacity:1}
.foot-bct img{display:block;height:auto;width:clamp(96px,10vw,120px)}

/* ============================================================
 * 37. Ghi chú miễn trừ
 * ---------------------------------------------------------- */
.mien-tru{margin:clamp(2rem,4vw,3rem) 0 0;padding:clamp(1rem,2.2vw,1.4rem) clamp(1.1rem,2.4vw,1.6rem);
  border-left:3px solid var(--vien,#d8cfc0);background:rgba(0,0,0,.03);border-radius:.5rem;
  font-size:.92rem;line-height:1.65;color:rgba(0,0,0,.66)}
.mien-tru strong{color:rgba(0,0,0,.8)}
@media(prefers-color-scheme:dark){.mien-tru{background:rgba(255,255,255,.05);color:rgba(255,255,255,.7)}}