/**
* YogiBee Theme — Main Stylesheet (theme.css)
* Mobile-first · No aspect-ratio · No color-mix() · No :has() · No dvh
* Padding-bottom % cho image containers (iOS Safari 14 compat).
* @version 1.1.0
*/
/* ═══════════════════════════════════════════
1. DESIGN TOKENS
══════════════════════════════════════════ */
:root{
/* Surface */
--w:#FFF;--s0:#FAFDF8;--s1:#F4FAF0;--s2:#E8F4E0;--s3:#D4ECC4;
/* Jade — Primary (nhẹ hơn bản gốc, giữ tinh thần sage-jade) */
--jade:#3E8368;--j2:#1D4E3D;--j3:#4F9678;
/* Amber — Accent */
--amb:#C88830;--a2:#A87020;--a3:#E0A040;
/* Text */
--tx:#1A2018;--tx2:#4A6454;--tx3:#7A9080;
/* Border */
--bd:rgba(62,131,104,.14);--bd2:rgba(62,131,104,.06);
/* Shadow */
--sh1:0 1px 4px rgba(29,78,61,.08);
--sh2:0 4px 20px rgba(29,78,61,.12);
--sh3:0 12px 40px rgba(29,78,61,.14);
/* Radius */
--r:8px;--rl:16px;--rxl:24px;
/* Typography */
--fh:'Lora',Georgia,serif;
--fb:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
/* Scale */
--fs-xs:12px;--fs-sm:14px;--fs-base:16px;--fs-md:18px;
/* Transition */
--tr:200ms ease;
/* Layout */
--wrap:1200px;--nav-h:62px;
/* Z-index scale */
--z-nav:100;--z-drawer:400;--z-modal:500;--z-toast:5000;
/* Admin bar offset (set by body class) */
--abh:0px;
}
.admin-bar{--abh:32px}
/* ═══════════════════════════════════════════
2. RESET
══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--fb);color:var(--tx);background:var(--w);-webkit-font-smoothing:antialiased;line-height:1.75}
img{display:block;max-width:100%;image-rendering:-webkit-optimize-contrast}
/* Plugin chuyển ảnh sang WebP bọc mọi ![]()
trong một (đôi khi hai) lớp
. Toàn bộ theme vốn dùng bộ chọn con trực tiếp kiểu `.pim>img` để
phủ kín khung ảnh — thêm lớp bọc là luật đó không khớp nữa, ảnh nhảy về kích
thước gốc và tràn ra ngoài khung (thấy rõ ở card sản phẩm ngoài danh sách).
LƯU Ý: display:contents chỉ gỡ khỏi cây BỐ CỤC, nó KHÔNG đổi cách
bộ chọn CSS khớp DOM — `.pim>img` vẫn trượt. Vì vậy các luật ảnh bên dưới
đều đã đổi sang bộ chọn hậu duệ (`.pim img`). Dòng này giữ lại để thẻ bọc
không tự sinh thêm hộp làm lệch flex/grid. */
picture{display:contents}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font-family:var(--fb)}
input,select,textarea{font-family:var(--fb);-webkit-appearance:none;border-radius:var(--r)}
ul,ol{list-style:none}
button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{user-select:none;-webkit-user-select:none}
/* ═══════════════════════════════════════════
3. TYPOGRAPHY BASE
══════════════════════════════════════════ */
h1,h2,h3,h4,h5,h6,.h-serif{font-family:var(--fh);font-weight:500;color:var(--tx);margin:0}
/* ═══════════════════════════════════════════
4. LAYOUT
══════════════════════════════════════════ */
.w{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sec{padding:72px 0}
/* Gradient section — mờ dần từ trắng ở 2 đầu để nối liền mạch, không đứt quãng */
.sec-mist{background:linear-gradient(180deg,var(--w) 0%,var(--s0) 50%,var(--w) 100%)}
.sec-sage{background:linear-gradient(180deg,var(--w) 0%,var(--s1) 50%,var(--w) 100%)}
.sec-mint{background:linear-gradient(180deg,var(--w) 0%,var(--s2) 50%,var(--w) 100%)}
.sec-white{background:var(--w)}
.sec-dark{background:var(--j2)}
.sec-dark-in{background:linear-gradient(180deg,var(--w) 0%,var(--j2) 12%,var(--j2) 100%)}
/* Section header */
.sh{margin-bottom:40px}
.sh.c{text-align:center}
.sh.c .ss{margin:10px auto 0}
.sey{font-size:var(--fs-xs);font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--tx3);margin-bottom:9px}
.st{font-family:var(--fh);font-size:clamp(22px,4vw,34px);font-weight:500;color:var(--j2);line-height:1.25;letter-spacing:-.02em}
.ss{font-size:var(--fs-sm);color:var(--tx2);line-height:1.7;max-width:460px;margin-top:10px}
/* Wrappers */
.yb-container-narrow{max-width:860px;margin:0 auto;padding:40px 20px}
/* ═══════════════════════════════════════════
5. ADMIN BAR — nav offset
══════════════════════════════════════════ */
@media screen and (max-width:782px){.admin-bar{--abh:46px}}
/* ═══════════════════════════════════════════
6. NAVIGATION
══════════════════════════════════════════ */
.nav{
position:sticky;top:var(--abh);z-index:var(--z-nav);
background:rgba(255,255,255,.95);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid var(--bd);
transition:box-shadow .25s;
}
.nav.yb-scrolled{box-shadow:var(--sh2);background:rgba(255,255,255,.98)}
.ni{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;height:var(--nav-h);padding:0 20px;gap:12px}
/* Logo */
.logo{display:flex;align-items:center;gap:9px;flex-shrink:0;text-decoration:none}
/* Logo ảnh (YogiBee.vn dạng ngang) — giới hạn chiều cao, tự co theo tỉ lệ */
.custom-logo-link{display:inline-flex;align-items:center;text-decoration:none}
.custom-logo{max-height:44px;width:auto;height:auto;display:block}
@media(max-width:600px){.custom-logo{max-height:36px}}
/* Logo footer — object-fit:contain và max-width:100% để ảnh KHÔNG bị kéo giãn
khi WordPress xuất kèm thuộc tính width/height của file gốc. */
.ft-logo-img{
max-height:52px;max-width:min(240px,100%);
width:auto;height:auto;
object-fit:contain;object-position:left center;
display:block;
}
.logo-icon{
width:32px;height:32px;border-radius:50%;
background:radial-gradient(circle at 38% 35%,#EAC870,#C8883A 55%,#8A5018 100%);
flex-shrink:0;box-shadow:0 0 0 2px rgba(200,136,48,.22);
}
.logo-name{font-family:var(--fh);font-style:italic;font-size:19px;color:var(--jade)}
.logo-name span,.logo-name em{color:var(--amb);font-style:inherit}
/* Desktop nav (hidden mobile) */
.dnav{display:none;margin-left:auto;gap:2px;align-items:center}
.dnav ul{display:flex;align-items:center;gap:2px;padding:0}
.dnav a,.dnav .menu-item>a{
display:flex;align-items:center;min-height:44px;
padding:7px 12px;font-size:var(--fs-sm);
color:var(--tx2);border-radius:var(--r);transition:all var(--tr);text-decoration:none;
}
.dnav a:hover,.dnav .menu-item>a:hover,
.dnav .current-menu-item>a,.dnav .current_page_item>a{color:var(--tx);background:var(--s1)}
/* Header actions */
.hacts{margin-left:auto;display:flex;gap:4px;align-items:center}
/* 44x44 là vùng chạm tối thiểu theo Apple HIG và Google Material (48dp).
Trước đây 38px — vẫn bấm được bằng chuột nhưng dễ trượt trên điện thoại. */
.ib{
width:44px;height:44px;display:flex;align-items:center;justify-content:center;
border-radius:var(--r);color:var(--tx2);transition:all var(--tr);position:relative;
}
.ib:hover{background:var(--s1);color:var(--tx)}
.ib svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cbadge{
position:absolute;top:6px;right:6px;
min-width:17px;height:17px;padding:0 4px;
background:var(--amb);color:var(--j2);
font-size:11px;font-weight:700;border-radius:9px;
display:flex;align-items:center;justify-content:center;
line-height:1;
}
/* Hamburger */
.hbg{
display:flex;flex-direction:column;gap:5px;
width:44px;height:44px;align-items:center;justify-content:center;
border-radius:var(--r);transition:all var(--tr);
}
.hbg span{display:block;width:18px;height:1.5px;background:var(--tx2);border-radius:2px;transition:all var(--tr)}
.hbg:hover{background:var(--s1)}
.hbg.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hbg.is-open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hbg.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* ═══════════════════════════════════════════
7. MOBILE MENU — display:none/flex ONLY
══════════════════════════════════════════ */
.mm-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:200}
.mm-ov.on{display:block}
.mm-panel{
display:none;position:fixed;top:0;left:0;bottom:0;
width:min(300px,82vw);background:var(--w);
z-index:201;overflow-y:auto;
flex-direction:column;box-shadow:var(--sh3);
}
.mm-panel.on{display:flex}
.mm-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--bd);background:var(--s1)}
.mm-close{width:44px;height:44px;border-radius:50%;border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--tx2);cursor:pointer;line-height:1}
.mm-lnk,.mm-panel .menu-item a{
display:flex;align-items:center;justify-content:space-between;
padding:15px 20px;font-size:var(--fs-base);color:var(--tx);
border-bottom:1px solid var(--bd);transition:background var(--tr);text-decoration:none;
}
.mm-lnk:hover,.mm-panel .menu-item a:hover{background:var(--s1);color:var(--jade)}
.mm-arr{margin-left:auto;color:var(--tx3);font-size:13px}
.mm-lnk-sub{padding-left:36px!important;font-size:var(--fs-sm)!important;color:var(--tx2)!important}
.mm-panel ul{padding:0}
.mm-contact{padding:18px 20px;border-top:1px solid var(--bd);margin-top:auto;background:var(--s1)}
.mm-ph{font-size:var(--fs-sm);color:var(--tx2);margin-bottom:8px}
.mm-hrs{font-size:var(--fs-xs);color:var(--tx3);margin-bottom:12px}
/* ═══════════════════════════════════════════
8. BUTTONS
══════════════════════════════════════════ */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:7px;
padding:13px 26px;border-radius:var(--r);
font-size:var(--fs-sm);font-weight:500;
transition:all var(--tr);font-family:var(--fb);cursor:pointer;line-height:1;
min-height:44px; /* vùng chạm tối thiểu trên mobile */
}
.bj{background:var(--jade);color:#fff}
.bj:hover{background:var(--j2);transform:translateY(-1px);box-shadow:var(--sh2)}
.ba{background:var(--w);color:var(--a2);border:1.5px solid var(--amb)}
.ba:hover{background:rgba(200,136,80,.08);transform:translateY(-1px)}
.bo{background:transparent;color:var(--a2);border:1.5px solid var(--amb)}
.bo:hover{background:rgba(200,136,48,.08)}
.boj{background:transparent;color:var(--jade);border:1.5px solid var(--bd)}
.boj:hover{border-color:var(--jade);background:var(--s1)}
.bghost{background:rgba(255,255,255,.13);color:rgba(255,255,255,.92);border:1.5px solid rgba(255,255,255,.28)}
.bghost:hover{background:rgba(255,255,255,.22)}
.bzalo{background:#0068FF;color:#fff}
.bzalo:hover{background:#0052CC;transform:translateY(-1px)}
.btn:active,.pc:active,.mm-lnk:active{opacity:.85}
/* ═══════════════════════════════════════════
9. FORMS
══════════════════════════════════════════ */
.ff{margin-bottom:12px}
.fl{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--tx);margin-bottom:5px;letter-spacing:.3px}
.fi{
width:100%;padding:13px 16px;border-radius:var(--r);
border:1.5px solid var(--bd);background:var(--s1);
color:var(--tx);font-size:16px;/* 16px prevents iOS zoom */
font-family:var(--fb);outline:none;transition:border-color var(--tr);
}
.fi:focus{border-color:var(--jade);background:var(--w)}
select.fi{font-size:16px}
/* ═══════════════════════════════════════════
10. PRODUCT CARDS — padding-bottom % (no aspect-ratio)
══════════════════════════════════════════ */
/* Mobile-first: điện thoại 1 cột → ảnh sản phẩm đủ lớn, chữ và giá dễ đọc.
2 cột từ 600px (điện thoại nằm ngang / tablet nhỏ), 3 cột từ 768, 4 từ 1024. */
.pgrid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:600px){.pgrid{grid-template-columns:repeat(2,1fr)}}
.pc{background:var(--w);border-radius:var(--rl);border:1.5px solid #d4d4d4;overflow:hidden;transition:all .25s;cursor:pointer;display:flex;flex-direction:column;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.pc:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.11);border-color:#aaa}
/* Image container — padding-bottom trick */
/* Viền dưới tách khung ảnh khỏi phần chữ: ảnh sản phẩm nền trắng nằm trên
card nền trắng thì không thấy đâu là hết ảnh, tên và giá trông như trôi
thẳng vào tấm ảnh. Cố tình NHẠT hơn viền ngoài của card (1.5px #d4d4d4) —
đây là vạch ngăn nội bộ, đậm bằng viền ngoài thì trông như card bị cắt đôi. */
.pim{
position:relative;overflow:hidden;
background:var(--s1); /* loading bg */
border-bottom:1px solid #ececec;
}
.pim::before{content:'';display:block;padding-bottom:100%} /* 1:1 */
/* Bộ chọn kèm .pim hai lần để vượt độ ưu tiên của luật
`picture>img.pvt-loaded{width:100%}` do plugin lazy-load khai — luật đó ép
width nhưng KHÔNG đặt height, nên ảnh không phủ kín khung vuông và card
sản phẩm bị vỡ bố cục. */
/* contain, GIỐNG ảnh lớn ở trang chi tiết (.pd-slide img).
cover lấp kín khung nhưng phải xén — ảnh sản phẩm hay có dải màu, logo, chữ
ở mép nên xén là mất thông tin và trông như ảnh bị lệch khung. contain cho
thấy trọn vẹn tấm ảnh; phần thừa là nền xanh nhạt của .pim, nhìn có chủ ý.
Đi kèm: template xin bản ảnh KHÔNG bị cắt cứng theo tỉ lệ (xem
archive-yb_product.php) — nếu không thì ảnh đã bị crop từ trước khi tới CSS. */
.pim.pim img{
position:absolute !important;inset:0 !important;
width:100% !important;height:100% !important;object-fit:contain !important;
}
/* Gradient fallback divs */
.pim>.mt{
position:absolute;
width:52%;height:80%;top:10%;left:24%;
border-radius:34px;background:rgba(255,255,255,.13);
}
.pim>.mt::after{content:'';position:absolute;inset:6px;border-radius:28px;border:1px solid rgba(255,255,255,.18)}
/* Colour gradient backgrounds */
.c1{background:linear-gradient(155deg,#0A1A10,#1A3828,#2A5040)}
.c2{background:linear-gradient(155deg,#0A1418,#142030,#203848)}
.c3{background:linear-gradient(155deg,#1A180A,#363010,#504818)}
.c4{background:linear-gradient(155deg,#180A10,#301020,#481828)}
.c5{background:linear-gradient(155deg,#101810,#283828,#305040)}
.c6{background:linear-gradient(155deg,#0E1614,#1C2C22,#284038)}
/* Link phủ toàn ảnh — thay cho việc bọc cả .pim trong thẻ .
Nhờ vậy nút "Thêm vào giỏ" là phần tử anh em, không bị nuốt click. */
.pim-lnk{position:absolute;inset:0;z-index:2;display:block;text-indent:-9999px;overflow:hidden}
/* Badges */
.pbdg{position:absolute;top:10px;left:10px;padding:4px 8px;border-radius:4px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.4px;text-transform:uppercase;z-index:3;pointer-events:none}
.pb1{background:var(--amb);color:var(--j2)}
.pb2{background:var(--jade);color:#fff}
.pb3{background:#C04030;color:#fff}
/* ═══ NHÃN GỘP — MỘT pill, HAI đoạn ═══
Hai nhãn rời đặt hai góc làm ảnh sản phẩm trông chật. Gộp lại thành một
khối liền: đoạn trái nói "vì sao đáng xem" (Bán chạy / Mới), đoạn phải nói
"vì sao mua ngay" (-14%). Vẫn đủ thông tin nhưng chỉ chiếm một chỗ, và mắt
đọc liền một mạch thay vì phải nhảy qua lại hai góc. */
.pbdg--combo{
display:inline-flex;align-items:stretch;
padding:0;border-radius:5px;overflow:hidden;
letter-spacing:0;text-transform:none;
box-shadow:0 1px 4px rgba(0,0,0,.18);
opacity:.92;
}
.pbdg-st,.pbdg-off{
display:inline-flex;align-items:center;
padding:3px 7px;line-height:1;
}
.pbdg-st{
font-size:10px;font-weight:600;
letter-spacing:.3px;text-transform:uppercase;
}
.pbs-hot{background:var(--amb);color:var(--j2)}
.pbs-new{background:var(--jade);color:#fff}
.pbs-sale{background:#C0342A;color:#fff}
.pbdg-off{
background:#C0342A;color:#fff;
font-size:11px;font-weight:600;
}
/* Quick-add */
.qa{position:absolute;bottom:0;left:0;right:0;min-height:44px;padding:10px;background:var(--jade);color:#fff;font-size:var(--fs-sm);font-weight:500;text-align:center;transform:translateY(100%);transition:transform .25s;border:none;font-family:var(--fb);z-index:4;cursor:pointer}
.pc:hover .qa,.pc:focus-within .qa{transform:translateY(0)}
.qa:hover{background:var(--j2)}
/* Thiết bị cảm ứng không có hover → luôn hiện nút, nếu không sẽ không bao giờ bấm được */
@media(hover:none){.qa{transform:translateY(0)}}
/* Card body — cột dọc.
KHÔNG dùng margin-top:auto cho .pp: căn đáy khiến card có giá gạch xuống
dòng (khối cao hơn) lại bắt đầu sớm hơn, làm dòng giá lệch nhau. Vì mọi
thành phần phía trên (.pbr, tên 2 dòng) đều cố định chiều cao nên chỉ cần
để .pp chảy tự nhiên là các card tự thẳng hàng. */
.pc{display:flex;flex-direction:column}
.pi{padding:14px 12px 15px;display:flex;flex-direction:column;flex:1}
/* Tên thương hiệu giữ chỗ cả khi sản phẩm chưa gắn thương hiệu */
.pbr{min-height:21px}
/* Giá và giá gạch trên cùng một dòng, chỉ xuống dòng khi thật sự chật */
.pbr{font-size:var(--fs-xs);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--j3);margin-bottom:4px}
/* Tên sản phẩm: khoá đúng 2 dòng.
line-clamp cắt tên dài; min-height giữ chỗ đủ 2 dòng ngay cả khi tên chỉ có
1 dòng — nhờ vậy dòng giá của mọi card luôn nằm cùng một độ cao. */
.pn{
/* KHÔNG in nghiêng: tên sản phẩm là thứ khách quét mắt nhanh nhất trong
lưới, chữ nghiêng làm chậm việc đọc mà không thêm nghĩa gì. */
font-family:var(--fh);font-size:15px;font-weight:500;
color:var(--tx);line-height:1.4;margin-bottom:8px;
display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
-webkit-box-orient:vertical;overflow:hidden;
min-height:calc(2 * 1.4em);
}
/* Link trong tên (internal linking) — chỉ đổi màu khi hover, không gạch dưới */
.pn a{color:inherit;text-decoration:none;transition:color var(--tr)}
.pn a:hover{color:var(--jade)}
/* Giá bán và giá gốc PHẢI nằm cùng một dòng.
Bản cũ cho phép xuống dòng: ở lưới 4 cột, card nào có giá gốc dài thì giá bị
đẩy thành hai dòng, card đó cao hơn hẳn các card bên cạnh và chừa một mảng
trống — nhìn như lỗi bố cục. Giờ khoá nowrap và thu nhỏ giá gốc: giá gốc chỉ
là mốc tham chiếu, không cần to bằng giá phải trả. */
.pp{display:flex;align-items:baseline;gap:6px;flex-wrap:nowrap;min-width:0}
.ppm{font-size:15px;font-weight:700;color:var(--a2);white-space:nowrap}
.ppo{font-size:var(--fs-xs);color:var(--tx3);text-decoration:line-through;white-space:nowrap}
.pdsc{font-size:var(--fs-xs);background:#FEF2F2;color:#C04030;padding:2px 6px;border-radius:4px;font-weight:600}
/* Đánh giá + đã bán — giữa tên và giá. Đánh giá bên trái (đọc trước, gây tin
tưởng), đã bán bên phải (đối trọng cân bằng thị giác trên cùng một dòng). */
.pc-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-size:var(--fs-xs)}
.pc-rating{color:#D4A017;font-weight:600}
.pc-sold{color:var(--tx3)}
/* ═══════════════════════════════════════════
11. BLOG CARDS
══════════════════════════════════════════ */
.bgrid{display:grid;grid-template-columns:1fr;gap:22px}
.bc{background:var(--w);border-radius:var(--rl);overflow:hidden;border:1px solid var(--bd2);transition:all .22s;cursor:pointer;display:flex;flex-direction:column}
.bc:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
/* Blog image — 16:9 padding-bottom */
.bim{position:relative;overflow:hidden}
.bim::before{content:'';display:block;padding-bottom:56.25%}
.bim.bim img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Gradient fallbacks */
.bi1{background:linear-gradient(135deg,#0C1A10,#1A3828)}
.bi2{background:linear-gradient(135deg,#1A180A,#3A3010)}
.bi3{background:linear-gradient(135deg,#0A1018,#1A2840)}
.bi4{background:linear-gradient(135deg,#180818,#302038)}
/* Card body */
.bbd{padding:16px 18px 18px;flex:1}
.bcat{font-size:var(--fs-xs);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--tx3);margin-bottom:7px}
.bt{font-family:var(--fh);font-size:var(--fs-base);font-weight:500;color:var(--tx);line-height:1.4;margin-bottom:8px;font-style:italic}
.bex{font-size:var(--fs-sm);color:var(--tx2);line-height:1.7;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bm{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--tx3);flex-wrap:wrap}
.bmd{color:var(--bd)}
/* Featured post */
.fp{background:var(--w);border-radius:var(--rl);border:1px solid var(--bd2);overflow:hidden;margin-bottom:24px;cursor:pointer;transition:all .22s}
.fp:hover{box-shadow:var(--sh2)}
.fpi{position:relative;overflow:hidden}
.fpi::before{content:'';display:block;padding-bottom:43.75%} /* 16:7 */
.fpi.fpi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fpi.bg-dark{background:linear-gradient(145deg,#0A1A10,#1E3828,#2A5040)}
.ftag{position:absolute;bottom:14px;left:14px;padding:5px 10px;background:var(--amb);color:var(--j2);font-size:var(--fs-xs);font-weight:700;letter-spacing:.8px;text-transform:uppercase;border-radius:4px}
.fpb{padding:20px}
.fpt{font-family:var(--fh);font-size:20px;font-weight:500;font-style:italic;color:var(--tx);line-height:1.38;margin-bottom:9px}
/* ═══════════════════════════════════════════
12. PAGE BANNER + BREADCRUMB
══════════════════════════════════════════ */
.pban{background:linear-gradient(135deg,var(--s1) 0%,var(--s2) 100%);padding:32px 20px;border-bottom:1px solid var(--bd)}
.pban h1{font-family:var(--fh);font-size:clamp(24px,5vw,38px);font-weight:500;font-style:italic;color:var(--j2);margin-bottom:6px}
.pban p{font-size:var(--fs-sm);color:var(--tx2)}
.brc,.yb-breadcrumb ol{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--tx3);margin-bottom:10px;flex-wrap:wrap;padding:0}
/* Vùng chạm đủ cao cho link breadcrumb trên điện thoại */
.brc a,.yb-breadcrumb a{color:var(--tx2);display:inline-flex;align-items:center;min-height:44px}
.brc a:hover,.yb-breadcrumb a:hover{color:var(--jade)}
.yb-breadcrumb .sep{color:var(--tx3)}
/* ═══════════════════════════════════════════
13. BRANDS BAR
══════════════════════════════════════════ */
.brds{background:var(--s1);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);padding:20px 0;overflow-x:hidden}
.brdi{max-width:var(--wrap);margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.brdi::-webkit-scrollbar{display:none}
.brl{font-size:var(--fs-xs);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--tx3);white-space:nowrap;margin-right:10px;flex-shrink:0}
.brp{flex-shrink:0;padding:6px 15px;border-radius:22px;background:var(--w);border:1px solid var(--bd);font-size:var(--fs-xs);font-weight:700;letter-spacing:.8px;color:var(--tx2);white-space:nowrap;transition:all var(--tr);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.brp:hover{border-color:var(--jade);color:var(--jade)}
/* ═══════════════════════════════════════════
14. WHY US
══════════════════════════════════════════ */
.wyg{display:grid;grid-template-columns:1fr;gap:18px;margin-top:40px}
.wyc{background:var(--w);border-radius:var(--rl);padding:22px;border:1px solid var(--bd2);display:flex;gap:15px;align-items:flex-start}
.wyi{width:46px;height:46px;border-radius:12px;background:var(--s2);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.wyc h3{font-family:var(--fh);font-size:var(--fs-md);font-weight:500;color:var(--j2);margin-bottom:6px;font-style:italic}
.wyc p{font-size:var(--fs-sm);color:var(--tx2);line-height:1.75}
/* ═══════════════════════════════════════════
15. LEAD MAGNET
══════════════════════════════════════════ */
.lead{background:var(--j2);padding:80px 0;text-align:center;position:relative;overflow:hidden}
.lead::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 80% 20%,rgba(200,136,48,.14) 0%,transparent 50%),radial-gradient(ellipse at 20% 80%,rgba(90,168,80,.10) 0%,transparent 50%);pointer-events:none}
.lead-in{position:relative}
.leadbdg{display:inline-block;padding:6px 14px;background:rgba(200,136,48,.18);border:1px solid rgba(200,136,48,.32);border-radius:22px;font-size:var(--fs-xs);font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--a3);margin-bottom:20px}
.leadh{font-family:var(--fh);font-style:italic;font-weight:400;font-size:clamp(26px,5vw,42px);color:#fff;line-height:1.25;margin-bottom:14px;letter-spacing:-.02em}
.leadh em{color:var(--a3)}
.leadsb{font-size:var(--fs-base);font-weight:300;color:rgba(255,255,255,.65);max-width:400px;margin:0 auto 28px;line-height:1.7}
.ldf{display:flex;flex-direction:column;gap:9px;max-width:420px;margin:0 auto}
.ldi{padding:14px 18px;border-radius:var(--r);border:1.5px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font-size:16px;outline:none;transition:border-color var(--tr)}
.ldi::placeholder{color:rgba(255,255,255,.42)}
.ldi:focus{border-color:var(--amb)}
/* ═══════════════════════════════════════════
16. FOOTER
══════════════════════════════════════════ */
.ft{background:var(--j2);border-top:1px solid rgba(255,255,255,.06);padding:44px 0 22px}
/* Mobile-first: footer 1 cột trên điện thoại. Bản cũ mặc định 2 cột nên các
cột bị bóp hẹp, chữ xuống dòng lộn xộn ở màn hình nhỏ. */
.ftg{display:grid;grid-template-columns:1fr;gap:26px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:18px}
@media(min-width:600px){.ftg{grid-template-columns:1fr 1fr;gap:28px}}
.ftn{font-family:var(--fh);font-style:italic;font-size:20px;color:#fff;margin-bottom:10px}
.ftn span,.ftn em{color:var(--a3)}
.ftd{font-size:var(--fs-sm);color:rgba(255,255,255,.45);line-height:1.7}
.fth{font-size:var(--fs-xs);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:12px}
.ftl,.ftl ul{display:flex;flex-direction:column;gap:2px}
/* inline-flex + min-height cho vùng chạm 44px, thay vì chỉ cao bằng dòng chữ */
.ftl a,.ftl li a{font-size:var(--fs-sm);color:rgba(255,255,255,.42);transition:color var(--tr);display:inline-flex;align-items:center;min-height:44px}
.ftl a:hover,.ftl li a:hover{color:rgba(255,255,255,.85)}
.ftb{font-size:var(--fs-xs);color:rgba(255,255,255,.26);text-align:center}
/* ═══════════════════════════════════════════
17. FLOATING ELEMENTS — position:fixed
══════════════════════════════════════════ */
/* Toast */
/* Trạng thái ẩn phải ẩn THẬT.
Bản cũ chỉ đẩy xuống 80px trong khi hộp nằm cách đáy 70px và cao 22px —
tức là vẫn hở 12px ở đáy màn hình. Kết quả: một vệt nền xanh nằm giữa đáy
trang suốt cả phiên, và mỗi lần hiện thông báo thì phần đầu dòng chữ kẹt
lại ở đó, trông như toast "không chịu tắt". opacity + visibility làm nó
biến mất hẳn, không phụ thuộc vào việc dịch bao nhiêu pixel là đủ. */
.toast{
position:fixed;bottom:70px;left:50%;
transform:translateX(-50%) translateY(80px);
background:var(--j2);color:#fff;
padding:11px 20px;border-radius:var(--r);
font-size:var(--fs-sm);font-weight:500;
/* Câu hướng dẫn chọn phân loại dài hơn một dòng — nowrap sẽ đẩy hộp tràn ra
ngoài màn hình điện thoại. Cho xuống dòng, chặn bề ngang theo viewport. */
z-index:var(--z-toast);
max-width:min(420px,calc(100vw - 32px));
text-align:center;line-height:1.5;
opacity:0;visibility:hidden;
transition:transform .28s cubic-bezier(.34,1.56,.64,1),opacity .2s ease,visibility 0s linear .28s;
pointer-events:none;box-shadow:var(--sh2);
}
.toast.on{
transform:translateX(-50%) translateY(0);
opacity:1;visibility:visible;
transition:transform .28s cubic-bezier(.34,1.56,.64,1),opacity .2s ease,visibility 0s;
}
/* Scroll-to-top */
.stt{
position:fixed;bottom:22px;right:18px;
width:44px;height:44px;border-radius:50%;
background:var(--jade);color:#fff;
display:flex;align-items:center;justify-content:center;
cursor:pointer;opacity:0;pointer-events:none;
transition:all .25s;z-index:150;box-shadow:var(--sh2);
}
.stt.show{opacity:1;pointer-events:all}
.stt:hover{background:var(--j2)}
.stt svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round}
/* Zalo float */
.zalo-float{
position:fixed;bottom:70px;right:18px;z-index:140;
width:48px;height:48px;border-radius:50%;
background:#0068FF;display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 16px rgba(0,104,255,.35);
transition:transform .2s,box-shadow .2s;text-decoration:none;
color:#fff; /* bong bóng Zalo dùng currentColor */
}
.zalo-float svg{width:30px;height:30px;display:block}
.zalo-float:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(0,104,255,.45)}
/* Nút giỏ hàng nổi — chỉ hiện khi giỏ có hàng (cart.js bật/tắt thuộc tính
hidden). Xếp ngay trên nút Zalo: 70 + 48 + 12 khoảng cách = 130.
Biểu tượng giỏ nhỏ trên header nằm ngoài tầm mắt khi khách đang cuộn giữa
trang dài; nút nổi giữ đường vào giỏ luôn trong tầm ngón tay cái. */
.yb-fab-cart{
position:fixed;bottom:130px;right:18px;z-index:141;
width:48px;height:48px;border-radius:50%;
background:var(--jade);color:#fff;
display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 16px rgba(26,92,72,.38);
transition:transform .2s,box-shadow .2s;text-decoration:none;
}
.yb-fab-cart[hidden]{display:none}
.yb-fab-cart:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(26,92,72,.5)}
.yb-fab-cart svg{width:23px;height:23px;display:block}
.yb-fab-badge{
position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;
padding:0 5px;border-radius:10px;
background:var(--a2);color:#fff;border:2px solid var(--bg,#fff);
font-size:11px;font-weight:700;line-height:16px;text-align:center;
}
/* Vừa thêm hàng vào giỏ → nảy một nhịp để mắt bắt được nút vừa xuất hiện */
.yb-fab-cart.is-bump{animation:ybFabBump .42s ease}
@keyframes ybFabBump{0%,100%{transform:scale(1)}35%{transform:scale(1.22)}}
@media (prefers-reduced-motion:reduce){
.yb-fab-cart.is-bump{animation:none}
.yb-fab-cart{transition:none}
}
/* ═══════════════════════════════════════════
16b. TRANG TÌM KIẾM
══════════════════════════════════════════ */
.ysearch-start{
padding:clamp(48px,9vw,96px) 0;
background:linear-gradient(175deg,#FFFFFF 0%,#FAFDF8 45%,#F2F8EC 100%);
}
.ysearch-h1{
font-family:var(--fh);font-style:italic;font-weight:400;
font-size:clamp(28px,5.5vw,46px);color:var(--j2);
text-align:center;margin-bottom:10px;
}
.ysearch-sub{
text-align:center;color:var(--tx2);font-size:var(--fs-sm);
max-width:520px;margin:0 auto 28px;line-height:1.7;
}
.ysearch-form{max-width:640px;margin:0 auto}
.ysearch-form--compact{max-width:none;margin:0 0 18px}
.ysearch-field{
position:relative;display:flex;gap:8px;align-items:stretch;
}
.ysearch-field svg{
position:absolute;left:14px;top:50%;transform:translateY(-50%);
width:18px;height:18px;stroke:var(--tx3);fill:none;stroke-width:2;
stroke-linecap:round;pointer-events:none;
}
.ysearch-field input{
flex:1;min-height:52px;
padding:12px 16px 12px 42px;
font-size:16px; /* <16px làm iOS tự phóng to trang */
font-family:var(--fb);color:var(--tx);
background:var(--w);
border:1.5px solid var(--bd);border-radius:var(--r);
outline:none;transition:border-color var(--tr);
}
.ysearch-field input:focus{border-color:var(--jade)}
.ysearch-go{flex-shrink:0;min-height:52px;padding-left:22px;padding-right:22px}
/* Chọn phạm vi — dùng radio thật để chạy được cả khi tắt JS */
.ysearch-scopes{
display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
margin-top:16px;border:none;padding:0;
}
.ysearch-form--compact .ysearch-scopes{justify-content:flex-start}
.ysearch-scopes legend{
width:100%;text-align:center;
font-size:var(--fs-xs);color:var(--tx3);
text-transform:uppercase;letter-spacing:1.2px;margin-bottom:10px;
}
.ysc{
display:inline-flex;align-items:center;min-height:44px;
padding:0 16px;border-radius:22px;
border:1.5px solid var(--bd);background:var(--w);
font-size:var(--fs-sm);color:var(--tx2);
cursor:pointer;transition:all var(--tr);text-decoration:none;
}
.ysc input{position:absolute;opacity:0;width:0;height:0}
.ysc:hover{border-color:var(--jade);color:var(--jade)}
.ysc.on,.ysc:has(input:checked){
background:var(--jade);border-color:var(--jade);color:#fff;font-weight:600;
}
.ysc:focus-within{outline:2px solid var(--jade);outline-offset:2px}
.ysearch-sugg{
display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;
max-width:640px;margin:22px auto 0;
font-size:var(--fs-sm);color:var(--tx3);
}
.ysearch-sugg a{
display:inline-flex;align-items:center;min-height:36px;
padding:0 12px;border-radius:18px;
background:rgba(26,92,72,.07);color:var(--jade);
text-decoration:none;transition:background var(--tr);
}
.ysearch-sugg a:hover{background:rgba(26,92,72,.14)}
.ysearch-brands{margin-top:20px}
.ysearch-brands-t{
font-size:var(--fs-xs);color:var(--tx3);
text-transform:uppercase;letter-spacing:1.2px;margin-bottom:10px;
}
.ysearch-empty{text-align:center;padding:60px 20px;color:var(--tx3)}
.ysearch-empty-ico{font-size:40px;margin-bottom:14px}
.ysearch-empty-t{font-size:var(--fs-base);color:var(--tx);margin-bottom:6px}
.ysearch-empty-s{font-size:var(--fs-sm);margin-bottom:22px}
/* ═══════════════════════════════════════════
17a. CHUẨN MOBILE-FIRST
Vùng chạm ≥44px (Apple HIG) và cỡ chữ ≥12px.
══════════════════════════════════════════ */
/* Eyebrow khối CTA cuối trang (trước để inline 11px) */
.cta-ey{
font-size:12px;font-weight:700;letter-spacing:2px;
text-transform:uppercase;color:rgba(200,136,48,.9);
margin-bottom:14px;
}
/* Logo: đủ cao để chạm thoải mái trên điện thoại */
.logo{min-height:44px}
/* Link tên sản phẩm: block để .pn tự khoá 2 dòng, vẫn đủ 44px vùng chạm.
(Bản trước dùng flex + căn giữa nên đè mất chiều cao 2 dòng của .pn.) */
.pi>a{display:block;min-height:44px;text-decoration:none}
@media(max-width:768px){
/* Không để chữ nào nhỏ hơn 12px trên màn hình nhỏ */
.s-ey{font-size:12px}
.mm-hrs,.pbr{font-size:12px}
/* Nút full-width dễ chạm hơn khi màn hình hẹp */
.s-ctas .btn{flex:1 1 auto;min-width:180px}
}
/* ═══════════════════════════════════════════
17b. TƯƠNG THÍCH PLUGIN
══════════════════════════════════════════ */
/* Lớp phủ/lightbox của plugin thường đóng bằng thuộc tính [hidden] nhưng lại
khai báo display qua class, khiến [hidden] mất tác dụng — lớp phủ trong
suốt vẫn chặn mọi click trên trang. Ép ẩn để trang luôn bấm được, kể cả
khi plugin cập nhật ghi đè CSS gốc. */
[hidden]{display:none !important}
/* ═══════════════════════════════════════════
18. PAGINATION
══════════════════════════════════════════ */
.yb-pagination{text-align:center;padding:32px 20px}
.yb-pagination ul{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:center}
.yb-pagination a,.yb-pagination span{
display:flex;align-items:center;justify-content:center;
min-width:36px;height:36px;padding:0 10px;
border-radius:var(--r);border:1px solid var(--bd);
font-size:var(--fs-sm);color:var(--tx2);transition:all var(--tr);
}
.yb-pagination .current,.yb-pagination a:hover{background:var(--jade);color:#fff;border-color:var(--jade)}
/* ═══════════════════════════════════════════
19. TAGS + FILTERS (archive/blog)
══════════════════════════════════════════ */
.ptag{display:inline-flex;align-items:center;min-height:44px;padding:5px 14px;border-radius:22px;border:1px solid var(--bd);font-size:var(--fs-sm);color:var(--tx2);cursor:pointer;background:transparent;font-family:var(--fb);transition:all var(--tr)}
.ptag:hover{border-color:var(--jade);color:var(--jade)}
.ptag.on{background:var(--jade);color:#fff;border-color:var(--jade)}
/* ═══════════════════════════════════════════
20. ANIMATIONS — Fade-up, reduced-motion safe
══════════════════════════════════════════ */
.yb-fade-up{opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .5s ease}
.yb-fade-up.in-view{opacity:1;transform:translateY(0)}
.yb-fade-up.delay-1{transition-delay:.1s}
.yb-fade-up.delay-2{transition-delay:.2s}
.yb-fade-up.delay-3{transition-delay:.3s}
@media(prefers-reduced-motion:reduce){
.yb-fade-up{opacity:1;transform:none;transition:none}
.slides-track{transition:none}
}
/* Dot loading animation */
.dts{display:inline-flex;gap:5px}
.dt{width:6px;height:6px;border-radius:50%;background:var(--jade);animation:da 1.3s ease-in-out infinite}
.dt:nth-child(2){animation-delay:.2s}.dt:nth-child(3){animation-delay:.4s}
@keyframes da{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
.lazy{text-align:center;padding:32px;color:var(--tx3);font-size:var(--fs-sm)}
/* Smooth spin */
@keyframes yb-spin{to{transform:rotate(360deg)}}
/* ═══════════════════════════════════════════
21. UTILITY HELPERS
══════════════════════════════════════════ */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}
.sr-only:focus{clip:auto;clip-path:none;width:auto;height:auto;white-space:normal;position:static}
.text-jade{color:var(--jade)}
.text-amber{color:var(--amb)}
.bg-s1{background:var(--s1)}
.screen-reader-text{position:absolute;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;word-wrap:normal}
/* WP alignment */
.alignleft{float:left;margin:0 1.5em 1em 0}
.alignright{float:right;margin:0 0 1em 1.5em}
.aligncenter{clear:both;display:block;margin-left:auto;margin-right:auto}
.alignwide{max-width:1200px}
.alignfull{max-width:100%;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.wp-block-image img{border-radius:var(--r)}
/* ═══════════════════════════════════════════
22. FALLBACK — index, 404, search
══════════════════════════════════════════ */
.yb-fallback-article{padding:40px 0}
.yb-fallback-article .entry-title,.yb-no-results h1{font-family:var(--fh);font-size:clamp(22px,4vw,32px);color:var(--j2);margin-bottom:16px}
.yb-fallback-article .entry-content p,.yb-no-results p{font-size:var(--fs-base);color:var(--tx2);line-height:1.8;margin-bottom:14px}
.yb-search-form .ksearch{position:relative;max-width:480px;margin:0 auto}
.yb-search-form .ksearch svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--tx3);fill:none;stroke-width:2;pointer-events:none}
.yb-search-form .fi{padding-left:36px}
/* ═══════════════════════════════════════════
23. RESPONSIVE — 768px
══════════════════════════════════════════ */
@media(min-width:768px){
.dnav{display:flex}
.hbg{display:none}
.wyg{grid-template-columns:repeat(3,1fr)}
.wyc{flex-direction:column;gap:12px}
.ftg{grid-template-columns:1.6fr 1fr 1fr}
.pgrid{grid-template-columns:repeat(3,1fr);gap:18px}
.bgrid{grid-template-columns:repeat(2,1fr)}
.ldf{flex-direction:row}
}
/* ═══════════════════════════════════════════
24. RESPONSIVE — 1024px
══════════════════════════════════════════ */
@media(min-width:1024px){
.pgrid{grid-template-columns:repeat(4,1fr)}
.bgrid{grid-template-columns:repeat(3,1fr)}
}
/* ═══════════════════════════════════════════
25. iOS / MOBILE FIXES
══════════════════════════════════════════ */
/* Momentum scroll for overflow containers */
.brdi,.pd-thumbs{-webkit-overflow-scrolling:touch}
/* Prevent horizontal bleed */
.slider,.brds{overflow-x:hidden}
/* iOS input zoom prevention: font-size >= 16px already set on .fi */
/* Safe-area padding for notched devices */
.ft{padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}
/* Ba nút nổi phải xếp chồng, không đè nhau: .stt cao 40px nằm dưới cùng,
.zalo-float trên nó (22 + 40 + 16 = 78), nút giỏ trên cùng (78 + 48 + 12). */
.stt{bottom:calc(22px + env(safe-area-inset-bottom,0px))}
.zalo-float{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
.yb-fab-cart{bottom:calc(138px + env(safe-area-inset-bottom,0px))}
.toast{bottom:calc(70px + env(safe-area-inset-bottom,0px))}
/* Android ripple */
.btn:active,.pc:active{opacity:.85}
/* High-DPI sharpness */
img{image-rendering:-webkit-optimize-contrast}
/* Range input iOS fix */
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none!important;width:26px!important;height:26px!important}