/* soizaa — ported 1:1 from the PICKORA template (Product discovery platform design). */
:root{--page:#F4F5F7;--surface:#FFFFFF;--surface2:#F7F7F8;--ink:#1E1E1E;--ink2:#444444;--muted:#737373;--line:#ECECEC;--ph1:#F4F4F4;--ph2:#EAEAEA;--hero1:#FFF6F1;--hero2:#FFF1EA;--hero3:#F7E7DD;--hph1:#F3DCCF;--hph2:#F7E5DA;--soft:#FFF0EA;--blueSoft:#EEF4FF;--blueLine:#DCE7FB;--brand:#EE4D2D;--brandHover:#D9401F;--blue:#2F6FE4;color-scheme:light}
html[data-theme="dark"]{--page:#0B0C0E;--surface:#16171A;--surface2:#1F2024;--ink:#F1F1F2;--ink2:#C8C9CD;--muted:#9C9DA3;--line:#2A2B30;--ph1:#232428;--ph2:#1C1D21;--hero1:#1C1512;--hero2:#211713;--hero3:#291B14;--hph1:#33241C;--hph2:#2A1E17;--soft:#2B1A13;--blueSoft:#131A27;--blueLine:#223049;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--page);font-family:'Noto Sans Thai','Prompt',sans-serif;color:var(--ink);transition:background .2s;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}a:hover{color:#C93A1E}
img{max-width:100%}
.ff-prompt{font-family:Prompt,sans-serif}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip-link{position:absolute;left:-999px;top:8px;z-index:100;background:var(--brand);color:#fff;padding:8px 14px;border-radius:6px}.skip-link:focus{left:8px;color:#fff}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.shell{min-height:100vh;background:var(--surface);max-width:1440px;margin:0 auto;box-shadow:0 0 0 1px var(--line)}
.wrap{max-width:1360px;margin:0 auto;padding-left:clamp(16px,3vw,32px);padding-right:clamp(16px,3vw,32px)}
.hide-scroll{scrollbar-width:none;-webkit-overflow-scrolling:touch}.hide-scroll::-webkit-scrollbar{display:none}
.ph{background:repeating-linear-gradient(135deg,var(--ph1) 0 6px,var(--ph2) 6px 12px)}
.ph-lg{background:repeating-linear-gradient(135deg,var(--ph1) 0 12px,var(--ph2) 12px 24px)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.hdr-inner{height:76px;display:flex;align-items:center;gap:clamp(16px,2.5vw,40px)}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;color:var(--ink)}.brand:hover{color:var(--ink)}
.brand-icon{position:relative;width:34px;height:36px}
.brand-icon::before{content:"";position:absolute;left:9px;top:0;width:16px;height:14px;border:3.5px solid var(--brand);border-bottom:none;border-radius:9px 9px 0 0}
.brand-icon::after{content:"";position:absolute;left:0;top:10px;width:34px;height:26px;border:3.5px solid var(--brand);border-radius:7px;box-sizing:border-box}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:Prompt;font-weight:700;font-size:clamp(21px,2.4vw,26px);letter-spacing:.5px;text-transform:uppercase}.brand-name span{color:var(--brand)}
.brand-tag{font-size:11px;color:var(--muted);margin-top:3px}
.brand-logo{max-height:40px;width:auto}
.main-nav{display:flex;gap:clamp(14px,2vw,30px);white-space:nowrap;flex-shrink:0;font-family:Prompt;font-size:15px;font-weight:500;height:100%;align-items:stretch}
.main-nav a{display:flex;align-items:center;gap:7px;color:var(--ink);border-bottom:3px solid transparent;padding-top:3px}
.main-nav a.active{color:var(--brand);border-bottom-color:var(--brand)}
.main-nav a:hover{color:var(--brand)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--brand);display:inline-block;flex-shrink:0}
.hdr-search{flex:1;min-width:0;height:42px;border:1px solid var(--line);border-radius:21px;display:flex;align-items:center;gap:10px;padding:0 16px;background:var(--surface2);position:relative}
.hdr-search input{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;font-size:14px;color:var(--ink)}
.icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;font-size:18px;color:var(--ink);padding:0}
.icon-btn:hover{border-color:var(--brand);color:var(--brand)}
.search-toggle{display:none;border:none;background:transparent}.search-toggle[aria-expanded="true"]{background:var(--surface2)}
.hdr-spacer{display:none;flex:1}
.mobile-search{display:none;padding:0 16px 12px}.mobile-search.open{display:block}
.mobile-search form{height:44px;border:1px solid var(--line);border-radius:22px;display:flex;align-items:center;gap:10px;padding:0 16px;background:var(--surface2)}
.mobile-search input{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;font-size:16px;color:var(--ink)}
.mobile-search button{flex-shrink:0;color:var(--brand);font-family:Prompt;font-weight:600;font-size:14px;padding:8px 2px;border:0;background:none;cursor:pointer}
.sub-nav{display:none;gap:24px;overflow-x:auto;padding:0 16px;white-space:nowrap;font-family:Prompt;font-size:14px;font-weight:500;border-top:1px solid var(--line)}
.sub-nav a{padding:12px 0 10px;display:flex;align-items:center;gap:6px;color:var(--ink);border-bottom:3px solid transparent}
.sub-nav a.active{color:var(--brand);border-bottom-color:var(--brand)}
.sub-nav .dot{width:7px;height:7px}
@media (max-width:1099px){.main-nav,.hdr-search{display:none}.search-toggle,.hdr-spacer{display:flex}.sub-nav{display:flex}}
@media (max-width:719px){.hdr-inner{height:60px}.brand-tag{display:none}}

/* search suggestions */
.suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.1);padding:6px;z-index:40;display:none;text-align:left}
.suggest.open{display:block}
.suggest a{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:8px;color:var(--ink);font-size:14px}
.suggest a:hover,.suggest a.active{background:var(--surface2);color:var(--brand)}
.suggest .s-type{font-size:11px;color:var(--muted);min-width:56px}
.suggest{max-height:min(70vh,520px);overflow-y:auto}
.suggest a.s-product{padding:6px 10px}
.suggest .s-thumb{width:48px;height:48px;flex-shrink:0;border-radius:6px;overflow:hidden;background:var(--surface2)}
.suggest .s-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.suggest .s-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.suggest .s-name{font-size:13.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.suggest .s-price{font-size:13px;font-weight:600;color:var(--brand)}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(90deg,var(--hero1) 0%,var(--hero2) 55%,var(--hero3) 100%);position:relative;z-index:5}
/* The photo is sized to the hero padding (no overflow:hidden on .hero, which would clip the search suggestions). */
.hero-grid{padding-top:clamp(24px,4vw,36px);padding-bottom:clamp(24px,4vw,34px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:center;min-height:268px}
.hero-copy{display:flex;flex-direction:column;gap:16px;position:relative;z-index:2}
.pill-brand{align-self:flex-start;background:var(--brand);color:#fff;font-family:Prompt;font-weight:500;font-size:13px;line-height:1.4;padding:5px 14px;border-radius:14px}
.hero h1{margin:0;font-family:Prompt;font-weight:700;font-size:clamp(28px,4.2vw,44px);line-height:1.25;letter-spacing:-.5px;text-wrap:balance}.hero h1 span{color:var(--brand)}
.hero p{margin:0;font-size:clamp(14.5px,1.6vw,17px);line-height:1.6;color:var(--ink2);max-width:560px;text-wrap:pretty}
.hero-search{display:flex;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:5px 5px 5px clamp(12px,2vw,18px);gap:10px;max-width:620px;min-width:0;min-height:54px;box-shadow:0 6px 18px rgba(238,77,45,.08);position:relative}
.hero-search input{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;font-size:16px;color:var(--ink)}
.btn-brand{background:var(--brand);color:#fff;font-family:Prompt;font-weight:600;font-size:16px;padding:12px clamp(18px,3vw,40px);border-radius:8px;white-space:nowrap;cursor:pointer;border:0}
.btn-brand:hover{background:var(--brandHover);color:#fff}
.hero-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px}
.hero-tags .lbl{color:var(--ink2);margin-right:4px;white-space:nowrap;flex-shrink:0}
.tag-chip{flex-shrink:0;white-space:nowrap;display:flex;align-items:center;height:36px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:0 14px;color:var(--ink2)}
.tag-chip:hover{border-color:var(--brand);color:var(--brand)}
.hero-art{position:relative;height:100%;min-height:240px}
.hero-photo{position:absolute;inset:calc(-1 * clamp(24px,4vw,36px)) calc(-1 * clamp(16px,3vw,32px)) calc(-1 * clamp(24px,4vw,34px)) 0;background:repeating-linear-gradient(135deg,var(--hph1) 0 10px,var(--hph2) 10px 20px);overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.hero-pills{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px}
.hero-pill{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:24px;padding:8px 18px 8px 8px;box-shadow:0 4px 14px rgba(0,0,0,.08);font-family:Prompt;font-size:13px;font-weight:500;min-width:170px}
.hero-pill span{width:28px;height:28px;border-radius:50%;background:var(--soft);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
@media (max-width:719px){.hero-grid{grid-template-columns:minmax(0,1fr);min-height:0}.hero-art{display:none}.hero-tags{flex-wrap:nowrap;overflow-x:auto;margin-right:-16px}}

/* ---------- Sections ---------- */
.section{padding-top:30px}
.sec-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin-bottom:14px}
.sec-head h2{margin:0;font-family:Prompt;font-weight:700;font-size:clamp(20px,2.4vw,24px)}
.sec-head .sub{font-size:13px;color:var(--muted)}
.sec-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
.see-all{font-size:13px;font-family:Prompt;font-weight:500;color:var(--brand);padding:10px 0}
.see-all.blue{color:var(--blue)}
.plat-tabs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.plat-tabs-head .sec-title{padding-bottom:12px}
.plat-tabs{display:flex;gap:4px;overflow-x:auto;max-width:100%}
.plat-tabs a{padding:10px 18px;white-space:nowrap;font-family:Prompt;font-weight:500;font-size:14px;display:flex;align-items:center;gap:7px;color:var(--ink);border-bottom:3px solid transparent}
.plat-tabs a.active{color:var(--brand);border-bottom-color:var(--brand)}
.plat-label{display:flex;align-items:center;gap:12px}
.plat-chip{background:var(--brand);color:#fff;font-family:Prompt;font-weight:700;font-size:14px;padding:6px 14px;border-radius:6px}
.plat-label .t{font-family:Prompt;font-weight:600;font-size:clamp(16px,2vw,18px)}

/* categories strip */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:12px}
.cat-card{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:10px;min-height:64px;background:var(--surface);color:var(--ink)}
.cat-card:hover{border-color:#F4B9A6;box-shadow:0 4px 14px rgba(0,0,0,.05);color:var(--ink)}
.cat-thumb{width:clamp(48px,6vw,72px);height:clamp(44px,5vw,56px);border-radius:6px;flex-shrink:0;overflow:hidden}
.cat-thumb img{width:100%;height:100%;object-fit:cover}
.cat-name{font-family:Prompt;font-weight:600;font-size:14px;line-height:1.35}
.cat-sub{font-size:11.5px;color:var(--muted);line-height:1.4}
.cat-all{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--soft);border-radius:10px;padding:10px;min-height:64px;text-align:center;color:var(--brand);font-family:Prompt;font-weight:600;font-size:14px}
.cat-all i{display:grid;grid-template-columns:repeat(2,10px);gap:4px}.cat-all i b{width:10px;height:10px;border:2px solid var(--brand);border-radius:3px}

/* Product card — Shopee-style vertical card, 2 per row on phones */
.p-grid,.p-grid.wide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:720px){.p-grid,.p-grid.wide{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}}
.p-card{position:relative;border:1px solid var(--line);border-radius:8px;background:var(--surface);display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .15s,border-color .15s,transform .15s}
.p-card:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(0,0,0,.08);transform:translateY(-1px)}
.badge{position:absolute;top:8px;left:8px;z-index:1;color:#fff;font-family:Prompt;font-size:11px;font-weight:500;padding:2px 8px;border-radius:4px}
.p-body{display:flex;flex-direction:column;flex:1;color:var(--ink)}
.p-body:hover{color:var(--ink)}
.p-img{position:relative;display:block;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--surface2)}
.p-img img,.p-img picture{display:block;width:100%;height:100%;object-fit:cover}
.p-info{display:flex;flex-direction:column;gap:6px;min-width:0;padding:8px 8px 0;flex:1}
.p-name{font-size:13px;line-height:1.4;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.mall{display:inline-block;vertical-align:1px;margin-right:4px;background:#D0011B;color:#fff;font-family:Prompt;font-weight:600;font-size:10px;line-height:1;padding:3px 4px;border-radius:2px}
.p-rating{display:inline-flex;align-items:center;gap:2px;font-size:11.5px;color:var(--ink2)}.stars{color:#FFA41C;letter-spacing:-1px}
.p-meta{font-size:11.5px;color:var(--muted)}.p-meta b{color:var(--ink);font-weight:600}
.p-price{font-size:13px;font-weight:600;color:var(--brand)}
.p-card .p-price{font-size:16px;font-weight:500;line-height:1.2}
.p-card .p-price small{font-size:13px}
.p-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;padding-bottom:2px}
.p-cta{display:block;text-align:center;background:var(--brand);color:#fff;font-family:Prompt;font-weight:500;font-size:13px;padding:9px 6px;border-radius:4px;margin:8px}
.p-cta:hover{background:var(--brandHover);color:#fff}
.src-note{font-size:10.5px;color:var(--muted)}
@media (max-width:719px){.p-cta{font-size:12px;padding:8px 4px;margin:6px}.p-info{padding:6px 6px 0}}

/* ---------- Articles ---------- */
.home-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px;padding-top:34px}
.a-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
.a-grid.fill{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.a-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;background:var(--surface);color:var(--ink)}
.a-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.06);color:var(--ink)}
.a-cover{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden}
.a-cover img{width:100%;height:100%;object-fit:cover}
.a-tag{position:absolute;top:10px;left:10px;color:#fff;font-family:Prompt;font-size:12px;font-weight:500;padding:2px 12px;border-radius:10px}
.a-body{padding:14px;display:flex;flex-direction:column;gap:10px;flex:1}
.a-title{font-family:Prompt;font-weight:600;font-size:15px;line-height:1.45;text-wrap:pretty;flex:1}
.a-meta{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
.compare-box{background:var(--blueSoft);border:1px solid var(--blueLine);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;align-self:start}
.compare-box .ttl{align-self:flex-start;background:var(--blue);color:#fff;font-family:Prompt;font-weight:600;font-size:15px;padding:4px 14px;border-radius:6px}
.compare-box .desc{font-size:14px;line-height:1.5}
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;align-items:start}
.vs-item{background:var(--surface);border-radius:8px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--ink)}
.vs-item:hover{color:var(--ink)}
.vs-img{width:100%;aspect-ratio:1/.85;border-radius:6px;overflow:hidden}.vs-img img{width:100%;height:100%;object-fit:cover}
.vs-name{font-size:12.5px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vs-plat{font-size:11px;font-weight:600}
.vs-badge{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;border:3px solid var(--surface);display:flex;align-items:center;justify-content:center;font-family:Prompt;font-weight:700;font-size:15px;box-shadow:0 4px 12px rgba(47,111,228,.35)}
.btn-pill{align-self:stretch;text-align:center;background:var(--brand);color:#fff;font-family:Prompt;font-weight:500;font-size:14px;padding:12px 30px;border-radius:22px}
.btn-pill:hover{background:var(--brandHover);color:#fff}

/* ---------- Listing pages ---------- */
.crumbs{display:flex;gap:10px;font-size:13px;color:var(--muted);align-items:center;flex-wrap:wrap;padding-top:14px}
.crumbs a{color:var(--muted);padding:6px 0}.crumbs a:hover{color:var(--brand)}
.crumbs .cur{color:var(--ink);min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-top:14px}
.page-head.col{flex-direction:column;gap:4px}
.page-head h1{margin:0;font-family:Prompt;font-weight:700;font-size:clamp(22px,3vw,30px)}
.page-head .count,.page-head .sub{font-size:13px;color:var(--muted)}
.clear-q{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:16px;background:var(--surface2);border:1px solid var(--line);font-size:13px;color:var(--ink2)}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-top:10px}
.chips:first-of-type{margin-top:16px}
.chip{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:0 16px;height:44px;border-radius:22px;font-family:Prompt;font-weight:500;font-size:14px;white-space:nowrap;background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.chip small{font-size:12px;opacity:.75}
.sort-row{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--muted)}
.sort-row select{height:38px;border-radius:19px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:0 12px;font:inherit;font-size:13px}
.empty{padding:48px 16px;text-align:center;color:var(--muted);font-size:14px;border:1px dashed var(--line);border-radius:10px}
.desc-block{margin-top:12px;font-size:14.5px;line-height:1.7;color:var(--ink2);max-width:900px}

/* pager */
.pager{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:28px}
.pager .row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.pg{min-width:44px;height:44px;padding:0 8px;border-radius:22px;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:Prompt;font-weight:600;font-size:14px}
.pg:hover{border-color:var(--brand);color:var(--brand)}
.pg.cur{background:var(--brand);border-color:var(--brand);color:#fff}
.pg.gap{border-color:transparent;background:transparent;color:var(--muted)}
.pg.arrow{width:44px;font-size:20px}.pg.off{opacity:.35;pointer-events:none}
.pager .info{font-size:12.5px;color:var(--muted)}

/* ranking rows */
.rank-list{display:flex;flex-direction:column;gap:10px}
.rank-row{display:grid;grid-template-columns:56px 96px minmax(0,1fr) 240px;gap:clamp(10px,2vw,18px);align-items:center;padding:clamp(12px,1.6vw,16px);border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.rank-row:hover{box-shadow:0 6px 18px rgba(0,0,0,.06)}
.rank-no{font-family:Prompt;font-weight:700;font-size:clamp(18px,2.2vw,22px);color:var(--muted);text-align:center;line-height:1}
.rank-no.top{font-size:clamp(24px,3vw,32px)}.rank-no.r1{color:#F5A623}.rank-no.r2{color:#9AA3AE}.rank-no.r3{color:#C77B4A}
.rank-img{width:100%;aspect-ratio:1/1;border-radius:8px;overflow:hidden;display:block}.rank-img img{width:100%;height:100%;object-fit:cover}
.rank-info{min-width:0;display:flex;flex-direction:column;gap:6px}
.rank-tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.plat-tag{background:var(--brand);color:#fff;font-family:Prompt;font-weight:600;font-size:11px;padding:2px 8px;border-radius:4px}
.mall-tag{background:#D0011B;color:#fff;font-family:Prompt;font-weight:600;font-size:11px;padding:2px 6px;border-radius:4px}
.rank-cat{font-size:12px;color:var(--muted)}
.rank-name{font-family:Prompt;font-weight:600;font-size:clamp(14px,1.5vw,16px);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink)}
.rank-name:hover{color:var(--brand)}
.rank-stats{display:flex;gap:6px 12px;flex-wrap:wrap;align-items:center;font-size:12.5px}
.rank-cta{display:flex;gap:8px}
.rank-cta a{flex:1;display:flex;align-items:center;justify-content:center;height:44px;padding:0 14px;border-radius:8px;background:var(--brand);color:#fff;font-family:Prompt;font-weight:500;font-size:14px;white-space:nowrap}
.rank-cta a:hover{opacity:.9;color:#fff}
.rank-note{font-size:13px;color:var(--ink2);line-height:1.6}
@media (max-width:719px){.rank-row{grid-template-columns:30px 72px minmax(0,1fr)}.rank-cta{grid-column:1/-1}}

/* article list featured */
.a-featured{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:16px;background:var(--surface);color:var(--ink)}
.a-featured:hover{box-shadow:0 6px 18px rgba(0,0,0,.06);color:var(--ink)}
.a-featured .cover{position:relative;min-height:220px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden}
.a-featured .cover img{width:100%;height:100%;object-fit:cover}
.a-featured .lbl{position:absolute;top:14px;left:14px;background:#111;color:#fff;font-family:Prompt;font-size:12px;font-weight:500;padding:3px 12px;border-radius:10px}
.a-featured .body{padding:clamp(18px,3vw,32px);display:flex;flex-direction:column;gap:12px;justify-content:center}
.a-featured .tag{align-self:flex-start;color:#fff;font-family:Prompt;font-size:12px;font-weight:500;padding:2px 12px;border-radius:10px}
.a-featured h2{margin:0;font-family:Prompt;font-weight:700;font-size:clamp(20px,2.4vw,26px);line-height:1.35;text-wrap:pretty}
.a-featured p{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink2)}
.a-featured .meta{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.a-featured .more{color:var(--brand);font-family:Prompt;font-weight:600;font-size:14px}

/* article detail */
.article{max-width:820px;margin:0 auto}
.article .head{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.article .tag{align-self:flex-start;color:#fff;font-family:Prompt;font-size:13px;font-weight:500;padding:3px 14px;border-radius:12px}
.article h1{margin:0;font-family:Prompt;font-weight:700;font-size:clamp(24px,3.6vw,36px);line-height:1.3;text-wrap:pretty}
.article .meta{font-size:13px;color:var(--muted)}
.article .cover{margin-top:20px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.article .cover img{width:100%;height:100%;object-fit:cover}
.article .lead{margin:22px 0 0;font-size:clamp(16px,1.7vw,17px);line-height:1.8;text-wrap:pretty}
.article h2.sh{margin:30px 0 12px;font-family:Prompt;font-weight:700;font-size:clamp(19px,2.2vw,22px)}
.tips{display:flex;flex-direction:column;gap:10px}
.tip{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;font-size:15.5px;line-height:1.7}
.tip span:first-child{width:28px;height:28px;border-radius:50%;background:var(--soft);color:var(--brand);display:flex;align-items:center;justify-content:center;font-family:Prompt;font-weight:700;font-size:13px}
.prose{font-size:clamp(16px,1.7vw,17px);line-height:1.8;margin-top:22px;overflow-wrap:anywhere}
.prose h2{font-family:Prompt;font-weight:700;font-size:clamp(19px,2.2vw,22px);margin:30px 0 12px;line-height:1.4}
.prose h3{font-family:Prompt;font-weight:600;font-size:18px;margin:24px 0 10px}
.prose img{height:auto;border-radius:10px}
.prose table{width:100%;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.prose th{background:var(--surface2)}
.prose blockquote{margin:16px 0;padding:10px 16px;border-left:4px solid var(--brand);background:var(--surface2);border-radius:0 8px 8px 0}
.prose iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:10px}
.prose .embed-products{margin:18px 0}
.disclosure{margin-top:22px;padding:14px 16px;border-radius:10px;background:var(--surface2);border:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--muted)}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}

/* ---------- Product detail ---------- */
.pd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(20px,4vw,44px);margin-top:12px;align-items:start}
.gallery{display:flex;flex-direction:column;gap:12px;min-width:0}
.g-main{position:relative;aspect-ratio:4/3;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:pan-y;background:var(--surface2)}
.g-main img{width:100%;height:100%;object-fit:contain}
.g-badge{position:absolute;top:16px;left:16px;color:#fff;font-family:Prompt;font-weight:500;font-size:13px;padding:4px 14px;border-radius:12px;z-index:1}
.g-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:var(--surface);box-shadow:0 2px 10px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;color:var(--ink);border:0;z-index:1}
.g-nav.prev{left:12px}.g-nav.next{right:12px}
.g-count{position:absolute;right:14px;bottom:12px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;padding:3px 10px;border-radius:10px}
.g-thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(6px,1.2vw,10px)}
.g-thumb{aspect-ratio:1/1;border-radius:8px;cursor:pointer;border:2px solid transparent;overflow:hidden;padding:0;background:var(--surface2)}
.g-thumb.active{border-color:var(--brand)}
.g-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pd-info{display:flex;flex-direction:column;gap:18px}
.pd-chips{display:flex;gap:8px;flex-wrap:wrap}
.pd-chip{background:var(--brand);color:#fff;font-family:Prompt;font-weight:600;font-size:14px;padding:4px 14px;border-radius:14px}

.pd-chip.mall{background:#D0011B;display:flex;align-items:center;gap:6px}
.pd-chip.brand{background:var(--surface2);color:var(--ink);border:1px solid var(--line)}
.pd-info h1{margin:0;font-family:Prompt;font-weight:700;font-size:clamp(22px,3vw,32px);line-height:1.3;text-wrap:pretty;overflow-wrap:anywhere}
.pd-stats{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:15px}
.pd-stats .stars{font-size:20px;white-space:nowrap}
.pd-stats .sep{width:1px;height:16px;background:var(--line)}
.pd-price{font-family:Prompt;font-weight:700;font-size:clamp(22px,2.6vw,28px);color:var(--brand)}
.pd-price small{font-family:'Noto Sans Thai';font-weight:400;font-size:12.5px;color:var(--muted);margin-left:8px}
.pd-cta{display:flex;gap:12px;margin-top:8px}
.pd-cta a{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--brand);color:#fff;font-family:Prompt;font-weight:600;font-size:clamp(16px,1.8vw,19px);height:54px;border-radius:8px}
.pd-cta a:hover{opacity:.92;color:#fff}
.pd-alt{display:flex;flex-direction:column;gap:8px}
.pd-alt a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:14px}
.info-note{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.info-note i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--muted);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;font-style:normal;flex-shrink:0}
.pd-short{font-size:15px;line-height:1.7;color:var(--ink2);margin:0}
.variations{display:flex;flex-direction:column;gap:8px;font-size:13px}
.variations .opts{display:flex;flex-wrap:wrap;gap:6px}
.variations .opt{border:1px solid var(--line);border-radius:6px;padding:3px 8px;color:var(--ink2);background:var(--surface2)}
.pd-section{max-width:900px}
.pd-section h2{margin:0 0 12px;font-family:Prompt;font-weight:700;font-size:20px}
.spec-table{width:100%;border-collapse:collapse;font-size:14px}
.spec-table th,.spec-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.spec-table th{width:34%;color:var(--muted);font-weight:500}
.spec-group{font-family:Prompt;font-weight:600;background:var(--surface2)}
.pros-cons{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px}
.pc-box{border:1px solid var(--line);border-radius:12px;padding:16px}
.pc-box h3{margin:0 0 10px;font-family:Prompt;font-size:16px}
.pc-box ul{margin:0;padding-left:20px;line-height:1.8;font-size:14.5px}
.pc-box.pro h3{color:#1F9D6B}.pc-box.con h3{color:#E5304B}
.features{margin:0;padding-left:20px;line-height:1.9;font-size:15px}
.ed-review{border:1px solid var(--blueLine);background:var(--blueSoft);border-radius:12px;padding:18px}
.ed-score{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ed-score b{font-family:Prompt;font-size:30px}
.ed-method{font-size:12.5px;color:var(--muted);margin-top:10px}
.pd-meta{font-size:12.5px;color:var(--muted);display:flex;gap:6px 16px;flex-wrap:wrap}
.sticky-cta{display:none}
@media (max-width:719px){
  .pd-cta.desk{display:none}
  .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.06);padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:10px}
  .sticky-cta a{flex:1;display:flex;align-items:center;justify-content:center;background:var(--brand);color:#fff;font-family:Prompt;font-weight:600;font-size:16px;height:52px;border-radius:10px}
  .sticky-pad{height:76px}
}

/* ---------- Trust strip & footer ---------- */
.trust{margin-top:36px;background:var(--blueSoft)}
.trust-grid{padding-top:18px;padding-bottom:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.trust-item{display:flex;align-items:center;gap:14px}
.trust-item span{width:40px;height:40px;border-radius:50%;background:var(--surface);color:var(--blue);display:flex;align-items:center;justify-content:center;font-family:Prompt;font-weight:700;font-size:16px;flex-shrink:0}
.trust-item b{display:block;font-family:Prompt;font-weight:600;font-size:14px}
.trust-item small{font-size:12px;color:var(--muted)}
.disclosure-bar{background:var(--surface);border-bottom:1px solid var(--line)}
.disclosure-bar div{padding-top:10px;padding-bottom:10px;font-size:12px;color:var(--muted);text-align:center}
.disclosure-bar a{color:var(--blue)}
.site-footer{padding-top:28px;padding-bottom:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:28px}
.f-brand{font-family:Prompt;font-weight:700;font-size:26px;text-transform:uppercase}.f-brand span{color:var(--brand)}
.f-tag{font-size:12px;color:var(--muted);margin-top:4px}
.f-col{display:flex;flex-direction:column;font-size:13px;color:var(--ink2)}
.f-col h3{font-family:Prompt;font-weight:600;font-size:13px;color:var(--ink);margin:0 0 4px}
.f-col a{padding:7px 0;color:var(--ink2)}.f-col a:hover{color:var(--brand)}
.f-news{display:flex;flex-direction:column;gap:10px}
.f-news h3{font-family:Prompt;font-weight:600;font-size:13px;margin:0}
.f-news .row{display:flex;gap:8px}
.f-news input[type=email]{flex:1;min-width:0;height:44px;border:1px solid var(--line);border-radius:8px;padding:0 12px;font:inherit;font-size:16px;background:var(--surface);color:var(--ink);outline:none}
.f-news button{flex-shrink:0;background:var(--brand);color:#fff;font-family:Prompt;font-weight:500;font-size:14px;padding:0 20px;height:44px;border-radius:8px;border:0;cursor:pointer}
.f-news label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;cursor:pointer;min-height:32px}
.f-news input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:var(--brand)}
.f-news .msg{font-size:12.5px}
.hp{position:absolute;left:-5000px}
.socials{display:flex;gap:8px;flex-wrap:wrap}
.socials a{width:40px;height:40px;border-radius:10px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.socials .fb{background:#1877F2;border-radius:50%}.socials .yt{background:#FF0000;font-size:11px}.socials .ig{background:#D62976;font-size:13px}
.copy{font-size:11.5px;color:var(--muted)}

/* consent banner */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;max-width:720px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.15);padding:16px 18px;display:none;gap:12px;flex-wrap:wrap;align-items:center;font-size:13.5px;line-height:1.6}
.consent.show{display:flex}
.consent p{margin:0;flex:1 1 320px}
.consent .btns{display:flex;gap:8px}
.consent button{height:40px;padding:0 16px;border-radius:20px;font-family:Prompt;font-weight:500;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.consent button.ok{background:var(--brand);color:#fff;border-color:var(--brand)}

.err-page{text-align:center;padding:80px 16px}
.err-page h1{font-family:Prompt;font-size:64px;margin:0;color:var(--brand)}
.err-page p{color:var(--muted)}

/* Shopee logo next to "Shopee" labels */
.sp-ico{display:inline-block;flex-shrink:0;vertical-align:-3px}
.main-nav a .sp-ico,.sub-nav a .sp-ico{margin-right:1px}
.plat-chip,.pd-chip,.plat-tag,.vs-plat{display:inline-flex;align-items:center;gap:5px}
.p-cta,.rank-cta a,.pd-cta a,.sticky-cta a{display:flex;align-items:center;justify-content:center;gap:6px}
.pd-alt a span:first-child{display:inline-flex;align-items:center;gap:4px}
.prose td .sp-ico{margin-right:4px}