/* Hoa Lan Tác Phẩm — giao diện storefront.
 * Phần [2]–[4] được chuyển NGUYÊN từ wireframe.html (đổi tên .btn -> .hbtn để không đụng Bootstrap; các rule ".m ..." của
 * bản mobile được đổi thành media query <768px và giữ nguyên độ ưu tiên selector). Phần [5] là bổ sung cho website thật.
 * Bootstrap 5 được nạp trước file này (dùng cho reboot, Modal popup, Offcanvas bộ lọc mobile và trang quản trị).
 */

/* [1] Điều chỉnh reboot của Bootstrap để khớp wireframe */
:root{--bs-body-line-height:normal}
body{line-height:normal}
a,a:hover{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:700;line-height:normal;color:inherit}
p{margin:0}
button,input,textarea{font-family:inherit}
img{max-width:100%}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--pk);outline-offset:2px}

/* [2] CSS gốc của wireframe (desktop) */
:root{box-sizing:border-box;--pk:#e8547a;--ln:#ece8e3;--mut:#87697a;--gn:#2e8b57;--tx:#6a3350}
html{background:#fff}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;background:#fff;color:var(--tx);-webkit-font-smoothing:antialiased}
.site{background:#fff;color:var(--tx);font-size:14px}
.site small{color:var(--mut);font-size:12px}
s{color:var(--mut);font-weight:400;font-size:.8em}
.site svg{flex:none}
[data-go]{cursor:pointer}
.ann{background:#eaf7ee;color:var(--gn);font-weight:500;font-size:12.5px;display:flex;gap:8px;align-items:center;justify-content:center;padding:8px 12px;text-align:center}
.hd{background:#fff;border-bottom:1px solid var(--ln)}
.hrow{display:flex;align-items:center;gap:24px;padding:14px 40px}
.burger{display:none}
.logo{display:flex;gap:10px;align-items:center}
.lg{width:48px;height:48px;border-radius:50%;background-color:#fff;border:1px solid #f2d9e1;flex:none}
.lgo{background-image:url(../img/lgo.jpg);background-size:92%;background-position:center;background-repeat:no-repeat}
.flg{width:88px;height:88px;border-radius:50%;background-color:#fff;border:1px solid #f2ccd7;margin-bottom:12px}
.logo b{display:block;font-size:18px;letter-spacing:.02em;line-height:1.1}
.logo small{font-size:10px;font-weight:600;letter-spacing:.18em}
.sr{flex:1;display:flex;gap:10px;align-items:center;height:44px;border-radius:22px;background:#f0edea;border:1px solid #e6e2da;padding:0 16px;color:var(--mut)}
.mn{display:flex;gap:28px;padding:0 40px;border-top:1px solid var(--ln)}
.mn a{padding:12px 0;font-size:13.5px;font-weight:500;cursor:pointer}
.mn a:last-child{margin-left:auto;color:var(--pk)}
.im{background-size:cover;background-position:center;background-color:#ffeef1}
.i0{background-image:url(../img/i0.jpg)}
.i1{background-image:url(../img/i1.jpg)}
.i2{background-image:url(../img/i2.jpg)}
.i3{background-image:url(../img/i3.jpg)}
.i4{background-image:url(../img/i4.jpg)}
.hbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--pk);color:#fff;font-weight:700;font-size:14px;padding:12px 24px;border-radius:10px}
.hbtn.out{background:#fff;border:1.5px solid var(--pk);color:var(--pk)}
.hero{margin:28px 40px 0;border-radius:24px;background:#fff0f3;display:flex;overflow:hidden;height:340px}
.hero .im{flex:1}
.ht{flex:1;padding:44px 48px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px}
.ht em{font-style:normal;font-size:12px;font-weight:600;color:var(--pk);background:#ffe3ea;padding:4px 12px;border-radius:12px;animation:glow 3s ease-out infinite}
.ht h2{margin:0;font-size:38px;line-height:1.12}
.ht p{margin:0;color:var(--mut)}
.tabs3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:28px 40px 0}
.tab3{background:#fff;border:1.5px solid var(--ln);border-radius:20px;padding:18px 12px 16px;display:flex;flex-direction:column;align-items:center;gap:10px}
.q0{background-image:url(../img/q0.jpg)}
.q1{background-image:url(../img/q1.jpg)}
.q2{background-image:url(../img/q2.jpg)}
.q3{background-image:url(../img/q3.jpg)}
.q4{background-image:url(../img/q4.jpg)}
.q5{background-image:url(../img/q5.jpg)}
.q6{background-image:url(../img/q6.jpg)}
.tab3 .pic .ph2{height:100%;aspect-ratio:1;border-radius:14px}
.tab3{cursor:pointer}
.tab3.on{border-color:var(--pk);background:#fff8fa}
.im.sv{position:relative}
.im.sv svg{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px)}
.tab3 .pic{position:relative;height:190px;width:100%;display:flex;align-items:center;justify-content:center}
/* Quầng màu mờ phía sau minh họa — mỗi danh mục một sắc riêng để dễ phân biệt và bắt mắt hơn */
.tab3 .pic::before{content:"";position:absolute;inset:6% 10%;border-radius:50%;background:radial-gradient(closest-side,var(--tabglow,#f9d2de) 0%,transparent 78%);opacity:.9;z-index:0}
.tab3 .pic img,.tab3 .pic .im{position:relative;z-index:1}
.tabs3 .tab3:nth-child(1){--tabglow:#ffd3e0}
.tabs3 .tab3:nth-child(2){--tabglow:#ffc9da}
.tabs3 .tab3:nth-child(3){--tabglow:#ffdcae}
.tabs3 .tab3:nth-child(4){--tabglow:#c9e8d6}
.tabs3 .tab3:nth-child(5){--tabglow:#cfe0ff}
.tab3.on .pic::before{opacity:1}
.tab3 .pic svg{height:100%;width:auto}
.tab3 b{font-size:16px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.tab3go{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:var(--pk);opacity:.75}
.tab3go svg{rotate:90deg}
.tab3:hover .tab3go,.tab3.on .tab3go{opacity:1}
.tab3.on .tab3go{color:var(--pkd,#c93a62)}
.trio{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:20px 40px 0}
.tc{display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:18px}
.tc .ti{position:relative;flex:none;border-radius:12px;background-position:center 40%}
/* Huy hiệu icon nổi ở góc ảnh — lặp lại icon của tiêu đề để bắt mắt và dễ nhận diện từ xa */
.tc .tib{position:absolute;top:10px;left:10px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 4px 12px rgba(60,30,20,.22);color:var(--ac)}
.tc .tib svg{width:17px;height:17px}
.tc.g .tib{color:#1f5a34}
.tc.y .tib{color:#a5760a}
.tc.v .tib{color:#4a3a8a;width:28px;height:28px;top:6px;left:6px}
.tc.v .tib svg{width:14px;height:14px}
.tc:not(.v) .ti{flex:1;height:auto;min-height:84px}
.tc .tx,.tc .fm{padding:0 6px 4px}
.tc .tt{display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:700}
.tc small{display:block;margin-top:2px;font-size:12.5px}
.tc.g{background:#dfeadf;color:#1f5a34}
.tc.g small{color:#46614f}
.tc.y{background:#ffe9b3;color:#7a4b00}
.tc.y small{color:#6f5522}
.tc.v{background:#e8e0f8;color:#4a3a8a;flex-direction:row;gap:12px}
.tc.v small{color:#5d5188}
.tc.v .ti{width:112px;height:auto;min-height:120px}
.tc.v .fm{flex:1;display:flex;flex-direction:column;gap:8px;padding:4px 4px 4px 0}
.fr{display:flex;gap:10px;align-items:stretch}
.fr textarea{flex:1;min-width:0;resize:none;border:1.5px solid #e4d9f7;border-radius:14px;background:#fff;padding:12px 14px;font:400 13px/1.55 Inter,system-ui,sans-serif;color:var(--tx);box-shadow:0 2px 10px rgba(122,91,196,.08);transition:border-color .15s,box-shadow .15s}
.fr textarea::placeholder{color:#9d90c9}
.fr textarea:focus{outline:none;border-color:#7a5bc4;box-shadow:0 0 0 3px rgba(122,91,196,.16)}
.hbtn.vb{width:100%;height:46px;flex-direction:row;font-size:14px;padding:0 16px;gap:8px;text-align:center;background:#7a5bc4;border-radius:14px;box-shadow:0 4px 12px rgba(122,91,196,.3);animation:none;transition:opacity .15s,box-shadow .15s}
.hbtn.vb:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.fc{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.fc :is(button,span){padding:5px 12px;border-radius:14px;background:#fff;border:1px solid #e4d9f7;font-size:11.5px;color:#5b3fac;cursor:pointer;transition:background .15s,border-color .15s}
.fc :is(button,span):hover{background:#f4effc;border-color:#c9b8ec}
.usp{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:22px 40px 0}
.usp-top{padding:16px 40px 4px}
.usp-top .up{background:#fff9fb;border-color:#f6dbe2}
.up{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--ln);border-radius:14px;padding:14px 16px}
.ui{flex:none;width:40px;height:40px;border-radius:50%;background:#fff0f3;color:var(--pk);display:flex;align-items:center;justify-content:center}
.up b{display:block;font-size:12.5px;font-weight:700;line-height:1.3}
.up small{font-size:11px;color:var(--mut)}
.giftcta{display:flex;gap:20px;align-items:center;background:#e8e0f8;color:#4a3a8a;border-radius:20px;padding:18px}
.giftcta .gi{flex:none;width:220px;align-self:stretch;border-radius:14px;background-position:center 40%}
.giftcta .gc{flex:1;display:flex;flex-direction:column;gap:10px}
.giftcta .tt{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700}
.giftcta small{color:#5d5188}
.flash{margin:0 40px;background:linear-gradient(135deg,#fff1ea,#ffe2d3);border:1px solid #ffd0b0;border-radius:20px;padding:20px}
.fsh{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:16px}
.fst{display:flex;align-items:center;gap:10px;color:#e8663a}
.fst b{display:block;font-size:16px;color:var(--tx)}
.fst small{display:block;color:var(--mut);font-size:12px;margin-top:1px}
.cd{display:flex;align-items:center;gap:6px}
.cd>span{color:#e8663a;font-weight:700}
.cdb{background:#3a1c10;color:#fff;border-radius:10px;padding:6px 11px;min-width:38px;text-align:center}
.cdb b{display:block;font-size:16px;font-weight:700;line-height:1.1}
.cdb small{display:block;font-size:9px;color:#f3c0a3;margin-top:2px;font-weight:500;letter-spacing:.02em}
.sec{padding:32px 40px 0}
.trio + .sh{padding:32px 40px 0;margin-bottom:14px}
.trio + .sh + .tabs3{padding-top:0}
.sh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.sh h4{margin:0;font-size:20px}
.sh a{color:var(--pk);font-weight:600;font-size:13px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips :is(a,span){padding:8px 16px;border-radius:20px;background:#fff;border:1px solid var(--ln);font-size:13px}
.chips .on{background:var(--pk);border-color:var(--pk);color:#fff;font-weight:600}
.chips.srt :is(a,span){cursor:pointer;transition:border-color .15s,color .15s}
.chips.srt :is(a,span):not(.on):not(.lbl):hover{border-color:var(--pk);color:var(--pk)}
.chips.srt :is(a,span).lbl{border:0;background:none;padding:8px 4px 8px 0;color:var(--mut);cursor:default}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
/* Lướt ngang (Bán chạy / Sản phẩm hot / Giảm giá trong ngày ở trang chủ): mỗi thẻ một cỡ cố định, cuộn ngang
   mượt tay trên di động (chạm kéo thật), có nút mũi tên cho máy tính — mỗi lần bấm trượt đúng 1 thẻ cho dễ
   nhìn theo từng sản phẩm, thay vì nhảy hẳn cả cụm gây khó theo dõi. */
.slide-wrap{position:relative}
.grid.grid-slide{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.grid.grid-slide::-webkit-scrollbar{display:none}
.grid.grid-slide>.pc{flex:0 0 auto;width:220px;scroll-snap-align:start}
.sld-nav{display:flex;align-items:center;justify-content:center;position:absolute;top:50%;translate:0 -50%;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--tx);border:1px solid var(--ln);box-shadow:0 4px 14px rgba(60,20,30,.16);cursor:pointer;z-index:2}
.sld-nav.prev{left:-18px}
.sld-nav.next{right:-18px}
.sld-nav:hover{background:var(--pk);color:#fff;border-color:var(--pk)}
.sld-nav[hidden]{display:none}
.flash .sld-nav{box-shadow:0 4px 14px rgba(60,20,30,.22)}
.g3{grid-template-columns:repeat(3,1fr)}
.pc{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 1px 6px rgba(200,90,125,.13)}
.pw{position:relative}
.pw .im{aspect-ratio:1}
.hb{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--pk);display:flex;align-items:center;justify-content:center}
.bg{position:absolute;top:10px;left:10px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:10px;background:#fff}
.bg.or{color:#e8663a}
.bg.gr{color:var(--gn)}
.pi{padding:12px 14px 14px}
.pn{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp{color:var(--pk);font-weight:700;font-size:16px;margin:4px 0}
.ps{font-size:12px;color:var(--mut);display:flex;flex-wrap:wrap;gap:4px 12px}
.ps span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.ps svg{color:#e8a0b5}
.ps .sold{color:var(--gn);font-weight:600}
.ps .sold svg{color:var(--gn)}
.ps.big{font-size:13.5px;gap:8px 20px;padding:12px 14px;background:#fff;border:1px solid var(--ln);border-radius:12px}
.bc{padding:20px 40px;font-size:12.5px;color:var(--mut)}
.wrap{padding:0 40px}
.pt{margin:0 0 16px;font-size:32px}
.cl{display:grid;grid-template-columns:230px 1fr;gap:28px;padding:24px 40px 0}
.fl{background:#fff;border-radius:14px;padding:6px 18px 12px;border:1px solid var(--ln);align-self:start}
.fl h5{margin:16px 0 4px;font-size:14px}
.ck{display:flex;gap:10px;align-items:center;margin:9px 0;font-size:13px}
.ck i{width:16px;height:16px;border:1.5px solid #cfc8cc;border-radius:4px}
.ck.on i{background:var(--pk);border-color:var(--pk)}
.sb{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.sb small{flex:1}
.pill{padding:8px 14px;border-radius:10px;background:#fff;border:1px solid var(--ln);font-size:13px;display:flex;gap:6px;align-items:center}
.pill.fb{border-color:#f3c7d4;color:var(--pk);font-weight:600}
.fb{display:none}
.mean{padding:48px 40px 0;display:flex;flex-direction:column;gap:40px}
.mr{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.mr.rev .mt{order:2}
.mt{padding:0 24px;text-align:center}
.mt em{display:block;font:500 28px/1.2 'Dancing Script',cursive;color:var(--pk)}
.mt h3{margin:8px 0 18px;font:500 22px/1.35 Montserrat,Inter,sans-serif;text-transform:uppercase;letter-spacing:.02em}
.mt p{margin:0;font:400 14px/1.8 Montserrat,Inter,sans-serif;text-align:justify;color:var(--tx)}
.mi{aspect-ratio:4/3;border-radius:10px;position:relative;overflow:hidden;transition:opacity 1s var(--ease),translate 1s var(--ease),scale 1s var(--ease),rotate 1s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.mi::before{content:"";position:absolute;inset:-2%;background:inherit;background-size:cover;background-position:inherit;transition:transform .9s var(--ease)}
.mi::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);translate:-140% 0;pointer-events:none}
.mi.in::after{animation:sweep3 1.15s ease-out .35s 1}
@keyframes sweep3{to{translate:140% 0}}
.mr:hover .mi::before{transform:scale(1.08)}
.soc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sc{background:#fff;border:1px solid #f0e2e6;border-radius:16px;padding:12px;height:320px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.av{display:block;width:44px;height:44px;border-radius:50%;background-color:#fff;border:1px solid #f2d9e1;flex:none}
.av.s{width:34px;height:34px}
.fh{display:flex;align-items:center;gap:10px}
.fh b{display:block;font-size:15px}
.fh svg{margin-left:auto}
.fa{display:flex;justify-content:space-between}
.fa span{padding:6px 12px;border-radius:8px;background:#f6eef1;font-size:12.5px;font-weight:600}
.post{flex:1;min-height:0;overflow:hidden;border:1px solid #f0e2e6;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px}
.post .pt2{display:flex;gap:8px;align-items:center}
.post .pt2 b{display:block;font-size:13px}
.post p{margin:0;font-size:13px}
.post .tags{color:#1877f2;font-size:12.5px}
.pimg{flex:1;min-height:60px;border-radius:8px}
.vid{position:relative;flex:1;border-radius:12px;overflow:hidden;color:#fff}
.vid::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(106,51,80,.72),rgba(106,51,80,0) 42%,rgba(106,51,80,0) 62%,rgba(106,51,80,.72))}
.vt,.vbar{position:absolute;left:12px;right:12px}
.vt{top:12px;display:flex;gap:10px;align-items:center}
.vt b{display:block;font-size:16px}
.vid .vt small{color:#fff;opacity:.92}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:44px;border-radius:12px;background:#e53935;display:flex;align-items:center;justify-content:center}
.vbar{bottom:10px;font-size:13px;text-align:right}
.map{position:relative;flex:1;border-radius:12px;overflow:hidden}
.map>svg{position:absolute;inset:0;width:100%;height:100%}
.mo{position:absolute;top:10px;left:10px;background:#fff;padding:8px 12px;border-radius:8px;font-size:13px;font-weight:600;color:#1a73e8;display:flex;gap:6px;align-items:center;box-shadow:0 1px 4px rgba(190,110,135,.3)}
.ma{position:absolute;left:10px;right:10px;bottom:10px;background:#fff;border-radius:10px;padding:8px 10px;font-size:12px;color:var(--tx);box-shadow:0 1px 4px rgba(190,110,135,.25)}
.pg{display:flex;gap:8px;justify-content:center;margin-top:28px}
.pg :is(a,span){width:36px;height:36px;border-radius:10px;background:#fff;border:1px solid var(--ln);display:flex;align-items:center;justify-content:center}
.pg .on{background:var(--pk);color:#fff;border-color:var(--pk)}
.dt{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;padding:0 40px}
.gl{display:flex;gap:12px}
.th{display:flex;flex-direction:column;gap:10px}
.th .im{width:76px;height:76px;border-radius:10px}
.th .on{outline:2px solid var(--pk)}
.gm{flex:1}
.gm .im{aspect-ratio:1;border-radius:16px}
.inf{display:flex;flex-direction:column;gap:14px}
.inf h1{margin:0;font-size:28px;line-height:1.2}
.inf h5{margin:0;font-size:14px}
.tg{display:flex;gap:8px}
.tg span{font-size:12px;font-weight:700;padding:4px 10px;border-radius:10px;display:flex;gap:6px;align-items:center}
.tg .gr{background:#eaf7ee;color:var(--gn)}
.tg .or{background:#fff0e8;color:#e8663a}
.pr{font-size:28px;font-weight:700;color:var(--pk)}
.sz{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sz div,.sz button{padding:10px;border:1.5px solid var(--ln);border-radius:12px;background:#fff;text-align:center;font-size:12px;color:var(--mut)}
.sz b{display:block;font-size:14px;color:var(--tx)}
.sz .on{border-color:var(--pk);background:#fff0f3;color:var(--pk);font-weight:600}
.ta{height:84px;border:1.5px solid var(--ln);border-radius:12px;background:#fff;padding:12px;color:var(--mut);font-size:13px}
.box{display:flex;gap:12px;align-items:center;padding:14px;border-radius:14px;background:#fff;border:1px solid var(--ln)}
.box b{display:block}
.box>svg{color:var(--pk)}
.cta{display:flex;gap:12px}
.cta .hbtn{flex:1;height:50px;font-size:15px}
.cta.st{display:none}
.ds{margin:0;color:var(--tx);font-size:14px;line-height:1.65}
.ds p{margin:0 0 10px}
.ds p:last-child{margin-bottom:0}
.ds ul,.ds ol{margin:0 0 10px;padding-left:22px}
.ds h3{margin:0 0 8px;font-size:18px;font-weight:700;color:var(--tx)}
.ds h4{margin:0 0 8px;font-size:15.5px;font-weight:700;color:var(--tx)}
.ds.tip{color:var(--mut);font-size:13px;margin-top:-6px}
.ft{margin-top:44px;background:#fbe3ea;border-top:1px solid #f2ccd7;display:grid;grid-template-columns:1.5fr 1.5fr 1fr 1fr;line-height:1.55;gap:24px;padding:36px 40px;font-size:13px}
.ft b{display:block;margin-bottom:10px;color:#c93a62}
.ft a,.ft p{display:block;color:var(--tx);margin:6px 0}
.mn a .dot{display:inline-block;background:#e53935;color:#fff;font-size:10px;font-weight:700;padding:1px 7px;border-radius:8px;margin-left:6px;vertical-align:1px}
#ev{scroll-margin-top:90px}
.evs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ev{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 1px 6px rgba(200,90,125,.13);display:flex;flex-direction:column;transition:opacity .85s var(--ease),translate .85s var(--ease),scale .85s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);transition-delay:calc(var(--i,0) * 90ms),calc(var(--i,0) * 90ms),calc(var(--i,0) * 90ms),0s,0s}
.ev:hover{box-shadow:0 12px 28px rgba(200,90,125,.24);transform:translateY(-4px)}
.ev:hover .pw .im{transform:scale(1.07)}
.ev .pw .im{transition:transform .6s var(--ease)}
.ev .pw .im{aspect-ratio:16/10}
.ev .eb{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px}
.ev h5{margin:0;font-size:16px;line-height:1.3}
.ev p{margin:0;color:var(--mut);font-size:13px;line-height:1.55}
.dd{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--mut)}
.mor{color:var(--pk);font-weight:600;font-size:13px;margin-top:2px;cursor:pointer}
.sts{position:absolute;top:10px;left:10px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:10px;background:#fff}
.sts.on{color:var(--gn)}
.sts.soon{color:#b7791f}
.pop{position:relative;width:660px;max-width:100%;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 20px 60px rgba(60,20,40,.4)}
.pop .im{min-height:360px}
.pb{padding:28px 26px 22px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.pb h3{margin:0;font-size:24px;line-height:1.2}
.pb p{margin:0;color:var(--mut);line-height:1.6;font-size:14px}
.pb .dd{font-size:13px;color:var(--gn);font-weight:600}
.pb .ck{margin:2px 0 0;font-size:12.5px;color:var(--mut)}
.xb{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:50%;background:#fff;color:#3a1c2c;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 8px rgba(0,0,0,.25)}
.xb svg{opacity:1}
.xb:hover{background:var(--pk);color:#fff}
.pd{display:flex;gap:6px;align-items:center}
.pd i{width:8px;height:8px;border-radius:50%;background:#e6cdd6;cursor:pointer}
.pd i.on{width:22px;border-radius:5px;background:var(--pk)}
.fxs{position:relative;overflow:clip;background:var(--pb)}
.fxs .ann,.fxs .hd,.fxs .ctb,.fxs .hero,.fxs .grid{position:relative;z-index:1}
.t-snow{--pb:#e6f3ea;--ac:#c0392b;--hb:rgba(255,255,255,.72);--ab:linear-gradient(45deg,#c0392b 25%,#a93226 25% 50%,#c0392b 50% 75%,#a93226 75%);--gr:radial-gradient(ellipse 80% 14% at 50% 102%,#fff 62%,transparent 64%),linear-gradient(#cde7d6,#eaf5ee 50%,#fff);--pat:radial-gradient(circle,#fff 2px,transparent 3px) 0 0/60px 60px,radial-gradient(circle,rgba(255,255,255,.7) 1.5px,transparent 2.5px) 30px 30px/60px 60px}
.t-tet{--pb:#ffe9dc;--ac:#d62828;--hb:rgba(255,246,228,.82);--ab:linear-gradient(90deg,#b71c1c,#d62828 50%,#b71c1c);--gr:linear-gradient(#ffd6cf,#ffe9dc 40%,#fff3dc);--pat:radial-gradient(circle,rgba(245,196,0,.6) 2px,transparent 3px) 0 0/60px 60px,radial-gradient(circle,rgba(214,40,40,.16) 6px,transparent 7px) 30px 30px/60px 60px}
.t-heart{--pb:#ffe6ee;--ac:#e8547a;--hb:rgba(255,255,255,.7);--ab:linear-gradient(90deg,#e8547a,#c93a62 50%,#e8547a);--gr:linear-gradient(#ffd0de,#ffe6ee 45%,#fff2f6);--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 42C8 26 18 10 30 22 42 10 52 26 30 42z' fill='%23e8547a' fill-opacity='.2'/%3E%3C/svg%3E")}
.t-petal{--pb:#fde3ec;--ac:#e8547a;--hb:rgba(255,255,255,.7);--ab:linear-gradient(90deg,#f28aa8,#e8547a 50%,#f28aa8);--gr:linear-gradient(#fbd3e0,#fde3ec 45%,#fff3f7);--pat:radial-gradient(circle,rgba(255,255,255,.75) 10px,transparent 11px) 0 0/60px 60px,radial-gradient(circle,rgba(232,84,122,.14) 14px,transparent 15px) 30px 30px/60px 60px}
.t-tea{--pb:#fff4cf;--ac:#1e7a8c;--hb:rgba(255,255,255,.75);--ab:linear-gradient(90deg,#1e5f8a,#1e7a8c 50%,#1e5f8a);--gr:linear-gradient(#fff0b8,#fff7d9 45%,#eaf6f7);--pat:radial-gradient(circle,rgba(245,184,0,.5) 2px,transparent 3px) 0 0/60px 60px,repeating-linear-gradient(0deg,rgba(30,122,140,.1) 0 1px,transparent 1px 30px)}
.fxbg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--gr)}
.fxbg::before{display:none}
.fxa{position:relative;overflow:hidden;height:40px;color:#fff;font-weight:600;background:var(--ab);background-size:200% 100%;animation:flow 8s linear infinite}
.t-snow .fxa{background-size:40px 40px;animation:stripe 2s linear infinite}
.t-tet .fxa{border-bottom:2px solid #f5c400;color:#ffe082}
.t-tea .fxa{color:#ffe9a0}
.fxa::after,.ctb span:first-child::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);transform:translateX(-100%);animation:sweep 3.6s ease-in-out infinite}
.fxa span{position:relative;z-index:1;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.lt{position:absolute;top:40px;left:0;right:0;z-index:5;display:flex;justify-content:space-around;pointer-events:none;height:22px}
.lt i{font-style:normal;font-size:14px;line-height:1;animation:tw 1.8s ease-in-out infinite}
.lt i:nth-child(3n+1){animation-delay:.3s}
.lt i:nth-child(3n+2){animation-delay:.9s}
.t-snow .lt i{width:9px;height:12px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;color:#ff4d4d}
.t-snow .lt i:nth-child(4n+2){color:#f5c400}
.t-snow .lt i:nth-child(4n+3){color:#3ddc84}
.t-snow .lt i:nth-child(4n){color:#4da3ff}
.t-tet .lt i::before{content:"✿";color:#f5c400}
.t-heart .lt i::before{content:"♥";color:#e8547a}
.t-petal .lt i::before{content:"✿";color:#f28aa8}
.t-tea .lt i::before{content:"✦";color:#f5b800}
.crn{position:absolute;top:52px;left:14px;z-index:5;pointer-events:none;transform-origin:50% 0;animation:swing 3.2s ease-in-out infinite alternate}
.crn.r{left:auto;right:14px;animation-delay:-1.6s}
/* Trang trí lớn ở hai lề trống (chỉ Tết/Giáng sinh có, xem Ornament::big) — chỉ hiện khi màn hình đủ rộng để không đè lên nội dung chính */
.crn-big{display:none}
@media (min-width:1560px){
  .crn-big{display:block;position:fixed;top:50%;left:26px;translate:0 -46%;width:150px;z-index:1;pointer-events:none;filter:drop-shadow(0 10px 22px rgba(60,20,20,.18))}
  .crn-big.r{left:auto;right:26px}
  .crn-big svg{display:block;width:100%;height:auto}
}
.t-heart .crn{animation:beat 1.3s ease-in-out infinite}
.ctb{display:flex;gap:10px;padding:14px 40px 0;justify-content:center}
.ctb span{position:relative;overflow:hidden;flex:1;max-width:220px;text-align:center;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.85);border:1.5px solid var(--ln);font-weight:700;font-size:13px}
.ctb span:first-child{background:var(--ac);border-color:var(--ac);color:#fff}
.ctb span:first-child::after{animation-delay:1s}
.fxs .hd{background:rgba(255,255,255,.78)}
.fxs .hero{background:var(--hb)}
.fxs .hbtn{background:var(--ac);animation:pls 2.2s ease-in-out infinite}
.fxs .ht em{color:var(--ac);background:rgba(255,255,255,.85)}

/* [3] keyframes và @media của wireframe */
@keyframes drift{to{transform:translateY(60px)}}
@keyframes sweep{to{transform:translateX(100%)}}
@keyframes flow{to{background-position:-200% 0}}
@keyframes stripe{to{background-position:40px 0}}
@keyframes tw{50%{opacity:.25;transform:scale(.7)}}
@keyframes swing{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@keyframes beat{0%,40%,100%{transform:scale(1)}20%{transform:scale(1.14)}30%{transform:scale(1.04)}}
@keyframes pls{50%{transform:scale(1.05);box-shadow:0 6px 18px rgba(0,0,0,.2)}}
@media(prefers-reduced-motion:reduce){.fxbg::before,.fxa,.fxa::after,.lt i,.crn,.fxs .btn,.ctb span::after{animation:none}}

/* [4] Bản mobile của wireframe (<768px) */
@media (max-width:767.98px){
:root .usp{grid-template-columns:1fr 1fr;gap:10px;padding:16px 16px 0}
.usp-top{padding:12px 16px 2px}
:root .up{padding:10px 12px;gap:8px}
:root .ui{width:34px;height:34px}
:root .giftcta{flex-direction:column;padding:14px}
:root .giftcta .gi{width:100%;height:130px}
:root .flash{margin:0 16px;padding:14px}
:root .fsh{gap:10px}
:root .cdb{padding:5px 8px;min-width:32px}
:root .cdb b{font-size:14px}
:root .chips.srt{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
:root .chips.srt::-webkit-scrollbar{display:none}
:root .chips.srt :is(a,span){flex:none;white-space:nowrap}
:root .hrow{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 16px}
:root .sr{width:100%;height:42px}
:root .hero{margin:16px 16px 0;height:auto;flex-direction:column-reverse;border-radius:20px}
:root .hero .im{flex:none;height:170px}
:root .ht{padding:18px}
:root .ht h2{font-size:24px}
:root .tabs3{gap:8px;padding:20px 16px 0}
:root .tab3{padding:12px 4px 10px;border-radius:14px;gap:6px}
:root .tab3 .pic{height:100px}
:root .tab3 b{font-size:11px}
.tab3go{font-size:10px}
:root .trio{grid-template-columns:1fr 1fr;gap:10px;padding:16px 16px 0}
:root .tc .ti{flex:none;height:84px}
:root .tc .tt{font-size:14.5px}
:root .tc small{font-size:12.5px}
:root .sec{padding:26px 16px 0}
:root .trio + .sh{padding:26px 16px 0}
:root .grid,:root .g3{grid-template-columns:1fr 1fr;gap:12px}
:root .grid.grid-slide>.pc{width:158px}
:root .sld-nav{width:34px;height:34px}
:root .sld-nav.prev{left:-10px}
:root .sld-nav.next{right:-10px}
:root .bc{padding:14px 16px}
:root .wrap{padding:0 16px}
:root .pt{font-size:24px}
:root .cl{grid-template-columns:1fr;padding:18px 16px 0}
:root .fl{display:none}
:root .fb{display:flex}
:root .dt{grid-template-columns:1fr;gap:16px;padding:0}
:root .gl{flex-direction:column-reverse;gap:10px}
:root .th{flex-direction:row;padding:0 16px}
:root .th .im{width:64px;height:64px}
:root .gm .im{border-radius:0}
:root .inf{padding:0 16px}
:root .inf h1{font-size:22px}
:root .cta.in{display:none}
:root .cta.st{display:flex;position:sticky;bottom:0;z-index:5;background:#fff;border-top:1px solid var(--ln);padding:10px 16px}
:root .mean{padding:32px 16px 0;gap:28px}
:root .mr{grid-template-columns:1fr;gap:16px}
:root .mr .mt{order:2}
:root .mt{padding:0}
:root .mt em{font-size:24px}
:root .mt h3{font-size:17px;margin-bottom:12px}
:root .mt p{font-size:13.5px}
:root .soc{grid-template-columns:1fr}
:root .sc{height:300px}
:root .ft{grid-template-columns:1fr 1fr;padding:28px 16px}
:root .ft>div:nth-child(-n+2){grid-column:1/-1}
:root .evs{grid-template-columns:1fr;gap:14px}
:root .pop{width:100%}
:root .pop-slide{grid-template-columns:1fr}
:root .pop .im{min-height:0;height:140px}
:root .pb{padding:16px 18px}
:root .pb h3{font-size:19px}
:root .ctb{padding:12px 12px 0;gap:6px}
:root .ctb span{font-size:11px;padding:8px 4px}
:root .crn svg{width:38px;height:auto}
}

/* [5] Bổ sung cho website thật */
.page{min-height:100vh;display:flex;flex-direction:column}
.main{flex:1 0 auto;width:100%;max-width:1200px;margin:0 auto}
.hrow{padding:14px max(40px,calc(50% - 560px))}
.ft{padding:36px max(40px,calc(50% - 560px))}
.hd,.ann{width:100%}
.sr input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--tx);font-size:14px;padding:0}
.sr input::placeholder{color:var(--mut);opacity:1}
.sr:focus-within{border-color:var(--pk);background:#fff}
.sr svg{color:var(--mut)}
img.im{display:block;width:100%;height:auto;object-fit:cover}
button.im{border:0;padding:0;cursor:pointer}
.pc{display:block}
.hero .im{min-height:0}
.tab3 .pic img{height:100%;width:auto}
.map>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.map>iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mapc .mf{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--tx)}
.mapc .mf span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapc .mf a{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-weight:600;color:#1a73e8;text-decoration:none}
.tab3:hover{border-color:var(--pk);box-shadow:0 10px 26px rgba(232,84,122,.16);transform:translateY(-2px)}
.pc{transition:box-shadow .15s,transform .15s}.pc:hover{box-shadow:0 6px 18px rgba(200,90,125,.22);transform:translateY(-2px)}
.chips a:not(.on):hover{border-color:var(--pk);color:var(--pk)}
button.hbtn{border:0;cursor:pointer}
.hbtn.out{border:1.5px solid var(--pk)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.giftcta .gin{border:1.5px solid #e4d9f7;border-radius:14px;background:#fff;padding:11px 14px;font:400 13px/1.55 Inter,system-ui,sans-serif;color:var(--tx);box-shadow:0 2px 10px rgba(122,91,196,.08);width:100%}
.giftcta .gin::placeholder{color:#9d90c9}
.giftcta .gin:focus{outline:none;border-color:#7a5bc4;box-shadow:0 0 0 3px rgba(122,91,196,.16)}
.giftcta textarea{display:block}
.ck{position:relative;cursor:pointer}
.ck input{position:absolute;opacity:0;width:16px;height:16px;margin:0;left:0;top:50%;transform:translateY(-50%)}
.ck input:checked+i{background:var(--pk);border-color:var(--pk)}
.ck input:focus-visible+i{outline:2px solid var(--pk);outline-offset:2px}
.ck i{flex:none}
button.pill{font:inherit;font-size:13px;color:inherit;cursor:pointer}
.fl-clear{display:block;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--pk)}
.pg .dis{opacity:.4}
.pg a:hover{border-color:var(--pk);color:var(--pk)}
.pg a.on:hover{color:#fff}
.empty{padding:48px 12px;text-align:center;color:var(--mut)}
.okmsg{margin:16px 40px 0;padding:12px 16px;border-radius:12px;background:#eaf7ee;color:var(--gn);font-weight:600;display:flex;gap:8px;align-items:center}
.sts.end{color:var(--mut)}
.inl{text-decoration:underline;text-underline-offset:2px}
.ft a.inl{display:inline;margin:0;text-decoration:none}
.flg{display:block}
.ft .fl-txt{display:block;color:var(--tx);margin:6px 0}
.mor{display:inline-block}
.sz button{font-family:inherit;font-size:12px;cursor:pointer}
.sz button:hover:not(.on){border-color:#e8a9bc}
.sz-note{font-size:12px;color:var(--mut);margin:-6px 0 0}
.th button.im:hover{outline:2px solid #f2b4c6}
.box .eta-body{flex:1;min-width:0}
.eta-form{display:flex;gap:8px;margin:8px 0 6px}
.eta-form input{flex:1;min-width:0;height:36px;border:1.5px solid var(--ln);border-radius:10px;padding:0 12px;font-size:13px;color:var(--tx);background:#fff}
.eta-form input:focus{outline:none;border-color:var(--pk)}
.eta-form button{height:36px;padding:0 14px;border:0;border-radius:10px;background:var(--pk);color:#fff;font-weight:600;font-size:13px;cursor:pointer}
.eta-out{display:block}.eta-out.ok{color:var(--gn);font-weight:600}.eta-out.err{color:#d13b3b}

/* Popup sự kiện (Bootstrap Modal + bố cục 2 cột của wireframe) */
.modal-backdrop{--bs-backdrop-bg:#4a1e32;--bs-backdrop-opacity:.55}
#eventModal .modal-dialog{--bs-modal-width:660px;--bs-modal-margin:20px}
#eventModal .modal-content{background:transparent;border:0;border-radius:22px;--bs-modal-bg:transparent}
.pop-slide{display:grid;grid-template-columns:1fr 1fr}
/* Chuyển giữa các sự kiện trong popup: trượt + mờ dần, slide cũ/mới chồng lên nhau trong lúc chuyển để không giật layout */
.pop.pop-anim{overflow:hidden}
.pop-slide.pop-mv{position:absolute;inset:0;transition:opacity .32s var(--ease),translate .32s var(--ease)}
.pop-slide.pop-mv.from-r{translate:30px 0;opacity:0}
.pop-slide.pop-mv.from-l{translate:-30px 0;opacity:0}
.pop-slide.pop-mv.to-l{translate:-30px 0;opacity:0}
.pop-slide.pop-mv.to-r{translate:30px 0;opacity:0}
@media (prefers-reduced-motion:reduce){.pop-slide.pop-mv{transition:none}}
button.xb{border:0;padding:0}
.pd button.dot{width:8px;height:8px;border-radius:50%;background:#e6cdd6;border:0;padding:0;cursor:pointer}
.pd button.dot.on{width:22px;border-radius:5px;background:var(--pk)}

/* Bộ lọc mobile: Offcanvas của Bootstrap chứa cùng khối .fl */
.offcanvas-md{--bs-offcanvas-width:320px}
.offcanvas-title{font-size:16px}
.offcanvas-body>.fl{width:100%}

/* Giao diện theo mùa (bật khi có sự kiện gắn theme đang diễn ra) */
.fxs main,.fxs footer{position:relative;z-index:1}
.fxs .hbtn.out{background:#fff;animation:none}
.fxs .hbtn.vb{background:#7a5bc4;animation:none}
.fxs .tab3{position:relative;overflow:hidden;transition:opacity .85s var(--ease),translate .85s var(--ease),scale .85s var(--ease),box-shadow .2s,transform .2s,border-color .2s;transition-delay:calc(var(--i,0) * 90ms),calc(var(--i,0) * 90ms),calc(var(--i,0) * 90ms),0s,0s,0s}
.fxs .tab3.on{background:var(--ac);border-color:var(--ac);color:#fff}
.fxs .tab3.on::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);transform:translateX(-100%);animation:sweep 3.6s ease-in-out infinite;pointer-events:none}
#fxc{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.fxt{position:fixed;left:14px;bottom:14px;z-index:4;background:#fff;border:1px solid var(--ln);border-radius:20px;padding:7px 14px;font:600 12.5px Inter,system-ui,sans-serif;color:var(--tx);cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,.12)}
.fx-off .fxbg::before,.fx-off .fxa,.fx-off .fxa::after,.fx-off .lt i,.fx-off .crn,.fx-off .hbtn,.fx-off .tab3.on::after{animation:none!important}
.fx-off #fxc{display:none}
@media(prefers-reduced-motion:reduce){.fxs .fxbg::before,.fxs .fxa,.fxs .fxa::after,.fxs .lt i,.fxs .crn,.fxs .hbtn,.fxs .tab3.on::after{animation:none!important}}
.cta.st{display:none}

@media (max-width:767.98px){
  :root .offcanvas-md .fl{display:block}
  :root .offcanvas-md .offcanvas-body .fl{border:0;padding:0 4px;background:transparent}
  :root .okmsg{margin:16px 16px 0}
  :root .ft .fl-txt{margin:6px 0}
  :root .eta-form{flex-wrap:wrap}
}

/* [6] Thẻ nhanh: ảnh 5 phần – chữ 5 phần (desktop), giữ bố cục dọc của wireframe trên mobile */
:root{--ease:cubic-bezier(.2,.7,.2,1)}
.ti{position:relative;overflow:hidden}
.ti::before{content:"";position:absolute;inset:0;background:inherit;transition:transform .8s var(--ease)}
.tc:hover .ti::before{transform:scale(1.08)}
.trio .tc .td,.trio .tc .tgo{display:none}
.tc.g .td{color:#3d5646}.tc.y .td{color:#6a5326}
@media (min-width:768px){
  .trio{gap:16px}
  .trio .tc{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;padding:10px;min-height:210px;border-radius:20px;transition:box-shadow .3s var(--ease)}
  .trio .tc:hover{box-shadow:0 14px 30px rgba(120,80,60,.16)}
  .trio .tc .ti{min-height:190px;height:auto;flex:none;border-radius:14px}
  .trio .tc .tx{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:6px 10px 6px 0}
  .trio .tc .tt{font-size:19px}
  .trio .tc small{font-size:13px;margin:0 0 4px;font-weight:600}
  .trio .tc .td{display:block;margin:0;font-size:13px;line-height:1.6}
  .trio .tc .tgo{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-weight:700;font-size:13px}
  .trio .tc .tgo svg{transform:rotate(-90deg);transition:transform .3s var(--ease)}
  .trio .tc:hover .tgo svg{transform:rotate(-90deg) translateY(4px)}
}
.up .ui{transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.up:hover .ui{background:var(--pk);color:#fff;transform:rotate(-8deg) scale(1.08)}
.hbtn{transition:box-shadow .25s,filter .25s}
.hbtn:hover{box-shadow:0 8px 20px rgba(232,84,122,.32);filter:brightness(1.04)}
.hbtn.out:hover{box-shadow:0 8px 20px rgba(232,84,122,.18)}
.main{overflow-x:clip}

/* [7] Hiệu ứng "cuộn tới đâu hiện tới đó". Chỉ bật khi có JS (html.js); JS thêm .in khi phần tử vào khung nhìn. */
:where(.trio .tc,.usp .up,.main .sh,.flash,.grid .pc,.gp2-card,.p2-card,.fb-photo,.blog-card,.giftcta,.mean .mr .mt,.mean .mr .mi,.soc .sc,.evs .ev,.bc,.pt,.chips.srt,.dt .gl,.dt .inf > *,.pg,.ft > div,.empty){transition:opacity .85s var(--ease),translate .85s var(--ease),scale .85s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.grid .pc{transition:opacity .85s var(--ease),translate .85s var(--ease),box-shadow .2s,transform .2s;transition-delay:calc(var(--i,0) * 90ms),calc(var(--i,0) * 90ms),0s,0s}
.js :is(.trio .tc,.usp .up,.main .sh,.flash,.grid .pc,.gp2-card,.p2-card,.fb-photo,.blog-card,.giftcta,.mean .mr .mt,.mean .mr .mi,.soc .sc,.evs .ev,.bc,.pt,.chips.srt,.dt .gl,.dt .inf > *,.pg,.ft > div,.empty):not(.in){opacity:0;translate:0 30px}
/* Thẻ trong khối lướt ngang: hiện sẵn luôn, không chờ cuộn tới mới hiện — vì nằm ngoài khung nhìn theo CHIỀU NGANG
   (phải vuốt/bấm mũi tên mới thấy), không phải do chưa cuộn tới theo chiều dọc như các khối khác, nên không hợp
   để áp hiệu ứng "mờ dần hiện ra khi cuộn tới" (sẽ có thẻ không bao giờ hiện nếu khách không cuộn đúng đến đó). */
.js .grid-slide .pc:not(.in){opacity:1!important;translate:0 0!important}
.js .hero > .im:not(.in){translate:0 0;scale:.93}
.js .mean .mr .mi:not(.in){translate:0 0;scale:.85;rotate:-2.2deg}
.js .mean .mr.rev .mi:not(.in){rotate:2.2deg}
.js .mean .mr .mt:not(.in){translate:-46px 0}
.js .mean .mr.rev .mt:not(.in){translate:46px 0}
.js .dt .gl:not(.in){translate:-34px 0}
.sp{position:fixed;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#c93a62,#e8547a,#f28aa8);transform-origin:0 50%;transform:scaleX(0);z-index:1100;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  :where(.trio .tc,.usp .up,.main .sh,.flash,.grid .pc,.gp2-card,.p2-card,.fb-photo,.blog-card,.giftcta,.mean .mr .mt,.mean .mr .mi,.soc .sc,.evs .ev,.bc,.pt,.chips.srt,.dt .gl,.dt .inf > *,.pg,.ft > div,.empty),.grid .pc,.gp2-card,.p2-card,.fb-photo,.blog-card{transition:none}
  .js :is(.trio .tc,.usp .up,.main .sh,.flash,.grid .pc,.gp2-card,.p2-card,.fb-photo,.blog-card,.giftcta,.mean .mr .mt,.mean .mr .mi,.soc .sc,.evs .ev,.bc,.pt,.chips.srt,.dt .gl,.dt .inf > *,.pg,.ft > div,.empty):not(.in){opacity:1;translate:none;scale:none}
  .tc:hover .ti::before{transform:none}.mr:hover .mi::before{transform:none}.ev:hover .pw .im{transform:none}.ev:hover{transform:none}.sp{display:none}
}

/* [8] Header sticky, dòng thông báo chạy, tìm kiếm, ô ý tưởng mobile, animation bổ sung */
/* Bootstrap bật scroll-behavior:smooth cho cả trang: mọi lần cuộn (kể cả lần trình duyệt tự cuộn khi gõ vào ô nhập) đều bị làm chậm thành "kéo từ từ". Tắt đi; các chỗ cần mượt (nút lên đầu trang...) tự khai báo behavior:'smooth' trong JS. */
:root{scroll-behavior:auto}
/* Đích của liên kết #... cách mép trên để không bị header che. KHÔNG dùng scroll-padding-top trên html: nó làm trình duyệt tự cuộn trang lên khi gõ vào ô tìm kiếm nằm trong header dính */
#tabs,#y-tuong,#ev,[data-pane]{scroll-margin-top:110px}
.ann{padding:0;display:block;height:36px;overflow:hidden}
.ann.fxa{height:40px}
.ann-mq{display:flex;height:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ann-track{flex:none;min-width:100%;display:flex;align-items:center;justify-content:space-around;gap:64px;padding-right:64px;animation:ann-run 34s linear infinite}
.ann-track .i{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.ann:hover .ann-track{animation-play-state:paused}
@keyframes ann-run{to{transform:translateX(-100%)}}

.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);transition:box-shadow .3s,background .3s}
.fxs .hd{position:sticky;top:0;z-index:50}
.hd::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,#f28aa8,#e8547a,#f28aa8,transparent);background-size:200% 100%;opacity:0;transition:opacity .3s;pointer-events:none}
.hd.scrolled{box-shadow:0 8px 26px rgba(200,90,125,.16)}
.hd.scrolled::after{opacity:1;animation:hd-glow 6s linear infinite}
.hd .lg{transition:rotate .5s var(--ease),scale .4s var(--ease)}
.hd.scrolled .lg{scale:.86}
.hd .logo:hover .lg{rotate:-10deg;scale:1.08}
@keyframes hd-glow{to{background-position:-200% 0}}

.sr{transition:background .3s,border-color .3s,box-shadow .3s}
.sr:focus-within{background:#fff;border-color:var(--pk);box-shadow:0 0 0 4px rgba(232,84,122,.13)}
.sr>svg{transition:transform .35s var(--ease),color .3s}
.sr:focus-within>svg{color:var(--pk);transform:scale(1.15) rotate(-10deg)}
.sr .go{flex:none;width:32px;height:32px;margin-right:-9px;border:0;border-radius:50%;background:var(--pk);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s}
.sr .go:hover{transform:scale(1.1);box-shadow:0 4px 12px rgba(232,84,122,.42)}
.sr .go svg{color:#fff}

/* Nút, thẻ, tiêu đề: hiệu ứng nhẹ */
.hbtn{position:relative;overflow:hidden}
.hbtn .rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);pointer-events:none;translate:-50% -50%;width:12px;height:12px;animation:rip .65s ease-out forwards}
.hbtn.out .rip{background:rgba(232,84,122,.22)}
@keyframes rip{to{width:340px;height:340px;opacity:0}}
.page:not(.fxs) .hero .hbtn,.page:not(.fxs) .cta .hbtn:not(.out){animation:glow 2.8s ease-out infinite}
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(232,84,122,.4)}70%,100%{box-shadow:0 0 0 14px rgba(232,84,122,0)}}
.pc .pw{overflow:hidden}
.pc .pw .im{transition:transform .7s var(--ease)}
.pc:hover .pw .im{transform:scale(1.07)}
.bg.or{animation:bgp 2.4s ease-in-out infinite}
@keyframes bgp{50%{scale:1.09}}
.fst svg{animation:twinkle 2.6s ease-in-out infinite}
@keyframes twinkle{50%{scale:1.2;rotate:14deg}}
.cdb b.tick{display:block;animation:tick .45s var(--ease)}
@keyframes tick{0%{translate:0 -7px;opacity:.15}100%{translate:0 0;opacity:1}}
.tab3 .pic img{animation:bob 5.5s ease-in-out infinite;transition:transform .5s var(--ease)}
.tab3:nth-child(2) .pic img{animation-delay:-1.8s}.tab3:nth-child(3) .pic img{animation-delay:-3.4s}
.tab3:hover .pic img{transform:scale(1.07) rotate(-3deg)}
@keyframes bob{50%{translate:0 -8px}}
.ft a:not(.inl){transition:translate .25s var(--ease),color .25s}
.ft a:not(.inl):hover{translate:5px 0;color:var(--pk)}
.pane-in{animation:pane-in .6s var(--ease) both}
@keyframes pane-in{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
.hero{position:relative}
/* Quầng sáng mờ phía sau khối chữ — thêm chiều sâu, đỡ bẹt so với nền màu đặc trước đây */
.hero::after{content:"";position:absolute;z-index:0;top:-18%;left:-10%;width:60%;height:140%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.55),transparent 72%);pointer-events:none}
.hero .ht{position:relative;z-index:1}
.hero .pt{position:absolute;top:-30px;z-index:0;pointer-events:none;width:13px;height:17px;border-radius:0 100% 0 100%;background:linear-gradient(135deg,rgba(242,138,168,.75),rgba(232,84,122,.45));animation:pt-fall linear infinite;opacity:0}
@keyframes pt-fall{0%{transform:translate3d(0,0,0) rotate(0);opacity:0}10%{opacity:.85}90%{opacity:.7}100%{transform:translate3d(var(--dx,40px),400px,0) rotate(330deg);opacity:0}}
.hero>.im{position:relative;overflow:hidden;animation:kb 16s ease-in-out infinite alternate}
.hero>.im::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.4) 50%,transparent 60%);translate:-130% 0;animation:sweep2 4.5s ease-in-out 1.2s infinite}
@keyframes sweep2{0%,15%{translate:-130% 0}45%,100%{translate:130% 0}}
@keyframes kb{from{scale:1}to{scale:1.06}}
.hero{overflow:hidden}
.totop{position:fixed;right:18px;bottom:22px;z-index:60;width:46px;height:46px;border:0;border-radius:50%;background:var(--pk);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 22px rgba(232,84,122,.42);opacity:0;visibility:hidden;translate:0 14px;transition:opacity .3s,translate .3s var(--ease),visibility .3s,background .2s}
.totop.show{opacity:1;visibility:visible;translate:0 0}
.totop:hover{background:#c93a62}
.page-detail .totop{bottom:22px}

/* Mobile: header gọn (cuộn xuống thì thu logo, chỉ còn ô tìm kiếm), ô tìm kiếm và ô ý tưởng dễ dùng */
@media (max-width:767.98px){
  :root .hrow{padding:10px 14px 12px;gap:10px}
  /* Header dính bằng offset âm: hàng logo tự cuộn khuất, ô tìm kiếm ở lại. Chiều cao header không đổi -> không giật */
  :root .hd{top:-60px;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}
  :root .ann-mq{-webkit-mask-image:none;mask-image:none}
  :root .sr{flex:none;height:46px;background:#fff;border:1.5px solid #f2d3dd;box-shadow:0 4px 14px rgba(200,90,125,.12);padding:0 7px 0 14px;gap:8px;transition:opacity .25s,visibility .25s}
  /* Cuộn đủ sâu để thanh danh mục nổi lên (.tabs-on) thì ẩn ô tìm kiếm bằng độ trong suốt — CHỦ Ý không đổi
     kích thước/margin của nó, vì header phải giữ nguyên chiều cao (kỹ thuật dịch âm phía trên dựa vào điều
     này) để không bị giật nội dung mỗi lần chuyển trạng thái; thanh danh mục vốn đã nổi đè lên trên nên không
     cần phần tìm kiếm phía dưới nhường chỗ. */
  :root .hd.tabs-on .sr{opacity:0;visibility:hidden;pointer-events:none}
  /* Trang không có thanh danh mục rút gọn (danh mục sản phẩm, chi tiết sản phẩm, tìm kiếm, Blog, Feedback...):
     không có gì thế chỗ nên ẩn ô tìm kiếm ngay khi vừa lướt xuống (dùng lại .scrolled đã có sẵn, không cần đợi
     mốc cuộn sâu như ở trang chủ) — đỡ chiếm chỗ màn hình nhỏ, kéo lên lại đầu trang thì hiện lại ngay. */
  :root .hd.scrolled:not(:has(.hd-tabs)) .sr{opacity:0;visibility:hidden;pointer-events:none}
  /* ...và thế chỗ bằng logo nhỏ canh giữa — đỡ trống trải, vẫn thấy thương hiệu khi đang cuộn xem sản phẩm */
  :root .hd-mini{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility .25s}
  :root .hd-mini .lg{width:48px;height:48px}   /* logo thu gọn = đúng cỡ và kiểu của logo ở đầu trang (.logo) */
  :root .hd-mini .hm-t{display:block;text-align:left}   /* cùng cấu trúc với .logo > div: b khối + small nội tuyến -> cùng khoảng cách dòng */
  :root .hd-mini b{display:block;font-size:18px;font-weight:700;letter-spacing:.02em;line-height:1.1;color:var(--tx);white-space:nowrap}
  :root .hd-mini small{font-size:10px;font-weight:600;letter-spacing:.18em;color:var(--mut)}
  /* Tương thích HTML cũ (nếu views/layouts/main.php chưa được cập nhật): <a class="hd-mini"><span class="lg lgo"></span><b>Hoa Lan Tác Phẩm</b></a>
     — vẫn hiện đúng kiểu HOA LAN / TÁC PHẨM chỉ nhờ file CSS này. HTML mới (có .hm-t) không dính các luật bên dưới vì b không còn là con trực tiếp. */
  :root .hd-mini > b{display:block;font-size:0;line-height:0;color:var(--tx);white-space:nowrap}
  :root .hd-mini > b::before{content:"HOA LAN";display:block;font-size:18px;font-weight:700;letter-spacing:.02em;line-height:1.1;color:var(--tx)}
  :root .hd-mini > b::after{content:"TÁC PHẨM";display:block;font-size:10px;font-weight:600;letter-spacing:.18em;line-height:1;margin-top:6px;color:var(--mut)}
  :root .hd.scrolled:not(:has(.hd-tabs)) .hd-mini{opacity:1;visibility:visible;pointer-events:auto}
  :root .sr input{font-size:16px}
  :root .sr .go{margin-right:0;width:34px;height:34px}
  :root .fr{flex-direction:column;gap:10px}
  :root .fr textarea{flex:none;min-height:104px;font-size:16px;line-height:1.5}
  :root .giftcta .gin{font-size:16px;height:48px}
  :root .fc{gap:8px}
  :root .fc :is(button,span){padding:7px 13px;font-size:12.5px}
  :root .totop{bottom:88px;right:14px;width:42px;height:42px}
  :root .page-detail .totop{bottom:86px}
  :root .hero .pt:nth-of-type(n+6){display:none}
  :root .ann-track{gap:44px;padding-right:44px;animation-duration:28s}
}
@media (prefers-reduced-motion:reduce){
  .ann-track{animation:none;justify-content:center}.ann-track[aria-hidden]{display:none}
  .hd::after,.hero>.im,.hero>.im::after,.tab3 .pic img,.fst svg,.bg.or,.hbtn,.hero .pt,.cdb b.tick,.pane-in,.ht em,.mi.in::after{animation:none!important}
  .hero .pt{display:none}
}

/* [9] Ba nút danh mục thu gọn trong header: hiện khi các thẻ danh mục lớn đã cuộn khuất */
.hd-slot{display:contents}
.hd-mini{display:none}
.hd-tabs{display:flex;align-items:center;gap:6px;flex:none;overflow:hidden;max-width:0;margin-left:-24px;opacity:0;visibility:hidden;transition:max-width .55s var(--ease),margin .45s var(--ease),max-height .45s var(--ease),opacity .35s,visibility .35s}
.hd.tabs-on .hd-tabs{max-width:470px;margin-left:0;opacity:1;visibility:visible}
.hdt{display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:26px;background:#fff0f3;border:1.5px solid #f6c9d5;font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;color:var(--pkd,#c93a62);transition:background .25s,border-color .25s,color .25s,box-shadow .25s,translate .25s var(--ease)}
.hdt img{width:30px;height:30px;flex:none;object-fit:contain;border-radius:50%;background:#fff7f9;padding:2px;transition:rotate .4s var(--ease)}
.hdt:hover{border-color:var(--pk);background:#ffe4ea;translate:0 -1px;box-shadow:0 3px 10px rgba(232,84,122,.18)}
.hdt:hover img{rotate:-8deg}
.hdt.on{background:var(--pk);border-color:var(--pk);color:#fff;box-shadow:0 6px 16px rgba(232,84,122,.32)}
.hdt.on img{background:#fff}
.fxs .hdt.on{background:var(--ac);border-color:var(--ac)}
/* Tablet/mobile: thanh nút phủ ngay dưới header (position:absolute, không thay đổi chiều cao header nên nội dung không bị đẩy/giật) */
@media (max-width:991.98px){
  /* Ô tìm kiếm và thanh danh mục rút gọn dùng CHUNG một "ô" — thanh danh mục THẾ CHỖ ô tìm kiếm ngay tại đó
     (không còn đổ xuống thành hộp nổi che nội dung bên dưới như trước, tránh cảm giác bị "đẩy/che" khi chạm). */
  .hd-slot{position:relative;display:block;width:100%;height:46px}
  .hd-tabs{position:absolute;inset:0;flex:none;width:auto;max-width:none;margin:0;padding:0 2px;justify-content:center;overflow-x:auto;scrollbar-width:none;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  .hd-tabs::-webkit-scrollbar{display:none}
  .hd.tabs-on .hd-tabs{max-width:none;margin:0;opacity:1;visibility:visible}
  :root .sr{position:absolute;inset:0}
}
@media (max-width:767.98px){
  :root .hd-tabs{justify-content:flex-start}
  :root .hdt{flex:1 1 0;min-width:max-content;justify-content:center;gap:5px;padding:4px 9px 4px 4px;font-size:11px;letter-spacing:0;text-transform:none}
  :root .hdt img{width:24px;height:24px}
}
@media (prefers-reduced-motion:reduce){.hd-tabs,.hdt,.hdt img,.sr,.hd-mini{transition:none}}

/* [10] Trang danh mục: cập nhật kết quả không tải lại trang */
#cat-results{position:relative;min-height:140px;transition:opacity .25s}
#cat-results.is-loading{opacity:.4;pointer-events:none}
#cat-results.is-loading::before{content:"";position:absolute;left:0;right:0;top:-8px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--pk),transparent) no-repeat;background-size:45% 100%;animation:load-bar 1s linear infinite;z-index:2}
@keyframes load-bar{from{background-position:-60% 0}to{background-position:160% 0}}
.drawer-done{display:none}
@media (max-width:767.98px){
  :root .offcanvas-md .drawer-done{display:flex;width:100%;margin-top:18px;position:sticky;bottom:0;box-shadow:0 -10px 18px #fff}
}
@media (prefers-reduced-motion:reduce){#cat-results{transition:none}#cat-results.is-loading::before{animation:none}}

/* [11] Tiêu đề mục: dòng chữ nghiêng + tiêu đề + đường kẻ tự vẽ ra + nút xem thêm dạng viên thuốc */
.sh{display:flex;align-items:flex-end;justify-content:flex-start;gap:16px;margin-bottom:20px}
.sh .sht{flex:0 1 auto;min-width:0;display:flex;flex-direction:column}
.sh .eb{display:block;font:500 23px/1 'Dancing Script',cursive;color:var(--pk);margin-bottom:3px}
.sh h4{font-size:27px;line-height:1.15;letter-spacing:.005em;color:var(--tx)}
.sh .sl{flex:1;position:relative;min-width:28px;height:2px;margin-bottom:10px;border-radius:2px;background:linear-gradient(90deg,#f5b9c9,rgba(245,185,201,0));transform-origin:left;transform:scaleX(0);transition:transform 1.1s .3s var(--ease)}
.sh .sl::before{content:"";position:absolute;left:0;top:50%;width:9px;height:9px;translate:0 -50%;border-radius:50%;background:var(--pk);box-shadow:0 0 0 4px #fde3ea}
.sh.in .sl,html:not(.js) .sh .sl{transform:scaleX(1)}
.sh a{flex:none;display:inline-flex;align-items:center;gap:6px;margin-bottom:4px;padding:7px 14px 7px 16px;border-radius:20px;background:#fff0f3;color:var(--pk);font-weight:700;font-size:13px;transition:background .25s,color .25s,box-shadow .25s}
.sh a svg{transition:translate .25s var(--ease)}
.sh a:hover{background:var(--pk);color:#fff;box-shadow:0 8px 18px rgba(232,84,122,.3)}
.sh a:hover svg{translate:4px 0}
@media (max-width:767.98px){
  :root .sh{gap:10px;margin-bottom:16px}
  :root .sh .eb{font-size:20px}
  :root .sh h4{font-size:22px}
  :root .sh .sl{margin-bottom:9px;min-width:16px}
  :root .sh a{padding:6px 11px 6px 13px;font-size:12px}
  :root .sh-nl .sl{display:none}   /* mục không có nút: tiêu đề dài xuống dòng thì không để chấm hồng lơ lửng */
}
@media (prefers-reduced-motion:reduce){.sh .sl{transform:scaleX(1);transition:none}}

/* [12] Tìm kiếm: nút xóa, gợi ý khi gõ, ghi chú kết quả gần đúng */
.sr{position:relative}
.sr input::-webkit-search-cancel-button{display:none}
.sug{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:60;background:#fff;border:1px solid #f2d3dd;border-radius:20px;box-shadow:0 24px 54px rgba(120,50,80,.24);overflow:hidden auto;max-height:min(72vh,580px);overscroll-behavior:contain;animation:sug-in .22s var(--ease);text-align:left}
.sug[hidden]{display:none}
@keyframes sug-in{from{opacity:0;translate:0 -8px}}
.sug-h{padding:14px 18px 6px;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.sug-cats,.sug-chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 18px 12px}
.sug-cat,.sug-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:18px;background:#fff0f3;color:var(--pk);font-weight:700;font-size:13px;border:1px solid transparent;transition:background .2s,color .2s}
.sug-chip{background:#fff;border-color:var(--ln);color:var(--tx);font-weight:500}
.sug-cat:hover,.sug-cat[aria-selected=true],.sug-chip:hover,.sug-chip[aria-selected=true]{background:var(--pk);color:#fff;border-color:var(--pk)}
.sug-i{display:flex;align-items:center;gap:12px;padding:8px 18px;color:var(--tx);cursor:pointer}
.sug-i img{width:48px;height:48px;border-radius:11px;object-fit:cover;flex:none;background:#ffeef1}
.sug-i .t{min-width:0;display:flex;flex-direction:column;gap:2px}
.sug-i .n{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug-i .m{font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug-i .p{margin-left:auto;padding-left:8px;font-weight:700;color:var(--pk);white-space:nowrap;font-size:14px}
.sug-i mark{background:#ffe3ea;color:var(--pkd,#c93a62);border-radius:3px;padding:0 1px}
.sug-i:hover,.sug-i[aria-selected=true]{background:#fff5f8}
.sug-note{padding:8px 18px 4px;font-size:12px;color:#b7791f}
.sug-all{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 18px;border-top:1px solid var(--ln);font-weight:700;color:var(--pk);background:#fffafb}
.sug-all:hover,.sug-all[aria-selected=true]{background:#fff0f3}
.sug-none{padding:20px 18px 6px;color:var(--mut);text-align:center;line-height:1.55}
.srch-cats{margin-bottom:16px;align-items:center}
.srch-note{display:flex;align-items:flex-start;gap:8px;margin:0 0 16px;padding:10px 14px;border-radius:12px;background:#fff6e5;color:#8a5a12;font-size:13px;line-height:1.5}
.srch-note svg{flex:none;margin-top:1px}
/* Mobile: mở rộng gần sát mép màn hình. Dùng absolute (không dùng fixed vì header mobile có transform làm fixed định vị sai) và thấp hơn để bàn phím không che nhiều */
@media (max-width:767.98px){:root .sug{left:-4px;right:-4px;max-height:min(50vh,400px)}}
@media (prefers-reduced-motion:reduce){.sug{animation:none}}

/* [13] Giá ẩn (enable_price = 0) và video đại diện */
.pp .ask,.pr .ask{color:var(--pk);font-weight:700}
.pp-ask{font-size:14px}
.pr-ask{font-size:22px}
.pw{position:relative}
.pw video.im{display:block;width:100%;aspect-ratio:1;height:auto;object-fit:cover;background:#ffeef1}
.vbadge{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:rgba(74,30,50,.6);color:#fff;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity .25s,scale .25s var(--ease)}
.pc:hover .vbadge,.pc.vplay .vbadge{opacity:0;scale:.7}   /* ẩn nút ▶ khi video đang chạy */
.gm video.im{display:block;width:100%;aspect-ratio:1;height:auto;object-fit:cover;border-radius:16px;background:#111}
.th button.im{position:relative}
.th .tp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(74,30,50,.28);border-radius:inherit}
@media (prefers-reduced-motion:reduce){.vbadge{transition:none}}

/* [14] Mục "Sự kiện" ở trang chủ */
.ev .newest{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:14px;background:var(--pk);color:#fff;font-size:12px;font-weight:700;box-shadow:0 4px 12px rgba(232,84,122,.35)}
.ev .eb .mor{margin-top:2px;font-weight:700;color:var(--pk)}
@media (min-width:768px){
  .evs.n2{grid-template-columns:repeat(2,1fr)}
  .evs.n1{grid-template-columns:1fr}
  .evs.n1 .ev{flex-direction:row}
  .evs.n1 .ev .pw{flex:0 0 46%;min-height:230px}
  .evs.n1 .ev .pw .im{height:100%;aspect-ratio:auto}
  .evs.n1 .ev .eb{justify-content:center;padding:22px 26px}
  .evs.n1 .ev h5{font-size:22px}
  .evs.n1 .ev p{font-size:14.5px}
}

/* ===== [Feedback / Blog Story] Banner trang chủ — nền sáng, chữ viết tay lớn, trang trí hoa lá ===== */
.promo2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.p2-card{position:relative;overflow:hidden;display:block;min-height:210px;padding:22px 26px;border-radius:22px;background:linear-gradient(135deg,#fff7f9,#ffeef2);border:1px solid #ffd9e3;text-decoration:none;color:inherit;box-shadow:0 10px 24px rgba(200,90,125,.12);transition:opacity .85s var(--ease),translate .85s var(--ease),box-shadow .2s,transform .2s;transition-delay:calc(var(--i,0) * 90ms),calc(var(--i,0) * 90ms),0s,0s}
.p2-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(200,90,125,.2)}
.p2-deco{position:absolute;left:-18px;bottom:-14px;z-index:0;opacity:.9;pointer-events:none}
.p2-deco svg{width:110px;height:110px}
.p2-heart{position:absolute;top:18px;right:20px;color:#f2a8c0;opacity:.8}
.p2-pt{position:absolute;width:11px;height:13px;opacity:.55;pointer-events:none;z-index:0}
.p2-kicker{position:relative;z-index:1;display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--pk)}
.p2-ic{flex:none;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--pk);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(200,90,125,.25)}
.p2-title{position:relative;z-index:1;display:block;font:700 54px/1.1 'Dancing Script',cursive;color:#c2366f;margin:6px 0 0}
.p2-sub{position:relative;z-index:1;display:block;font:500 19px/1.3 'Dancing Script',cursive;font-style:normal;color:#e8547a;margin-bottom:16px}
.p2-btn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#ef6b8f,#c2366f);color:#fff;font-size:12.5px;font-weight:700;padding:9px 18px;border-radius:20px}
.p2-photo{position:absolute;right:0;top:0;bottom:0;width:38%;background-size:cover;background-position:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}
.p2-bg .p2-title,.p2-bg .p2-sub{color:#c2366f}


/* ===== [Feedback] Trang /danh-gia ===== */
.fb-hero{text-align:center;max-width:680px;margin:0 auto}
.fb-eb{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--pk);background:#ffe3ea;padding:5px 14px;border-radius:14px}
.fb-hero h1{margin:14px 0 8px;font-size:30px}
.fb-hero p{color:var(--mut,#8a6b78);margin:0}
.fb-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fb-photo{position:relative;display:block;aspect-ratio:1/1;border-radius:14px;overflow:hidden;box-shadow:0 1px 6px rgba(200,90,125,.13);transition:opacity .85s var(--ease),translate .85s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.fb-photo img{width:100%;height:100%;object-fit:cover;display:block}
.fb-photo .fb-cap{position:absolute;inset:auto 0 0;padding:16px 10px 8px;font-size:12px;line-height:1.3;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent)}
.fb-summary{display:flex;align-items:center;gap:16px;margin-bottom:20px;padding:16px 20px;background:#fff7f9;border-radius:14px}
.fb-summary>b{font-size:34px;color:var(--pk)}
.fb-stars{color:#f5b800;letter-spacing:1px}
.fb-summary small{display:block;color:var(--mut,#8a6b78);font-size:12.5px;margin-top:2px}
.fb-reviews{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fb-rev{background:#fff;border:1px solid var(--ln);border-radius:14px;padding:16px}
.fb-rh{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.fb-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.fb-av-i{display:flex;align-items:center;justify-content:center;background:var(--pk);color:#fff;font-weight:700;font-size:16px}
.fb-who b{display:block;font-size:14px}
.fb-txt{font-size:13.5px;line-height:1.6;color:var(--tx);margin:0 0 8px}
.fb-meta{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--mut,#8a6b78)}

/* ===== [Blog Story] Trang /blog và /blog/{slug} ===== */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.blog-card{display:block;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 1px 6px rgba(200,90,125,.13);text-decoration:none;color:inherit;transition:opacity .85s var(--ease),translate .85s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.blog-cv{height:190px;background-size:cover;background-position:center}
.blog-bd{padding:16px 18px}
.blog-bd h3{margin:0 0 6px;font-size:17px;color:var(--tx)}
.blog-bd p{margin:0 0 10px;font-size:13px;color:var(--mut,#8a6b78);line-height:1.6}
.blog-more{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;color:var(--pk)}
.blog-art{max-width:760px;margin:0 auto}
.blog-art h1{font-size:26px;text-align:center;margin:0 0 20px}
.blog-cover{height:320px;border-radius:16px;background-size:cover;background-position:center;margin-bottom:20px}
.blog-body{font-size:15px;line-height:1.8}
.blog-body h3{font-size:19px;margin:22px 0 10px}
.blog-body h4{font-size:16px;margin:18px 0 8px}

@media (max-width:767.98px){
  /* Mỗi banner chiếm trọn 1 hàng riêng (2 hàng, không còn ngồi chung đôi) — đủ chỗ hiện cỡ chữ dễ đọc hơn */
  :root .promo2{grid-template-columns:1fr;gap:12px}
  :root .p2-card{min-height:170px;padding:18px 20px}
  :root .p2-title{font-size:38px}
  :root .p2-sub{font-size:14px;margin-bottom:12px}
  :root .p2-kicker{font-size:10.5px}
  :root .p2-btn{padding:8px 14px;font-size:12px}
  :root .p2-deco svg{width:80px;height:80px}
  :root .p2-heart svg{width:17px;height:17px}
  :root .p2-photo{width:32%}
  :root .fb-gallery{grid-template-columns:1fr 1fr;gap:10px}
  :root .fb-reviews{grid-template-columns:1fr}
  :root .fb-hero h1{font-size:24px}
  :root .blog-grid{grid-template-columns:1fr}
  :root .blog-art h1{font-size:21px}
  :root .blog-cover{height:200px}
}

/* ===== [Chọn mẫu hoa] Khối chọn danh mục — icon/chữ bên trái, ảnh lớn bên phải, viền màu theo danh mục ===== */
.gift-pick{padding-top:18px}
.gp-dots{display:none}
.gp-grid.gp2{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px}
.gp2-card{display:flex;align-items:stretch;background:#fff;border-radius:20px;overflow:hidden;border:2px solid #f0e4e8;box-shadow:0 10px 26px rgba(60,20,30,.1);text-decoration:none;color:inherit;transition:opacity .85s var(--ease),translate .85s var(--ease),box-shadow .2s,transform .2s,border-color .2s;transition-delay:calc(var(--i,0) * 90ms),calc(var(--i,0) * 90ms),0s,0s,0s}
.gp2-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(60,20,30,.18);border-color:currentColor}
.gp2-card.on{border-color:currentColor;box-shadow:0 10px 26px rgba(60,20,30,.1),0 0 0 3px color-mix(in srgb,currentColor 18%,transparent)}
.gp2-rose{border-color:#f7cddb}
.gp2-green{border-color:#c7e8d0}
.gp2-gold{border-color:#f6ddb3}
.gp2-text{flex:1 1 52%;padding:24px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.gp2-ic{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.gp2-text h3{margin:0 0 6px;font-size:19px;color:var(--tx)}
.gp2-text p{margin:0 0 14px;font-size:12.5px;color:var(--mut,#8a6b78);line-height:1.5}
.gp2-photo{flex:1 1 46%;position:relative;min-height:190px;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#fff;overflow:hidden}
.gp2-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);translate:-130% 0}
.gp2-card:hover .gp2-photo::after{animation:gpsweep 1s ease-out}
@keyframes gpsweep{to{translate:130% 0}}
.gp-badge{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.92);color:var(--tx);font-size:12px;font-weight:700;padding:5px 11px;border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.15);animation:gpbadge 2.6s ease-in-out infinite}
@keyframes gpbadge{0%,100%{box-shadow:0 2px 8px rgba(0,0,0,.15)}50%{box-shadow:0 2px 8px rgba(0,0,0,.15),0 0 0 5px rgba(232,84,122,.18)}}
@media (prefers-reduced-motion:reduce){.gp-badge{animation:none}.gp2-card:hover .gp2-photo::after{animation:none}}
.gp-btn{flex:none;align-self:flex-start;display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,#ef6b8f,#c2366f);color:#fff;font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:20px}
.gp2-rose{color:var(--pk)}
.gp2-rose .gp2-ic{background:#fdeef2;color:var(--pk)}
.gp2-green{color:#1f8a4c}
.gp2-green .gp2-ic{background:#e6f5ea;color:#1f8a4c}
.gp2-gold{color:#b5700c}
.gp2-gold .gp2-ic{background:#fff1de;color:#b5700c}

@media (max-width:767.98px){
  /* Mobile: tiêu đề "Chọn mẫu hoa" canh giữa cho cân đối (desktop vẫn canh trái + đường kẻ dài như cũ) */
  .gift-pick .sh{flex-direction:column;align-items:center;text-align:center}
  .gift-pick .sh .sht{align-items:center}
  .gift-pick .sh .sl{flex:none;width:70px;margin:0 auto}
  .gift-pick .sh .sl::before{left:50%;translate:-50% -50%}
  /* Mobile: mỗi lần vuốt dừng lại gọn 1 thẻ (scroll-snap mandatory, không còn mũi tên nổi che hình) — chấm tròn
     bên dưới cho biết đang ở thẻ nào, giống kiểu vuốt ảnh quen thuộc thay vì lưới bị cắt xén nhìn rối mắt */
  /* touch-action:pan-x — BẮT BUỘC để trình duyệt hiểu rõ đây là khối chỉ vuốt NGANG, tránh nhầm lẫn với cuộn
     dọc của cả trang (lỗi "vuốt bị kéo lên/che góc" bạn gặp chính là do thiếu khai báo này) */
  .gp-grid.gp2{display:flex;grid-template-columns:none;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:14px;padding:2px 2px 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .gp-grid.gp2::-webkit-scrollbar{display:none}
  .gp2-card{flex:0 0 auto;width:88vw;max-width:360px;scroll-snap-align:center}
  .gp2-text{padding:16px 14px;flex-basis:56%}
  .gp2-ic{width:32px;height:32px;margin-bottom:6px}
  .gp2-ic svg{width:16px;height:16px}
  .gp2-text h3{font-size:15px;margin-bottom:4px}
  .gp2-text p{font-size:11.5px;margin-bottom:10px;line-height:1.4}
  .gp2-photo{flex-basis:44%;min-height:0}
  .gp-badge{top:8px;right:8px;padding:4px 8px;font-size:10.5px}
  .gp-btn{padding:6px 11px;font-size:11px}
  .gp-dots{display:flex;justify-content:center;gap:7px;margin-top:14px}
  .gp-dot{width:7px;height:7px;border-radius:50%;background:#e9d5dc}
  .gp-dot.on{width:20px;border-radius:4px;background:var(--pk)}
}

/* ===== [Mua theo ngân sách] Tab tầm giá + danh sách đổi theo tab + nút "Xem thêm" có hoa & animation ===== */
:root{--ease:cubic-bezier(.22,1,.36,1)}   /* nhiều khối ở trên đã dùng var(--ease) mà chưa khai báo ở đâu — khai báo ở đây cho hiệu ứng chạy đúng (bỏ nếu đã khai báo nơi khác) */

/* Tab: thanh nền hồng trượt theo tab đang chọn (.bt-ind do JS đặt vị trí) */
.bt-tabs{position:relative;display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.bt-tab{position:relative;z-index:1;font:inherit;font-size:14px;color:var(--tx);cursor:pointer;padding:9px 20px;border-radius:999px;background:#fff;border:1px solid var(--ln);transition:color .25s,border-color .25s,background .25s,box-shadow .25s,transform .25s var(--ease)}
.bt-tab:hover:not(.on){border-color:var(--pk);color:var(--pk);transform:translateY(-1px)}
.bt-tab.on{background:linear-gradient(135deg,#ef6b8f,#c2366f);border-color:transparent;color:#fff;font-weight:700;box-shadow:0 8px 18px rgba(232,84,122,.28)}
.bt-tab:focus-visible{outline:2px solid var(--pk);outline-offset:3px}
.bt-ind{position:absolute;z-index:0;left:0;top:0;height:0;width:0;border-radius:999px;background:linear-gradient(135deg,#ef6b8f,#c2366f);box-shadow:0 8px 18px rgba(232,84,122,.28);opacity:0;pointer-events:none;transition:transform .45s var(--ease),width .45s var(--ease),opacity .2s}
.bt-js .bt-ind{opacity:1}
.bt-js .bt-tab.on{background:transparent;box-shadow:none}   /* có JS: nền hồng của tab đang chọn do .bt-ind vẽ, trượt mượt giữa các tab */

/* Chip "N mẫu" dùng lại kiểu .gp-badge của khối "Chọn mẫu hoa" (bản gốc nằm đè lên ảnh nên ở đây đưa về dòng chảy bình thường) */
.bt-meta{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.bt-meta small{font-size:12.5px;color:var(--mut)}
.gp-badge.bt-cnt{position:static;border:1.5px solid #f3c7d4;padding:5px 12px 5px 10px}
.bt-cnt svg{color:var(--pk)}
.bt-cnt b{font-weight:800;font-variant-numeric:tabular-nums;min-width:1ch}

/* Đổi tab: chip + thẻ + nút hiện lần lượt (JS thêm .bt-in mỗi lần mở tab) */
.bt-pane[hidden]{display:none}
.bt-pane.bt-in .bt-meta{animation:bt-rise .45s var(--ease) backwards}
.bt-pane.bt-in .grid .pc{animation:bt-card .6s var(--ease) backwards;animation-delay:calc(var(--i,0) * 70ms + 60ms)}
.bt-pane.bt-in .slide-wrap{animation:bt-rise .5s var(--ease) backwards}
@keyframes bt-card{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
@keyframes bt-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Nút "Xem thêm": gradient hồng của site + hoa ở góc trái */
.btn-more{position:relative;display:inline-flex;align-items:center;gap:12px;overflow:hidden;isolation:isolate;min-height:52px;padding:0 24px 0 58px;border-radius:999px;color:#fff;font-weight:800;font-size:16px;letter-spacing:.01em;
  background:linear-gradient(115deg,#f27a9b,#ef6b8f 30%,#c2366f 72%,#ef6b8f);background-size:220% 100%;background-position:0 0;
  box-shadow:0 10px 22px rgba(194,54,111,.32),inset 0 1px 0 rgba(255,255,255,.28);
  animation:bm-glow 3.2s ease-in-out infinite;transition:transform .35s var(--ease),box-shadow .35s,background-position .8s var(--ease)}
.btn-more:hover{transform:translateY(-3px) scale(1.03);background-position:100% 0;box-shadow:0 16px 30px rgba(194,54,111,.42),inset 0 1px 0 rgba(255,255,255,.3);color:#fff}
.btn-more:active{transform:translateY(0) scale(.97);transition-duration:.1s}
.btn-more:focus-visible{outline:3px solid #fff;outline-offset:-6px;box-shadow:0 0 0 3px var(--pk)}
.btn-more>*{position:relative;z-index:1}
.btn-more::after{content:"";position:absolute;z-index:0;top:0;bottom:0;left:0;width:46%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-160%) skewX(-18deg);animation:bm-shine 3.6s ease-in-out 1s infinite;pointer-events:none}
.btn-more:hover::after{animation-duration:1.4s}
.bm-fl{position:absolute;z-index:1;left:0;top:-1px;width:56px;height:56px;pointer-events:none;transform-origin:20% 70%;animation:bm-sway 4.2s ease-in-out infinite;transition:scale .4s var(--ease)}
.bm-fl svg{display:block}
.bm-d{transform-box:fill-box;transform-origin:center;animation:bm-spin 9s linear infinite}
.bm-b{animation:bm-twinkle 2.4s ease-in-out infinite}
.btn-more:hover .bm-d{animation-duration:2.2s}
.btn-more:hover .bm-fl{animation-duration:1.6s;scale:1.12}
.bm-ar{display:inline-flex;transition:translate .35s var(--ease);animation:bm-nudge 2s ease-in-out infinite}
.btn-more:hover .bm-ar{translate:6px 0;animation:none}
.bm-p{position:absolute;z-index:0;bottom:-8px;width:9px;height:12px;border-radius:0 100% 0 100%;background:rgba(255,255,255,.85);opacity:0;pointer-events:none}
.bm-p.p1{left:38%}.bm-p.p2{left:58%;width:7px;height:10px}.bm-p.p3{left:76%}
.btn-more:hover .bm-p{animation:bm-petal 1.5s ease-out infinite}
.btn-more:hover .bm-p.p2{animation-delay:.35s}.btn-more:hover .bm-p.p3{animation-delay:.7s}
.btn-more .rip{position:absolute;z-index:0;border-radius:50%;background:rgba(255,255,255,.5);pointer-events:none;translate:-50% -50%;width:12px;height:12px;animation:rip .65s ease-out forwards}
@keyframes bm-shine{0%,55%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(420%) skewX(-18deg)}}
@keyframes bm-glow{0%,100%{box-shadow:0 10px 22px rgba(194,54,111,.32),0 0 0 0 rgba(232,84,122,.38),inset 0 1px 0 rgba(255,255,255,.28)}60%{box-shadow:0 10px 22px rgba(194,54,111,.32),0 0 0 14px rgba(232,84,122,0),inset 0 1px 0 rgba(255,255,255,.28)}}
@keyframes bm-sway{0%,100%{rotate:-5deg;translate:0 0}50%{rotate:6deg;translate:2px 2px}}
@keyframes bm-spin{to{rotate:360deg}}
@keyframes bm-twinkle{50%{opacity:.45;scale:.85}}
@keyframes bm-nudge{50%{translate:4px 0}}
@keyframes bm-petal{0%{transform:translate(0,0) rotate(0);opacity:0}15%{opacity:.9}100%{transform:translate(14px,-62px) rotate(200deg);opacity:0}}

/* Các nút "Xem tất cả / Xem thêm" có sẵn (.sh a ở tiêu đề mục, .p2-btn ở khối Feedback/Blog): cùng ngôn ngữ chuyển động */
.sh a,.p2-btn{overflow:hidden;isolation:isolate}
.sh a::after,.p2-btn::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;width:50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-160%) skewX(-18deg);pointer-events:none}
.sh a{position:relative;transition:background .25s,color .25s,box-shadow .25s,transform .3s var(--ease)}
.sh a:hover{background:linear-gradient(135deg,#ef6b8f,#c2366f);transform:translateY(-2px)}
.sh a:hover::after,.p2-card:hover .p2-btn::after{animation:bm-shine 1s ease-out 1}
.sh a svg,.p2-btn svg{animation:bm-nudge 2.4s ease-in-out infinite}
.sh a:hover svg{animation:none}
.p2-btn{transition:transform .3s var(--ease),box-shadow .3s}
.p2-card:hover .p2-btn{transform:translateY(-2px);box-shadow:0 8px 18px rgba(194,54,111,.35)}
.p2-card:hover .p2-btn svg{animation:none;translate:4px 0}
.p2-btn svg{transition:translate .3s var(--ease)}

@media (max-width:767.98px){
  :root .bt-tabs{flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:-6px -16px 2px -6px;padding:6px 16px 16px 6px;scrollbar-width:none;touch-action:pan-x;-webkit-overflow-scrolling:touch}   /* đệm quanh để bóng đổ của tab không bị khung cuộn cắt vuông */
  :root .bt-ind{box-shadow:0 4px 10px rgba(232,84,122,.3)}
  :root .bt .sh .sht{flex:none;min-width:0}
  /* Tiêu đề mục dài + nút "Xem tất cả": xếp lưới 2 hàng — hàng 1: chữ nghiêng (trái) + nút (phải); hàng 2: tiêu đề + đường kẻ ngang chạy hết phần còn lại */
  :root .bt .sh{display:grid;grid-template-columns:auto minmax(24px,1fr);align-items:end;column-gap:10px;row-gap:0}
  :root .bt .sh .sht{display:contents}
  :root .bt .sh .eb{grid-row:1;grid-column:1;align-self:center}
  :root .bt .sh h4{grid-row:2;grid-column:1;font-size:clamp(18px,5.6vw,22px);white-space:nowrap}
  :root .bt .sh .sl{grid-row:2;grid-column:2;min-width:0;margin-bottom:9px}
  :root .bt .sh a{grid-row:1;grid-column:1 / -1;justify-self:end;align-self:center;margin-bottom:0;white-space:nowrap}
  :root .bt-tabs::-webkit-scrollbar{display:none}
  :root .bt-tab{flex:none;padding:8px 16px;font-size:13px}
  :root .btn-more{min-height:48px;font-size:15px;padding-left:54px}
}
@media (prefers-reduced-motion:reduce){
  .btn-more,.btn-more::after,.bm-fl,.bm-d,.bm-b,.bm-ar,.bm-p,.sh a svg,.p2-btn svg{animation:none!important}
  .btn-more:hover .bm-p{display:none}
  .bt-pane.bt-in .grid .pc,.bt-pane.bt-in .bt-meta,.bt-pane.bt-in .slide-wrap{animation:none}
  .bt-ind{transition:none}
}

/* ===== [Banner trang chủ + header liền mạch] Nền hồng tràn ngang, header cùng màu khi ở đầu trang, chữ serif, 1 nút "Xem ngay" ===== */
:root{--hh:#fde7ee}   /* màu đầu dải nền banner = màu header lúc chưa cuộn -> không thấy đường nối */

/* Logo chữ serif CHỈ ở trang chủ (khớp banner); các trang khác (danh mục, chi tiết, tìm kiếm...) giữ logo chữ đậm như cũ */
.logo{flex:none}
.logo b{white-space:nowrap}
body.page-home .logo b{font:600 28px/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.03em}
body.page-home .logo small{font-size:10px;letter-spacing:.24em;margin-top:5px}

/* Header trang chủ lúc ở đầu trang: cùng màu nền banner, không viền; cuộn xuống thì về trắng mờ như cũ (.scrolled) */
body.page-home .page:not(.fxs) .hd:not(.scrolled){background:var(--hh);border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}

/* 3 liên kết nổi bật trên header (chỉ trang chủ, chỉ máy tính): tự thu lại khi thanh danh mục rút gọn hiện ra */
.hd-hl{display:flex;align-items:center;gap:26px;margin-left:auto;flex:none;overflow:hidden;max-width:900px;white-space:nowrap;transition:max-width .5s var(--ease),opacity .3s,margin .4s var(--ease),visibility .3s}
.hd-hl a{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--tx);padding:8px 0;transition:color .2s}
.hd-hl a svg{color:var(--pk)}
.hd-hl a:hover{color:var(--pk)}
.hd.tabs-on .hd-hl{max-width:0;margin-left:0;opacity:0;visibility:hidden}
body.page-home .hd:not(.tabs-on) .sr{max-width:460px}
body.page-home .hd .sr{transition:max-width .5s var(--ease),background .3s,border-color .3s,box-shadow .3s}
@media (max-width:1099.98px){.hd-hl{display:none}}
@media (max-width:991.98px){body.page-home .hd:not(.tabs-on) .sr{max-width:none}}

/* Banner */
.hhero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--hh) 0%,#fff3f6 64%,#fff 100%)}
.fxs .hhero{background:transparent}
.hh-pt{position:absolute;top:30px;pointer-events:none}
.hh-pt.l{left:-30px}.hh-pt.r{right:-30px}
.hh-in{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:24px;min-height:500px;padding:8px max(40px,calc(50% - 560px)) 40px}
.hh-k{display:flex;align-items:center;gap:10px;margin:0 0 18px;font:500 27px/1.1 'Dancing Script',cursive;color:var(--pk)}
.hh-k svg{flex:none}
.hhero h1{margin:0;font:600 clamp(44px,5.2vw,72px)/1.04 'Cormorant Garamond',Georgia,serif;letter-spacing:-.01em;color:var(--tx);text-wrap:balance}
.hhero h1 em{font-style:italic;color:var(--pk)}
.hh-d{max-width:500px;margin:22px 0 30px;font-size:16px;line-height:1.7;color:var(--mut)}
.hh-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;isolation:isolate;min-height:52px;padding:0 32px;border-radius:999px;color:#fff;font-weight:700;font-size:15px;background:linear-gradient(135deg,#ef6b8f,#c2366f);box-shadow:0 10px 24px rgba(194,54,111,.3);transition:transform .35s var(--ease),box-shadow .35s}
.hh-btn::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;width:46%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-160%) skewX(-18deg);animation:bm-shine 3.6s ease-in-out 1.2s infinite;pointer-events:none}
.hh-btn svg{animation:bm-nudge 2.2s ease-in-out infinite;transition:translate .3s var(--ease)}
.hh-btn:hover{color:#fff;transform:translateY(-3px);box-shadow:0 16px 30px rgba(194,54,111,.4)}
.hh-btn:hover svg{animation:none;translate:5px 0}
.hh-img{position:relative;display:flex;justify-content:center;align-items:flex-end;height:500px}
.hh-tbl{position:absolute;left:6%;right:6%;bottom:0;height:90px;border-radius:50%;background:rgba(255,255,255,.8)}
.hh-img img{position:relative;display:block;height:500px;width:auto;max-width:100%;object-fit:contain;mix-blend-mode:multiply;animation:bob 6s ease-in-out infinite}   /* nền trắng của ảnh hòa vào nền hồng nhờ multiply */
/* Chữ hiện lần lượt khi tải trang */
.js .hh-txt>*{animation:hh-up .8s var(--ease) backwards}
.js .hh-txt>:nth-child(2){animation-delay:.08s}.js .hh-txt>:nth-child(3){animation-delay:.16s}.js .hh-txt>:nth-child(4){animation-delay:.24s}
/* Ảnh hoa: hiệu ứng vào đặt trên CHÍNH thẻ <img>, KHÔNG đặt trên khung .hh-img — khung có animation (opacity/transform) sẽ tạo "nhóm hòa trộn" riêng,
   khiến mix-blend-mode:multiply không còn trộn với nền hồng => hiện ô trắng vuông quanh ảnh trong lúc trang vừa tải. */
.js .hh-img img{animation:hh-fade 1s var(--ease) .1s backwards,bob 6s ease-in-out infinite}
@keyframes hh-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes hh-fade{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

@media (max-width:991.98px){
  .hh-in{min-height:0;padding-bottom:28px}
  .hh-img,.hh-img img{height:400px}
}
/* Mobile: chữ và ảnh CHUNG 1 HÀNG (chữ trái, ảnh phải) — bỏ đoạn mô tả dài cho gọn, dễ nhìn */
@media (max-width:767.98px){
  :root body.page-home .logo b{font-size:22px}
  body.page-home .logo small{font-size:8.5px}
  :root .hh-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:4px;min-height:0;padding:10px 12px 26px 20px}
  :root .hh-k{display:block;font-size:17px;line-height:1.2;margin:0 0 10px}   /* chữ xuống dòng tự nhiên, trái tim nằm ngay cuối chữ */
  :root .hh-k svg{display:inline;vertical-align:-2px;width:15px;height:15px;margin-left:2px}
  :root .hhero h1{font-size:clamp(25px,7.4vw,32px);line-height:1.08}
  :root .hh-d{display:none}
  :root .hh-btn{min-height:44px;margin-top:18px;padding:0 22px;font-size:13.5px;gap:8px}
  :root .hh-btn svg{width:16px;height:16px}
  :root .hh-img{height:auto;align-self:center}
  :root .hh-img img{width:100%;height:auto;max-width:210px}
  :root .hh-tbl{height:36px;left:0;right:0}
  .hh-pt{opacity:.7;top:10px}
}
@media (prefers-reduced-motion:reduce){
  .hh-btn::after,.hh-btn svg,.hh-img img{animation:none!important}
  .js .hh-txt>*,.js .hh-img img{animation:none}
}

/* ===== [Trang chủ] Ô tìm kiếm + logo đồng bộ tông hồng, icon có hiệu ứng ===== */
/* Ô tìm kiếm: kính mờ trắng, viền hồng, chữ màu logo; nút gửi gradient + quầng nhịp thở */
body.page-home .sr{background:rgba(255,255,255,.88);border:1.5px solid #f4c3d2;box-shadow:0 6px 18px rgba(232,84,122,.12)}
body.page-home .sr:hover{border-color:#ec9bb4;box-shadow:0 8px 22px rgba(232,84,122,.18)}
body.page-home .sr:focus-within{background:#fff;border-color:var(--pk);box-shadow:0 0 0 4px rgba(232,84,122,.16),0 10px 24px rgba(232,84,122,.18)}
body.page-home .sr>svg{color:var(--pk);animation:sr-wiggle 5s ease-in-out infinite}
body.page-home .sr:hover>svg{animation:none;transform:scale(1.12) rotate(-12deg)}
body.page-home .sr input{color:var(--tx)}
body.page-home .sr input::placeholder{color:#b07a92}
body.page-home .sr .go{position:relative;background:linear-gradient(135deg,#ef6b8f,#c2366f);animation:glow 2.8s ease-out infinite}
body.page-home .sr .go svg{animation:bm-nudge 2s ease-in-out infinite}
body.page-home .sr .go:hover{animation:none}
body.page-home .sr .go:hover svg{animation:none;translate:2px 0}
@keyframes sr-wiggle{0%,88%,100%{transform:none}92%{transform:scale(1.12) rotate(-14deg)}96%{transform:scale(1.12) rotate(10deg)}}

/* Logo: HOA LAN chuyển sắc mận -> hồng đậm, TÁC PHẨM hồng đậm (cùng tông tiêu đề banner và nút) */
body.page-home .logo b{color:#6a3350;background:linear-gradient(90deg,#6a3350 35%,#c2366f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.page-home .logo small{color:#c2366f}
body.page-home .logo .lg{border-color:#f4c3d2;box-shadow:0 4px 12px rgba(232,84,122,.22)}

/* 3 liên kết trên header: icon trong vòng tròn trắng, mỗi icon một chuyển động riêng; rê chuột thì vòng chuyển hồng + gợn sóng */
.hd-hl{padding:12px 10px;margin-top:-12px;margin-bottom:-12px;gap:22px}   /* đệm để vòng tròn nhấc lên/gợn sóng không bị cắt */
.hd.tabs-on .hd-hl{padding-left:0;padding-right:0}
.hd-hl a{gap:10px;padding:0}
.hl-ic{position:relative;flex:none;width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--pk);box-shadow:0 3px 10px rgba(232,84,122,.2);transition:background .3s,color .3s,transform .35s var(--ease),box-shadow .3s}
.hl-ic svg{width:20px;height:20px}
.hl-ic::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--pk);opacity:0}
.hd-hl a svg{color:inherit}
.hd-hl a:hover .hl-ic,.hd-hl a:focus-visible .hl-ic{background:linear-gradient(135deg,#ef6b8f,#c2366f);color:#fff;transform:translateY(-3px) scale(1.08);box-shadow:0 10px 20px rgba(194,54,111,.38)}
.hd-hl a:hover .hl-ic::after{animation:hl-ring .9s ease-out infinite}
.hl-t{position:relative}
.hl-t::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:var(--pk);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.hd-hl a:hover .hl-t::after{transform:scaleX(1)}
.hl-leaf svg{transform-origin:50% 90%;animation:hl-sway 3.2s ease-in-out infinite}
.hl-truck svg{animation:hl-drive 2.4s ease-in-out infinite .3s}
.hl-heart svg{animation:beat 1.8s ease-in-out infinite .6s}
.hd-hl a:hover .hl-ic svg{animation-duration:.8s}
@keyframes hl-sway{0%,100%{rotate:-10deg}50%{rotate:10deg}}
@keyframes hl-drive{0%,100%{translate:-2px 0}50%{translate:2px -1.5px}}
@keyframes hl-ring{0%{opacity:.75;transform:scale(.85)}100%{opacity:0;transform:scale(1.55)}}
/* Màn vừa (1100–1279px): thu gọn khoảng cách + cỡ chữ để ô tìm kiếm vẫn đủ rộng */
@media (min-width:1100px) and (max-width:1279.98px){
  .hd-hl{gap:14px}
  .hd-hl a{gap:8px;font-size:13px}
  .hl-ic{width:32px;height:32px}.hl-ic svg{width:18px;height:18px}
}

/* Trái tim ở dòng chữ viết tay của banner: đập nhẹ + quầng sáng */
.hh-heart{display:inline-flex;color:var(--pk);animation:beat 1.8s ease-in-out infinite}
.hh-heart svg{filter:drop-shadow(0 2px 6px rgba(232,84,122,.4))}
/* Cánh hoa nền trôi nhẹ */
.hh-pt{animation:hh-float 9s ease-in-out infinite alternate}
.hh-pt.r{animation-delay:-4.5s}
@keyframes hh-float{from{transform:translateY(0) rotate(0)}to{transform:translateY(16px) rotate(3deg)}}

@media (max-width:767.98px){
  :root .hh-heart{display:inline-block;vertical-align:-3px}
}
@media (prefers-reduced-motion:reduce){
  body.page-home .sr>svg,body.page-home .sr .go,body.page-home .sr .go svg,.hl-leaf svg,.hl-truck svg,.hl-heart svg,.hh-heart,.hh-pt,.hd-hl a:hover .hl-ic::after{animation:none!important}
}

/* ===== [Header] Ảnh nhỏ của 3 tab danh mục = ĐÚNG 3 ảnh của thẻ "Chọn mẫu ..." bên dưới (lan, bó hoa, giỏ trái cây) =====
   Chỉ dùng CSS (nhận diện tab qua data-tab, ảnh lấy ../img/gp-*.jpg cùng ảnh của thẻ) nên dán được vào cả bản v1 lẫn v2, không cần sửa PHP.
   Danh mục khác (admin thêm sau) giữ nguyên ảnh nhỏ cũ. Viền/màu chip theo tông của từng thẻ: hồng / xanh lá / vàng. */
.hdt{--tc:var(--pk);--tl:#f7cddb}
.hdt[data-tab="hoa-lan"]{--pic:url(../img/gp-hoa-lan.jpg);--pz:112%;--pp:100% 69%}
.hdt[data-tab="hoa-tuoi"]{--tc:#1f8a4c;--tl:#c7e8d0;--tb:#e6f5ea;--pic:url(../img/gp-hoa-tuoi.jpg);--pz:112%;--pp:41% 78%}
.hdt[data-tab="gio-trai-cay"]{--tc:#b5700c;--tl:#f6ddb3;--tb:#fff1de;--pic:url(../img/gp-gio-trai-cay.jpg);--pz:112%;--pp:41% 78%}
.hdt{--tb:#fdeef2;background:#fff;border-color:var(--tl);color:var(--tc)}
.hdt[data-tab="hoa-tuoi"]{--tb:#e6f5ea}
.hdt[data-tab="gio-trai-cay"]{--tb:#fff1de}
:is(.hdt[data-tab="hoa-lan"],.hdt[data-tab="hoa-tuoi"],.hdt[data-tab="gio-trai-cay"]) img{display:none}
:is(.hdt[data-tab="hoa-lan"],.hdt[data-tab="hoa-tuoi"],.hdt[data-tab="gio-trai-cay"])::before{content:"";flex:none;width:30px;height:30px;border-radius:50%;background-color:#fff;background-image:var(--pic);background-repeat:no-repeat;background-size:var(--pz);background-position:var(--pp);box-shadow:inset 0 0 0 1.5px var(--tl);transition:transform .4s var(--ease)}
.hdt:hover{border-color:var(--tc);background:var(--tb);color:var(--tc)}
.hdt:hover::before{transform:rotate(-8deg) scale(1.1)}
.hdt.on{background:var(--tc);border-color:var(--tc);color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--tc) 38%,transparent)}
.hdt.on::before{box-shadow:0 0 0 2px rgba(255,255,255,.55)}
@media (max-width:767.98px){
  :root .hdt::before{width:24px;height:24px}
}
@media (prefers-reduced-motion:reduce){.hdt::before{transition:none}.hdt:hover::before{transform:none}}