/* ---------- Thanh điều khiển mobile ---------- */
.mburger{display:none;font-size:22px;cursor:pointer;line-height:1;padding:4px 6px}
.mobile .mburger{display:inline-block}
.mobile .sec[data-type=header]{position:sticky;top:0;z-index:40;background:#fff;box-shadow:0 1px 0 var(--line)}
.mobile .sec[data-type=header] .row{flex-wrap:nowrap;gap:10px}
.mobile .sec[data-type=header] .ph{width:110px!important;height:32px!important}
.sec[data-type=mnavbar] .mbar{display:none}
.mbar-note{font-size:12px;color:var(--muted);text-align:center;padding:8px}
body.shot #page:not(.mobile) .sec[data-type=mnavbar]{display:none}
.mobile .sec[data-type=mnavbar]{position:sticky;bottom:0;z-index:45;border:0}
.mobile .sec[data-type=mnavbar] .mbar-note{display:none}
.mobile .sec[data-type=mnavbar] .mbar{display:flex;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 14px rgba(0,0,0,.06);padding:5px 2px calc(4px + env(safe-area-inset-bottom,0px))}
.mtab{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:9.5px;color:#4b5866;padding:2px 0;cursor:pointer;min-width:0}
.mtab .mic svg{width:19px;height:19px}
.mtab .mic{font-style:normal;display:flex;color:#2b3846}
.mtab .ml{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mtab:first-child,.mtab:first-child .mic{color:var(--ui)}
.mtab.linked::after{display:none}
#mdrawer{position:fixed;inset:0;z-index:128;display:none}
#mdrawer.open{display:block}
#mdrawer .bg{position:absolute;inset:0;background:rgba(15,25,35,.45)}
#mdrawer .pn{position:absolute;top:0;bottom:0;width:min(320px,86vw);background:#fff;box-shadow:4px 0 20px rgba(0,0,0,.2);display:flex;flex-direction:column;animation:mdIn .22s ease-out}
@keyframes mdIn{from{transform:translateX(-30px);opacity:0}to{transform:none;opacity:1}}
#mdrawer .hd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700}
#mdrawer .hd button{border:0;background:none;font-size:20px;cursor:pointer}
#mdrawer .bd{overflow:auto;flex:1;padding:6px 0}
.md-it{border-bottom:1px solid #eef1f4}
.md-top{display:flex;justify-content:space-between;align-items:center;padding:13px 18px;font-weight:600;font-size:14.5px;cursor:pointer}
.md-top i{font-style:normal;color:var(--muted);transition:transform .2s}
.md-it.open .md-top i{transform:rotate(180deg)}
.md-sub{display:none;background:#f7f9fb;padding:4px 0}
.md-it.open .md-sub{display:block}
.md-sub a,.md-extra a{display:block;padding:9px 30px;font-size:13.5px;color:var(--ink);text-decoration:none}
.md-extra{padding:10px 0;border-top:1px solid var(--line);margin-top:6px}
.md-extra a{padding:9px 18px;color:var(--muted)}
.md-nolink{color:#c06b6b!important}
body.shot #mdrawer:not(.open){display:none!important} /* xem như khách vẫn mở được menu trượt (mục đã có link) */
/* khi xem mobile: khung giữa tự cuộn để thanh trên/dưới bám mép màn hình */
body.mview #stage{height:100vh;overflow:auto;padding:0 24px}

.mobile .sec[data-type=floating]{border:0}
.mobile .sec[data-type=floating] .small{display:none}

.mobile .float .stack .fbtn{width:38px;height:38px}
.mtab .ml{white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.2}
.sec[data-type=header] .row>.ph{cursor:pointer}
.langsel{cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.langsel:hover{color:var(--ui)}
.flag{display:inline-block;vertical-align:middle;flex:none;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
#langdd{position:fixed;z-index:131;display:none;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.15);padding:6px;min-width:190px}
#langdd.open{display:block}
#langdd button{display:flex;gap:10px;align-items:center;width:100%;border:0;background:none;padding:8px 10px;border-radius:6px;font-size:13.5px;cursor:pointer;text-align:left}
#langdd button:hover{background:#f4f6f9}
#langdd button.on{background:var(--ui-soft);font-weight:700}
#csheet{position:fixed;z-index:127;display:none}
#csheet.open{display:block}
#csheet .bg{position:fixed;inset:0;background:rgba(15,25,35,.35)}
#csheet .pn{position:fixed;bottom:62px;background:#fff;border-radius:18px;box-shadow:0 12px 30px rgba(0,0,0,.2);padding:16px 18px 14px;display:flex;gap:26px;justify-content:center}
.cs-b{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12.5px;font-weight:600;cursor:pointer;border:0;background:none}
.cs-b i{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-style:normal;font-weight:800;font-size:13px;box-shadow:0 6px 14px rgba(0,0,0,.15)}
.cs-b small{font-weight:400;color:var(--muted);font-size:11px}
#mtoast{position:fixed;left:50%;transform:translateX(-50%);bottom:120px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:20px;font-size:12.5px;z-index:140;display:none;max-width:90vw}
body.shot #langdd,body.shot #csheet,body.shot #mtoast{display:none!important}
.mdrop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
/* header luôn bám đầu trang khi cuộn (cả máy tính và mobile) */
.sec[data-type=header]{position:sticky;top:0;z-index:40;background:#fff}
/* nút nổi luôn bám màn hình, đi theo khi cuộn */
.float .lstack{position:fixed!important;left:calc(var(--pgL,0px) + 16px);bottom:16px;z-index:44}
.float .stack{position:fixed!important;right:calc(var(--pgR,0px) + 16px);bottom:16px;z-index:44}
.mobile .float .lstack,.mobile .float .stack{bottom:62px}
.mobile .float .chatbtn{width:37px;height:37px}
.mobile .float .chatbtn svg{width:16px;height:16px}
.mobile .float .stack{gap:8px}

/* ô tìm kiếm trên header */
.hsearch{display:inline-flex;align-items:center;border:1.5px solid #9aa4b1;border-radius:999px;padding:0 6px 0 16px;height:40px;width:220px;flex:none;background:#fff;transition:border-color .2s,box-shadow .2s}
.hsearch:focus-within{border-color:var(--ui);box-shadow:0 0 0 3px var(--ui-soft)}
.hsearch input{border:0;outline:0;flex:1;min-width:0;font:inherit;font-size:14px;background:transparent}
.hsearch input::-webkit-search-cancel-button{display:none}
.hs-ic{font-style:normal;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;color:#2b3846;cursor:pointer}
.hs-ic:hover{background:var(--ui-soft);color:var(--ui)}
.mobile .sec[data-type=header] .hsearch{display:inline-flex;flex:1;width:auto;min-width:0;height:34px;padding:0 4px 0 12px}
.mobile .sec[data-type=header] .hsearch input{font-size:13px}
.mobile .sec[data-type=header] .hs-ic{width:26px;height:26px}
.mobile .sec[data-type=header] .row>.hlink{display:none}
.mobile .md-search{display:none}
.md-search{padding:10px 14px;border-bottom:1px solid var(--line)}
.md-search .hsearch{display:flex;width:100%}
/* nút mạng xã hội dạng viên thuốc theo màu thương hiệu */
.sbtn{width:36px!important;height:36px!important;border-radius:50%!important;padding:0;font-size:11px!important;font-weight:800;border:0!important;box-shadow:0 2px 6px rgba(0,0,0,.2);overflow:hidden}
.soc{gap:8px!important}
.sbtn.hasicon{width:40px!important;height:40px!important;padding:0;border-radius:50%!important}
/* ảnh có liên kết */
.ph[data-href]:not([data-href=""]){position:relative}
.ph[data-href]:not([data-href=""])::after{content:"🔗";position:absolute;top:6px;left:6px;font-size:11px;background:#fff;border-radius:10px;padding:1px 6px;box-shadow:0 1px 3px rgba(0,0,0,.2)}
body.shot .ph::after{display:none!important}
#phl{position:fixed;z-index:106;display:none;border:1px solid var(--ui);background:#fff;color:var(--ui);border-radius:6px;padding:3px 8px;font-size:11.5px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15)}
#phl:hover{background:var(--ui-soft)}
body.shot #phl{display:none!important}
.bslide[data-href]:not([data-href=""])::before{content:"🔗 " attr(data-href);position:absolute;right:14px;top:12px;z-index:3;font-size:11px;background:#fff;border-radius:10px;padding:2px 8px;box-shadow:0 1px 4px rgba(0,0,0,.2);max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.shot .bslide::before{display:none!important}

/* (1)(2)(3) cỡ chữ đồng bộ */
.title{font-size:19px!important;line-height:1.3}
.mobile .title{font-size:17px!important}
.sc-side{width:240px}
.prtrack .card>.t:not(.small),.cs-slide .card>.t:not(.small),.grid .card>.t:not(.small):not(.bc-ex){font-size:13.5px!important;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rvc-b b,.nw-txt b,.ccap,.pcard2 b{font-size:14px!important}
.pkc-cap b{font-size:18px!important}
.hp-h{font-size:30px!important}
.mobile .hp-h{font-size:20px!important}
/* (7) Đánh giá nổi bật trượt ngang trên mobile */
.mobile .sec[data-type=rvcat] .sc-main .grid.g3{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:12px}
.mobile .sec[data-type=rvcat] .sc-main .grid.g3::-webkit-scrollbar{display:none}
.mobile .sec[data-type=rvcat] .rvc{flex:0 0 78%;scroll-snap-align:start}
/* (8) khối NEW trên mobile bớt khoảng trống */
.mobile .sec[data-type=newprod] .catlist{margin-top:10px!important}
/* (9) banner chính mobile: nhãn nhỏ, mũi tên xuống cạnh thanh tiến trình */
.mobile .hp-img .nw-badge{width:62px!important;height:62px!important;font-size:10px!important;top:-8px!important;right:-4px!important}
.mobile .peek .parrow{top:auto!important;bottom:14px;font-size:24px;transform:none}
.mobile .peek .parrow.l{left:calc(4% + 8px)}.mobile .peek .parrow.r{right:calc(4% + 8px)}
/* (11) mobile: bỏ nút Gọi/Zalo nổi (đã có trong nút Liên hệ) */
.mobile .float .stack{display:none!important}
/* (12) mobile: ẩn topbar, Ngôn ngữ & Tìm cửa hàng nằm trong menu ☰ */
.mobile .sec[data-type=topbar]{display:none}
.md-lang{display:flex!important;align-items:center;gap:8px;cursor:pointer}
/* logo trên nút */
.cs-b i.img{background-size:cover!important;background-position:center!important;font-size:0!important}
/* header desktop: menu luôn 1 hàng, tự thu nhỏ theo bề rộng trang (font Windows rộng hơn) */
.sec[data-type=header] .wrap{container-type:inline-size}
.sec[data-type=header] .row{flex-wrap:nowrap}
.sec[data-type=header] .menu{flex-wrap:nowrap;white-space:nowrap;min-width:0;gap:22px}
.sec[data-type=header] .menu>*{flex:none}
.sec[data-type=header] .hsearch{flex:0 1 220px;width:auto;min-width:150px}
@container (max-width:1150px){.sec[data-type=header] .menu{gap:16px;font-size:13px}.sec[data-type=header] .hsearch{flex-basis:190px}}
@container (max-width:1000px){.sec[data-type=header] .menu{gap:12px;font-size:12.5px}.sec[data-type=header] .row>.ph{width:110px!important}.sec[data-type=header] .hsearch{flex-basis:160px;min-width:130px}}
@container (max-width:880px){.sec[data-type=header] .menu{gap:9px;font-size:12px}}
@container (max-width:820px){.sec[data-type=header] .menu{flex-wrap:wrap;row-gap:6px;white-space:normal}}