.lhb{--lhb-red:#e10600;--lhb-gold:#ffc400;--lhb-ink:#1a1a1a;--lhb-muted:#6b6b6b;--lhb-line:#ececec;--lhb-r:14px;font-family:'Kanit',system-ui,-apple-system,sans-serif;color:var(--lhb-ink);line-height:1.55;font-size:15px}
.lhb *,.lhb *::before,.lhb *::after{box-sizing:border-box}
.lhb h1,.lhb h2,.lhb h3{font-family:inherit;letter-spacing:0}
.lhb img{max-width:100%}
.lhb .lhb-sec{margin:0 0 36px}

/* head */
.lhb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.lhb-head h2{margin:0;font-size:clamp(20px,2.6vw,28px);font-weight:600;display:flex;align-items:center;gap:10px;color:var(--lhb-ink);line-height:1.25}
.lhb-head p{margin:2px 0 0;color:var(--lhb-muted);font-size:14px}
.lhb-head-ico{font-size:1.05em;width:1.25em;height:1.25em;object-fit:contain;display:inline-grid;place-items:center;color:var(--lhb-red)}

/* buttons */
.lhb-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--lhb-red);background:linear-gradient(180deg,var(--lhb-red),color-mix(in srgb,var(--lhb-red) 72%,#000));color:#fff!important;text-decoration:none!important;font-weight:600;padding:10px 18px;border-radius:8px;border:0;line-height:1.2;transition:filter .15s,transform .15s;white-space:nowrap}
.lhb-btn:hover{filter:brightness(1.12)}
.lhb-btn:active{transform:translateY(1px)}
.lhb-btn:focus-visible{outline:3px solid var(--lhb-gold);outline-offset:2px}
.lhb-btn-pill{border-radius:999px;padding:9px 22px;font-size:14px}
.lhb-btn-sm{padding:7px 14px;font-size:13px;border-radius:6px}
.lhb-btn-out{background:#fff;color:var(--lhb-red)!important;border:1.5px solid var(--lhb-red)}
.lhb-btn-block{display:flex;width:100%}
.lhb-btn-lg{padding:15px 20px;font-size:18px;border-radius:12px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}

/* stars */
.lhb-rate{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.lhb-stars{position:relative;display:inline-block;color:#d9d9d9;letter-spacing:1px;line-height:1}
.lhb-stars i{font-style:normal}
.lhb-stars::before{content:'★★★★★';position:absolute;inset:0 auto 0 0;width:var(--r);overflow:hidden;color:var(--lhb-gold);white-space:nowrap}
.lhb-score{font-weight:600}

/* badges */
.lhb-badge{display:inline-block;font-size:12px;padding:2px 10px;border-radius:6px;color:#fff;background:var(--lhb-red);font-weight:500;line-height:1.6;white-space:nowrap}
.lhb .c-red{background:var(--lhb-red)}.lhb .c-gold{background:#f0a500}.lhb .c-blue{background:#1d6fe0}.lhb .c-green{background:#1fa64a}.lhb .c-dark{background:#222}

/* logo */
.lhb-logo{max-height:56px;width:auto;object-fit:contain}
.lhb-logo-txt{display:inline-block;background:linear-gradient(180deg,#2a2a2a,#000);color:var(--lhb-gold);font-weight:800;font-style:italic;font-size:22px;padding:8px 18px;border-radius:8px;border:1px solid #444;line-height:1.2;max-height:none}

/* hero */
.lhb .lhb-hero{border-radius:var(--lhb-r);overflow:hidden;background-color:#120000;background-image:radial-gradient(circle at 78% 35%,#9b0000 0,#3a0000 45%,#0c0c0c 80%);background-size:cover;background-position:center;color:#fff;padding:clamp(26px,5vw,56px)}
.lhb-hero-in{display:grid;grid-template-columns:1.45fr 1fr;gap:24px;align-items:center}
.lhb-hero-in.no-img{grid-template-columns:1fr}
.lhb-hero h1{font-size:clamp(28px,5vw,54px);line-height:1.12;margin:0 0 14px;font-weight:800;font-style:italic;color:#fff;text-shadow:0 3px 14px rgba(0,0,0,.55)}
.lhb-hero h1 span{display:block;font-size:.82em}
.lhb-hero p{color:#eee;margin:0 0 20px;max-width:62ch}
.lhb-search{display:flex;background:#fff;border-radius:10px;overflow:hidden;max-width:580px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.lhb-search input{flex:1;border:0!important;padding:14px 16px;font:inherit;color:#222;min-width:0;outline:0;background:#fff;box-shadow:none!important;margin:0}
.lhb-search button{background:var(--lhb-red);border:0;color:#fff;width:60px;cursor:pointer;display:grid;place-items:center;padding:0}
.lhb-feats{display:flex;flex-wrap:wrap;gap:16px 30px;margin:24px 0 0;padding:0;list-style:none}
.lhb-feats li{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.3;margin:0}
.lhb-feats .lhb-ico{font-size:30px;width:38px;height:38px;object-fit:contain;display:inline-grid;place-items:center}
.lhb-feats b{display:block;font-weight:500}
.lhb-hero-img img{width:100%;height:auto;display:block}
.lhb .lhb-hero.is-compact{padding:28px clamp(20px,4vw,40px)}
.lhb-hero.is-compact h1{font-size:clamp(24px,3.6vw,40px);margin-bottom:6px}
.lhb-hero.is-compact .lhb-hero-img img{max-height:150px;width:auto;margin-left:auto}

/* cards */
.lhb-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.lhb-card{position:relative;background:#fff;border:1px solid var(--lhb-line);border-radius:var(--lhb-r);padding:16px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.lhb-card-no{position:absolute;top:10px;left:10px;width:24px;height:24px;border-radius:6px;background:var(--lhb-gold);color:#3b2a00;font-weight:600;display:grid;place-items:center;font-size:13px}
.lhb-card-logo{min-height:56px;display:flex;align-items:center;justify-content:center}
.lhb-checks{list-style:none;margin:0;padding:0;text-align:left;font-size:14px;align-self:stretch}
.lhb-checks li{position:relative;padding-left:26px;margin:6px 0}
.lhb-checks li::before{content:'✓';position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:#1fa64a;color:#fff;font-size:11px;display:grid;place-items:center;font-weight:700}
.lhb-card .lhb-btn{margin-top:auto}

/* box + table */
.lhb .lhb-box{background:#fff;border:1px solid var(--lhb-line);border-radius:var(--lhb-r);padding:20px}
.lhb-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.lhb .lhb-table{width:100%;border-collapse:collapse;min-width:780px;font-size:14px;margin:0;border:0}
.lhb-table th{background:#f6f6f6;font-weight:500;padding:12px 8px;text-align:center;border:0;color:#333;white-space:nowrap}
.lhb-table td{padding:10px 8px;text-align:center;border:0;border-top:1px solid var(--lhb-line);vertical-align:middle;background:#fff}
.lhb-table td.lhb-name{font-weight:600;color:var(--lhb-red);white-space:nowrap}
.lhb-table .lhb-logo{max-height:30px}
.lhb-flags{font-size:18px;letter-spacing:2px;white-space:nowrap}
.lhb-num{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;background:#eee;color:#555;font-weight:600;font-size:14px;flex:none}
.lhb .lhb-num.n1{background:#f5b400;color:#fff}.lhb .lhb-num.n2{background:#9aa3ad;color:#fff}.lhb .lhb-num.n3{background:#c4692b;color:#fff}
.lhb-yes{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#1fa64a;color:#fff;font-size:13px;font-weight:700}
.lhb-no{color:#bbb}

/* ranking */
.lhb-rank-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--lhb-line);border-radius:12px;margin-bottom:10px;background:#fff}
.lhb-rank-logo{width:120px;flex:none;display:flex;align-items:center}
.lhb-rank-logo .lhb-logo{max-height:48px}
.lhb-rank-logo .lhb-logo-txt{font-size:16px;padding:8px 12px}
.lhb-rank-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.lhb-rank-info small{color:var(--lhb-muted);font-size:13px}

/* categories */
.lhb-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.lhb-cat{background:#fff;border:1px solid var(--lhb-line);border-radius:12px;padding:18px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.lhb-cat .lhb-ico{font-size:42px;width:54px;height:54px;object-fit:contain;display:grid;place-items:center;line-height:1}
.lhb-cat h3{font-size:15px;margin:0;font-weight:600}

/* review head */
.lhb .lhb-review{background-color:#0c0000;background-image:radial-gradient(circle at 80% 20%,#8a0000,#250000 55%,#050505);background-size:cover;background-position:center;color:#fff;border-radius:var(--lhb-r);padding:clamp(20px,4vw,32px)}
.lhb-review-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.lhb-review-top img{max-height:96px;width:auto}
.lhb-review h1{margin:0;font-size:clamp(34px,6vw,64px);font-weight:800;font-style:italic;color:var(--lhb-gold);line-height:1;text-shadow:0 3px 0 rgba(90,50,0,.9),0 8px 20px rgba(0,0,0,.6)}
.lhb-review-top p{margin:6px 0 0;font-size:clamp(15px,2vw,19px);font-style:italic}
.lhb-scoreline{display:flex;align-items:center;gap:12px;margin:18px 0 12px;flex-wrap:wrap}
.lhb-scorebig{font-size:32px;font-weight:600;line-height:1}
.lhb-scoreline .lhb-stars{font-size:22px}
.lhb-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.lhb-pills span{padding:5px 14px;border-radius:6px;font-size:13px;font-weight:500;color:#fff;background:#1fa64a}
.lhb-pills span:nth-child(4n+2){background:#f0b400;color:#2b1d00}
.lhb-pills span:nth-child(4n+3){background:#1d6fe0}
.lhb-pills span:nth-child(4n+4){background:#ef7d00}

/* info */
.lhb-info-row{display:grid;grid-template-columns:28px minmax(110px,180px) 1fr;gap:10px;padding:11px 4px;border-bottom:1px solid var(--lhb-line);align-items:center;font-size:14px}
.lhb-info-row .lhb-ico{color:var(--lhb-red);width:22px;height:22px;object-fit:contain;display:grid;place-items:center}
.lhb-info-v{color:#333}

/* highlights */
.lhb .lhb-hl{background:linear-gradient(135deg,#fff6f6,#ffe1e1);border-radius:var(--lhb-r);padding:22px;display:grid;grid-template-columns:1fr 40%;gap:16px;align-items:center}
.lhb-hl.no-img{grid-template-columns:1fr}
.lhb-hl ul{list-style:none;margin:0;padding:0}
.lhb-hl li{position:relative;padding-left:30px;margin:11px 0}
.lhb-hl li::before{content:'✓';position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--lhb-red);color:#fff;font-size:12px;display:grid;place-items:center;font-weight:700}
.lhb-hl>img{width:100%;height:auto}

/* icon grid */
.lhb-igrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:18px;text-align:center}
.lhb-igrid .lhb-ico{width:62px;height:62px;border-radius:50%;background:#ffeded;display:inline-grid;place-items:center;font-size:28px;margin-bottom:8px;color:var(--lhb-red);object-fit:contain;padding:12px}
.lhb-igrid h3{font-size:14px;margin:0 0 2px;font-weight:600}
.lhb-igrid p{font-size:12.5px;color:var(--lhb-muted);margin:0}

/* steps */
.lhb .lhb-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;counter-reset:lhbs;list-style:none;margin:0;padding:0}
.lhb-steps li{text-align:center;position:relative;margin:0}
.lhb-steps li::before{counter-increment:lhbs;content:counter(lhbs);width:34px;height:34px;border-radius:50%;background:var(--lhb-red);color:#fff;display:grid;place-items:center;margin:0 auto 8px;font-weight:600}
.lhb-steps h3{font-size:14.5px;margin:0 0 2px;font-weight:600}
.lhb-steps p{font-size:13px;color:var(--lhb-muted);margin:0}

/* faq */
.lhb-faq details{border-bottom:1px solid var(--lhb-line);padding:12px 4px}
.lhb-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:500}
.lhb-faq summary::-webkit-details-marker{display:none}
.lhb-faq summary span::before{content:'?';display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--lhb-red);color:var(--lhb-red);font-size:11px;margin-right:8px;vertical-align:1px}
.lhb-faq summary::after{content:'+';font-size:22px;color:#999;line-height:1}
.lhb-faq details[open] summary::after{content:'−'}
.lhb-faq-a{padding:8px 0 4px 26px;color:#555}

/* posts */
.lhb-posts{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:16px}
.lhb-post{background:#fff;border:1px solid var(--lhb-line);border-radius:12px;overflow:hidden;text-decoration:none!important;color:inherit!important;display:flex;flex-direction:column;min-width:0}
.lhb-post:hover h3{color:var(--lhb-red)}
.lhb-post-img{display:block;overflow:hidden;flex:none}
.lhb-post-img img,.lhb-post-img .lhb-noimg{width:100%;aspect-ratio:var(--ratio,16/10);object-fit:cover;display:block;height:auto;background:#eee;transition:transform .3s}
.lhb-post:hover .lhb-post-img img{transform:scale(1.04)}
.lhb-post-body{display:flex;flex-direction:column;flex:1;gap:4px;padding:10px 12px 12px;min-width:0}
.lhb-post h3{font-size:15px;margin:0;line-height:1.45;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lhb-post p{font-size:13px;color:var(--lhb-muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lhb-post time{font-size:12px;color:#888;margin-top:auto;padding-top:2px}
/* mini */
.lhb-pl-mini{gap:10px}
.lhb-pl-mini .lhb-post{border-radius:10px}
.lhb-pl-mini .lhb-post-body{padding:7px 9px 9px;gap:2px}
.lhb-pl-mini .lhb-post h3{font-size:13px;line-height:1.4}
.lhb-pl-mini .lhb-post time{font-size:11px}
/* list + featured rows */
.lhb-pl-list{gap:12px}
.lhb-pl-list .lhb-post,.lhb-post-row{flex-direction:row;align-items:center;gap:0}
.lhb-pl-list .lhb-post-img,.lhb-post-row .lhb-post-img{width:130px;align-self:stretch}
.lhb-pl-list .lhb-post-img img,.lhb-pl-list .lhb-post-img .lhb-noimg,.lhb-post-row .lhb-post-img img,.lhb-post-row .lhb-post-img .lhb-noimg{height:100%;min-height:82px;aspect-ratio:auto}
.lhb-pl-list .lhb-post h3,.lhb-post-row h3{font-size:14px}
/* text */
.lhb-pl-text{gap:0 28px}
.lhb-pl-text .lhb-post{flex-direction:row;align-items:center;gap:10px;border:0;border-bottom:1px solid var(--lhb-line);border-radius:0;padding:11px 2px;background:none}
.lhb-pt-no{flex:none;width:24px;height:24px;border-radius:50%;background:var(--lhb-red);color:#fff;font-size:12px;font-weight:600;display:grid;place-items:center}
.lhb-pl-text .lhb-post h3{font-size:14px;font-weight:500;flex:1;-webkit-line-clamp:1}
.lhb-pl-text .lhb-post time{margin:0;white-space:nowrap;padding:0}
/* featured */
.lhb .lhb-pl-featured{grid-template-columns:1.25fr 1fr}
.lhb-pf-main h3{font-size:19px}
.lhb-pf-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.lhb-pf-side .lhb-post-row{flex:1}

/* cta */
.lhb .lhb-cta{background:var(--lhb-red);background:linear-gradient(120deg,var(--lhb-red),color-mix(in srgb,var(--lhb-red) 55%,#000));color:#fff;border-radius:var(--lhb-r);padding:24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.lhb-cta .lhb-ico{font-size:40px;width:52px;height:52px;object-fit:contain;display:grid;place-items:center}
.lhb-cta-txt{flex:1;min-width:200px}
.lhb-cta h3{color:#fff;margin:0;font-size:22px;font-weight:600}
.lhb-cta p{margin:2px 0 0;opacity:.9}
.lhb-cta .lhb-btn{background:#fff;color:var(--lhb-red)!important}

/* fixed size (hero / review) */
.lhb .lhb-hero.has-h,.lhb .lhb-review.has-h{height:var(--lhb-h);display:flex;align-items:center;overflow:hidden}
.lhb .has-h>.lhb-hero-in,.lhb .has-h>.lhb-review-in{width:100%;max-height:100%}
.lhb .lhb-hero.has-h .lhb-hero-img{height:100%;display:flex;align-items:center;justify-content:flex-end}
.lhb .lhb-hero.has-h .lhb-hero-img img{max-height:calc(var(--lhb-h) - 40px);width:auto;max-width:100%}
@media (max-width:782px){
  .lhb .lhb-hero.has-h:not(.has-hm),.lhb .lhb-review.has-h:not(.has-hm){height:auto;min-height:0}
  .lhb .lhb-hero.has-hm,.lhb .lhb-review.has-hm{height:var(--lhb-hm);display:flex;align-items:center;overflow:hidden}
  .lhb .lhb-hero.has-hm .lhb-hero-img{display:none}
}

/* responsive */
@media (max-width:782px){
  .lhb-hero-in{grid-template-columns:1fr}
  .lhb-hero:not(.is-compact) .lhb-hero-img{order:-1;max-width:260px;margin:0 auto}
  .lhb-hero.is-compact .lhb-hero-img{display:none}
  .lhb .lhb-hl{grid-template-columns:1fr}
  .lhb .lhb-posts{grid-template-columns:repeat(var(--mcols,2),minmax(0,1fr))}
  .lhb-pl-list .lhb-post-img,.lhb-post-row .lhb-post-img{width:105px}
  .lhb-rank-row{flex-wrap:wrap}
  .lhb-rank-info{flex-basis:calc(100% - 180px)}
  .lhb-rank-row .lhb-btn{flex:1}
  .lhb-info-row{grid-template-columns:28px 1fr}
  .lhb-info-v{grid-column:2}
}
@media (max-width:480px){
  .lhb-feats{gap:14px}
  .lhb-feats li{flex:1 1 45%}
}
@media (prefers-reduced-motion:reduce){.lhb *{transition:none!important}}

/* ---- ปรับขนาดตัวอักษร (ทำงานเฉพาะเมื่อกำหนดค่า) ---- */
.lhb-blk[style*="--lhb-fh:"] .lhb-head h2,
.lhb-blk[style*="--lhb-fh:"] .lhb-hero h1,
.lhb-blk[style*="--lhb-fh:"] .lhb-review h1,
.lhb-blk[style*="--lhb-fh:"] .lhb-cta h3{font-size:var(--lhb-fh)}
.lhb-blk[style*="--lhb-fh2:"] .lhb-hero h1 span{font-size:var(--lhb-fh2)}
.lhb-blk[style*="--lhb-fs:"] .lhb-head p,
.lhb-blk[style*="--lhb-fs:"] .lhb-hero p,
.lhb-blk[style*="--lhb-fs:"] .lhb-review-top p,
.lhb-blk[style*="--lhb-fs:"] .lhb-cta p{font-size:var(--lhb-fs)}
.lhb-blk[style*="--lhb-fi:"] .lhb-feats li,
.lhb-blk[style*="--lhb-fi:"] .lhb-pills span,
.lhb-blk[style*="--lhb-fi:"] .lhb-checks,
.lhb-blk[style*="--lhb-fi:"] .lhb-table,
.lhb-blk[style*="--lhb-fi:"] .lhb-rank-info small,
.lhb-blk[style*="--lhb-fi:"] .lhb-cat h3,
.lhb-blk[style*="--lhb-fi:"] .lhb-info-row,
.lhb-blk[style*="--lhb-fi:"] .lhb-hl li,
.lhb-blk[style*="--lhb-fi:"] .lhb-igrid h3,
.lhb-blk[style*="--lhb-fi:"] .lhb-steps h3,
.lhb-blk[style*="--lhb-fi:"] .lhb-faq summary,
.lhb-blk[style*="--lhb-fi:"] .lhb-post h3{font-size:var(--lhb-fi)}
@media (max-width:782px){
  .lhb-blk[style*="--lhb-fhm:"] .lhb-head h2,
  .lhb-blk[style*="--lhb-fhm:"] .lhb-hero h1,
  .lhb-blk[style*="--lhb-fhm:"] .lhb-review h1,
  .lhb-blk[style*="--lhb-fhm:"] .lhb-cta h3{font-size:var(--lhb-fhm)}
  .lhb-blk[style*="--lhb-fhm:"] .lhb-hero h1 span{font-size:.82em}
}