:root{--blue:#1769ff;--navy:#0b1c4d;--muted:#65738d;--line:#e3e9f3;--font:"IBM Plex Sans Thai",sans-serif;--display:"Prompt",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body.lp.dash{background:#eef2f8}
body.lp.dash .lp-main{padding:0;min-height:100vh}
.lp-hero{padding:18px 0 8px;background:#eef2f8}
.lp-hero__row{display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:14px;align-items:stretch;min-height:400px}
.lp-hero__banner{position:relative;overflow:hidden;min-height:400px;padding:28px 28px 24px;border-radius:22px;background:#e8f0ff;color:#0b1c4d;box-shadow:0 16px 36px #94a3b840}
.lp-hero__bg{position:absolute;inset:0 0 0 auto;height:100%;width:auto;max-width:none;object-fit:contain;object-position:right center;pointer-events:none;z-index:0}
.lp-hero__copy{position:relative;z-index:2;max-width:46%}
.lp-hero__kicker{margin:0 0 8px;font:700 13px/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;color:#5b3dff;opacity:1}
.lp-hero h1{margin:0;font:700 clamp(36px,4.2vw,58px)/1.05 var(--display);letter-spacing:-1px;color:#0b1c4d}
.lp-hero__copy>p{margin:10px 0 18px;max-width:34em;font-size:15px;line-height:1.5;color:#475569;opacity:1}
.lp-hero__cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 22px;border-radius:999px;background:linear-gradient(180deg,#ffe56a,#f5c518);color:#3b2a00;text-decoration:none;font:700 15px var(--font);box-shadow:0 10px 20px #1a104040}
.lp-hero__cta:hover{transform:translateY(-1px)}
.lp-hero__stack{display:none}
.lp-hero__shot{position:absolute;margin:0;width:118px;height:168px;border-radius:12px;overflow:hidden;background:#c4b5fd;box-shadow:0 14px 28px #1e114a55;border:3px solid rgba(255,255,255,.35)}
.lp-hero__shot img{width:100%;height:100%;object-fit:cover}
.lp-hero__shot--0{left:8%;top:18px;transform:rotate(-11deg);z-index:1}
.lp-hero__shot--1{left:34%;top:0;transform:rotate(4deg);z-index:3}
.lp-hero__shot--2{right:4%;top:22px;transform:rotate(10deg);z-index:2}
.lp-hero__stats{display:grid;grid-template-rows:repeat(4,1fr);gap:10px;min-width:248px;min-height:400px}
.lp-stat{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;margin:0;padding:12px 12px 10px;border:0;border-radius:16px;background:#e8e4ff;color:#1e1b4b;text-align:left;cursor:pointer;min-height:0;overflow:hidden;position:relative;transition:transform .2s ease,box-shadow .2s ease}
.lp-stat--all{background:linear-gradient(180deg,#ece7ff,#dcd6ff)}
.lp-stat--free{background:linear-gradient(180deg,#e9f8ee,#d4f0dc)}
.lp-stat--premium{background:linear-gradient(180deg,#fff4cc,#fde68a)}
.lp-stat--cats{background:linear-gradient(180deg,#f3e8ff,#edd4ff)}
.lp-stat__ico{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#fff;margin-bottom:8px;color:#5b21b6}
.lp-stat--free .lp-stat__ico{color:#15803d}
.lp-stat--premium .lp-stat__ico{color:#b45309}
.lp-stat--cats .lp-stat__ico{color:#2563eb}
.lp-stat__ico svg{width:15px;height:15px}
.lp-stat b{font-size:13px;font-weight:800;line-height:1.25}
.lp-stat small{margin-top:2px;color:#64748b;font-size:11px}
.lp-stat__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left center;pointer-events:none;transform:scale(1);transition:transform .25s ease}
.lp-stat__hover{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,0);opacity:0;transition:background .2s ease,opacity .2s ease;pointer-events:none}
.lp-stat__hover>span{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.95);color:#1769ff;font:700 12px var(--font);box-shadow:0 8px 20px #0f172a2e;transform:translateY(6px);transition:transform .2s ease}
.lp-stat:hover,.lp-stat:focus-visible{transform:translateY(-2px);box-shadow:0 12px 24px #0f172a28}
.lp-stat:hover .lp-stat__photo,.lp-stat:focus-visible .lp-stat__photo{transform:scale(1.06)}
.lp-stat:hover .lp-stat__hover,.lp-stat:focus-visible .lp-stat__hover{opacity:1;background:rgba(15,23,42,.42)}
.lp-stat:hover .lp-stat__hover>span,.lp-stat:focus-visible .lp-stat__hover>span{transform:translateY(0)}
.lp-stat:focus-visible{outline:2px solid #1769ff;outline-offset:2px}
.lp-stat--photo{padding:0}
.lp-stat--all.lp-stat--photo{background:#ece7ff}
.lp-stat--free.lp-stat--photo{background:#e8f4ff}
.lp-stat--premium.lp-stat--photo{background:#fde8f0}
.lp-stat--cats.lp-stat--photo{background:#e8f8ef}
@media(max-width:980px){
  .lp-hero__row{grid-template-columns:1fr}
  .lp-hero__copy{max-width:52%}
  .lp-hero__stats{grid-template-rows:none;grid-template-columns:repeat(4,1fr);min-height:0}
}
@media(max-width:640px){
  .lp-hero__stats{grid-template-columns:1fr 1fr}
  .lp-hero__banner{padding:22px 18px}
  .lp-hero__copy{max-width:100%}
  .lp-hero__shot{width:96px;height:136px}
  .search input{min-width:0}
}
body.lp.dash .wrap{width:calc(100% - 40px);max-width:none}
body.lp.dash .hero{border-radius:0}
body.lp.dash .hero-copy{padding-left:8px}
.lp-topbar{flex-wrap:wrap}
.lp-topbar .btn.primary{white-space:nowrap;flex:0 0 auto}
.lp-top-search{margin:0}
.lp-side-cats{margin:8px 0 4px;padding:0}
.lp-side-cats>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;margin:4px 4px 8px;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#94a3b8}
.lp-side-cats>summary::-webkit-details-marker{display:none}
.lp-side-cats>summary::after{content:"▴"}
.lp-side-cats:not([open])>summary::after{content:"▾"}
.lp-side-cats__grid{display:flex;flex-direction:column;gap:4px}
.lp-side-cats__grid a{display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 8px 4px 4px;overflow:hidden;border:0;border-radius:12px;background:transparent;text-decoration:none;color:#334155;box-shadow:none;position:relative}
.lp-side-cats__grid a:hover{background:#f8fafc}
.lp-side-cats__grid a.is-active{background:#eef4ff;color:#2f5bff}
.lp-side-cats__grid a.is-active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:#2f5bff}
.lp-side-cats__grid img{width:32px;height:32px;object-fit:cover;flex:0 0 32px;border-radius:8px}
.lp-side-cats__grid .dash-ico{width:18px;height:18px;color:#64748b}
.lp-side-cats__grid .dash-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lp-side-cats__grid a.is-active .dash-ico{color:#2f5bff}
.lp-side-cats__grid b{flex:1;font-size:12px;font-weight:600;line-height:1.25;min-width:0}
.lp-side-cats__grid i{color:#94a3b8;font-style:normal;font-size:16px}.wrap{width:min(1180px,calc(100% - 48px));margin:auto}body.lp .wrap{width:calc(100% - 48px);max-width:none}a{color:inherit}.nav{position:sticky;top:0;z-index:50;background:#fffffff2;backdrop-filter:blur(15px);border-bottom:1px solid #edf1f6}.nav-in{height:68px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;white-space:nowrap}.brand>b{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(145deg,#714bff,#3f48ef);color:#fff;font:700 17px var(--display);box-shadow:0 6px 13px #5943f244}.brand>b i{font-size:9px;margin-left:-5px}.brand strong{font:700 18px var(--display)}.nav nav{display:flex;gap:4px;flex:1}.nav nav a,.login{padding:8px 12px;border-radius:20px;text-decoration:none;font-size:14px;font-weight:600}.nav nav .active{color:var(--blue);background:#eef4ff}.actions{display:flex;align-items:center;gap:9px}.lang{padding:8px 12px;border:1px solid var(--line);border-radius:20px;background:#fff;color:#536079}.user{display:flex;align-items:center;gap:7px;max-width:180px;padding:4px 10px 4px 4px;border:1px solid var(--line);border-radius:22px;text-decoration:none;font-size:12px}.user i{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#6947ff,#1769ff);color:#fff;font-style:normal}.user span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border:1px solid transparent;border-radius:10px;text-decoration:none;font:600 14px var(--font);cursor:pointer;white-space:nowrap;transition:.18s}.btn:hover{transform:translateY(-1px)}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.primary{color:#fff;background:linear-gradient(135deg,#1674ff,#1759f6);box-shadow:0 8px 18px #1767ff44}.outline{color:var(--blue);background:#fff;border-color:#8fb2ff}.big{padding:14px 25px;font-size:16px}
.hero{position:relative;padding:42px 0 28px;overflow:hidden;min-height:0;background:#eaf4ff}.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,#fff 0%,rgba(255,255,255,.88) 22%,rgba(219,236,255,.42) 62%,rgba(186,220,255,.22) 100%)}.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:right center;pointer-events:none;user-select:none;z-index:0}.hero-grid{position:relative;z-index:2;min-height:min(420px,52vh);display:grid;grid-template-columns:minmax(280px,42%) 1fr;align-items:center}.hero-copy{padding-left:28px;position:relative;z-index:1}.hero h1{margin:0;font:700 clamp(38px,4.3vw,58px)/1.07 var(--display);letter-spacing:-1.8px}.hero h1 span{background:linear-gradient(90deg,#1672ff,#7148fb);background-clip:text;color:transparent}.hero-copy>p{margin:17px 0 23px;color:#56637a;font-size:18px;line-height:1.55}.hero-copy>div{display:flex;gap:14px}.hero-art{display:none}.editor{position:absolute;z-index:5;left:22%;top:7px;width:58%;height:292px;border:8px solid #263444;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 22px 45px #0a1f4547;transform:rotate(-2deg)}.editor>i{position:absolute;inset:0 auto 0 0;width:12%;background:#182333}.editor img{width:72%;height:100%;object-fit:cover;margin-left:12%}.editor>span{position:absolute;inset:0 0 0 auto;width:17%;padding:22px 8px;background:#f4f7fa;display:flex;flex-direction:column;gap:22px}.editor>span b{height:38px;display:grid;place-items:center;background:#fff;border-radius:6px;box-shadow:0 2px 8px #0002;font-size:20px}.float{position:absolute;margin:0;width:150px;height:205px;border-radius:14px;overflow:hidden;background:#dfe7f4;box-shadow:0 16px 30px #091f4840}.float img{width:100%;height:100%;object-fit:cover}.f0{left:5%;top:94px;transform:rotate(-10deg);z-index:2}.f1{right:0;top:62px;transform:rotate(11deg);z-index:3}.f2{right:5%;top:110px;transform:rotate(4deg);z-index:1}.hero-art>em{position:absolute;right:-3%;top:8px;color:#1450a0;font:italic 19px/1.25 cursive;transform:rotate(-8deg)}.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:18px;position:relative;z-index:2}.benefits article{display:flex;align-items:center;gap:12px}.benefits article>i{width:45px;height:45px;display:grid;place-items:center;border-radius:50%;background:#e3f2ff;color:#1879e8}.benefits article:nth-child(1)>i{color:#0d9e60;background:#dff8eb}.benefits article:nth-child(2)>i{color:#ff426a;background:#ffe1e7}.benefits article:nth-child(3)>i{color:#6d3eff;background:#eae3ff}.benefits b,.benefits small{display:block}.benefits b{font-size:14px}.benefits small{margin-top:2px;color:var(--muted);font-size:11px}
.discover{padding:18px 0}.hero-discover{position:relative;z-index:2;margin:6px auto 0}.hero .panel{padding:16px 18px;border-radius:18px;background:#fffffff7;backdrop-filter:blur(12px);box-shadow:0 10px 30px #1e55ab14}.panel{padding:16px 18px;border-radius:18px;background:linear-gradient(135deg,#f7faff,#eef5ff);box-shadow:0 10px 30px #1e55ab14}.search{display:flex;gap:12px}.search label{height:44px;flex:1;display:flex;align-items:center;gap:12px;padding:0 15px;border:1px solid #dfe6f1;border-radius:10px;background:#fff;box-shadow:0 4px 12px #1432640f}.search input{min-width:170px;border:0;outline:0;font:500 15px var(--font)}.search small{color:#9aa5b6;font-size:11px}.pills{display:flex;gap:9px;margin-top:13px;overflow:auto}.pills a{padding:8px 12px;border:1px solid var(--line);border-radius:20px;background:#fff;text-decoration:none;font-size:11px;font-weight:600;white-space:nowrap}.pills .active{background:var(--blue);border-color:var(--blue);color:#fff}.section{padding:18px 0 30px}.heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}.heading h2{margin:0;font:600 25px var(--display)}.heading h2 i{color:#ffab00;font-style:normal}.heading p{margin:5px 0 0;color:var(--muted);font-size:13px}.heading>a{color:var(--blue);text-decoration:none;font-weight:600}.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:15px}.card{min-width:0;border:1px solid #e5eaf2;border-radius:11px;overflow:hidden;background:#fff;text-decoration:none;box-shadow:0 7px 18px #1f3c701c;transition:.2s}.card:hover{transform:translateY(-4px)}.pic{display:block;position:relative;aspect-ratio:var(--poster-w,1054)/var(--poster-h,1492);background:#0f172a;overflow:hidden}.pic img,.pic iframe.lp-card__showcase{position:absolute;inset:0;width:100%!important;height:100%!important;border:0;pointer-events:none;object-fit:cover;background:#111}.card-body{display:block;padding:9px}.card-body>b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.card-body>span{margin-top:5px;display:flex;justify-content:space-between}.card-body em{padding:3px 8px;border-radius:10px;background:#edf2fa;color:#6d7890;font-style:normal;font-size:10px}.card-body small{display:flex;align-items:center;color:#7a879e}.card-body svg{width:15px;height:15px}
.how{padding:8px 0 18px}.how>.wrap{padding:22px 50px;border-radius:17px;background:linear-gradient(135deg,#eef6ff,#e7f1ff);box-shadow:0 10px 30px #205db714}.how header{text-align:center}.how h2{margin:0;font:600 27px var(--display)}.how header p{margin:4px 0 16px;color:var(--muted);font-size:13px}.how ol{display:grid;grid-template-columns:repeat(3,1fr);gap:65px;list-style:none;margin:0;padding:0}.how li{position:relative;display:grid;grid-template-columns:30px 62px 1fr;align-items:center;gap:12px}.how li:not(:last-child):after{content:"→";position:absolute;right:-48px;color:#7eafff;font-size:24px}.how li>b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#347df1;color:#fff}.how li>i{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#2674ef;box-shadow:0 7px 16px #2469da24}.how li>i svg{width:34px;height:34px}.how strong,.how small{display:block}.how small{margin-top:3px;color:var(--muted);font-size:12px;line-height:1.45}.cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px 16px}.cat-grid a{height:67px;position:relative;display:flex;align-items:center;justify-content:flex-end;padding:10px 14px;border:1px solid #dce5f2;border-radius:10px;overflow:hidden;background:#f2f7ff;text-decoration:none;box-shadow:0 5px 14px #22447e17}.cat-grid img{position:absolute;left:0;top:0;width:50%;height:100%;object-fit:cover;mask-image:linear-gradient(90deg,#000 55%,transparent)}.cat-grid b{position:relative;width:61%;text-align:center;font-size:12px}
.final{overflow:hidden;background:linear-gradient(110deg,#6848ff,#185ce9 52%,#0b2866);color:#fff}.final-in{min-height:177px;display:grid;grid-template-columns:31% 1fr 21%;align-items:center;text-align:center}.final h2{margin:0;font:600 27px var(--display)}.final p{margin:4px 0 13px}.final-in>div:nth-child(2)>span{display:flex;justify-content:center;gap:12px}.white{color:var(--blue);background:#fff}.dark{color:#fff;border-color:#fff;background:transparent}.mini{position:relative;height:160px}.mini i{position:absolute;left:calc(35px + var(--n)*55px);bottom:-10px;width:105px;height:138px;overflow:hidden;border:3px solid #fff;border-radius:9px;transform:rotate(calc((var(--n) - 1)*8deg));box-shadow:0 8px 18px #0004}.mini img{width:100%;height:100%;object-fit:cover}.final-in>em{font:italic 30px/1.2 cursive;transform:rotate(-8deg)}footer{padding:26px 0 12px}.foot-grid{display:grid;grid-template-columns:1.35fr .8fr .9fr 1fr 1.35fr;gap:28px}footer h3{margin:0 0 10px;font-size:13px}footer a{display:block;margin:5px 0;color:#5c6880;text-decoration:none;font-size:12px}footer p{color:#7d8799;font-size:12px}.social{display:flex;gap:6px}.social a{width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:#1769ff;color:#fff;font-weight:700}.social a:nth-child(2){background:#ef2929}.social a:nth-child(3){background:#16c65b}.social a:nth-child(4){background:#e92d8d}footer form{display:flex;border:1px solid #dae2ef;border-radius:9px;overflow:hidden}footer input{min-width:0;width:100%;border:0;padding:10px 12px}footer button{border:0;background:var(--blue);color:#fff;padding:0 14px}.copyright{margin-top:17px;padding-top:11px;border-top:1px solid #e7ebf2;display:flex;justify-content:space-between;color:#8a94a6;font-size:10px}
@media(max-width:1050px){.nav nav{display:none}.hero-grid{grid-template-columns:minmax(240px,48%) 1fr}.cards{grid-template-columns:repeat(3,1fr)}.cat-grid{grid-template-columns:repeat(3,1fr)}.foot-grid{grid-template-columns:repeat(3,1fr)}.hero-art>em{display:none}}@media(max-width:760px){.wrap{width:calc(100% - 28px)}body.lp .wrap{width:calc(100% - 28px)}.nav-in{height:62px;gap:10px}.lang,.login,.user span{display:none}.actions .btn{padding:9px 11px;font-size:12px}.hero{min-height:0;padding:28px 0 18px}.hero-bg{object-position:center 18%}.hero-grid{grid-template-columns:1fr;min-height:0}.hero-copy{padding:16px;text-align:center;background:#fffffff5;border-radius:16px;backdrop-filter:blur(8px)}.hero h1{font-size:39px}.hero-copy>p br{display:none}.hero-copy>div{justify-content:center}.hero-art{display:none}.benefits{grid-template-columns:1fr 1fr}.search small{display:none}.cards{grid-template-columns:repeat(2,1fr)}.how>.wrap{padding:22px}.how ol{grid-template-columns:1fr;gap:18px}.how li:after{display:none}.cat-grid{grid-template-columns:repeat(2,1fr)}.final-in{grid-template-columns:1fr;padding:30px 0}.mini,.final-in>em{display:none}.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>div:first-child,.foot-grid>div:last-child{grid-column:1/-1}}@media(max-width:470px){.brand strong{font-size:16px}.hero h1{font-size:32px}.hero-copy>p{font-size:15px}.hero-copy>div{flex-direction:column}.editor{left:16%;width:68%}.float{width:100px;height:140px}.benefits{grid-template-columns:1fr}.search{flex-direction:column}.cards{gap:10px}.cat-grid,.foot-grid{grid-template-columns:1fr}.foot-grid>*{grid-column:1!important}.copyright{flex-direction:column;gap:8px}}

/* UX Maintenance — Template Quick Preview (landing gallery only) */
.pic-wrap{position:relative;display:block}
.lp-tier{position:absolute;top:8px;left:8px;z-index:4;display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font:700 11px/1 var(--display);pointer-events:none;letter-spacing:.02em}
.lp-tier svg{width:12px;height:12px}
.lp-tier--premium{background:linear-gradient(180deg,#f5c542,#e3a008);color:#fff;box-shadow:0 2px 8px #b4530940}
.lp-tier--free{background:#ecfdf3;color:#15803d}
.lp-preview-btn{position:absolute;top:8px;right:8px;z-index:3;display:inline-flex;align-items:center;gap:5px;margin:0;padding:6px;border:0;border-radius:8px;background:#ffffffe8;color:var(--navy);box-shadow:0 4px 12px #14326433;cursor:pointer;font:600 11px var(--font)}
.lp-preview-btn svg{width:16px;height:16px}
.lp-preview-btn__label{display:none;max-width:90px;overflow:hidden;text-overflow:ellipsis}
@media(hover:hover) and (pointer:fine){
  .pic-wrap:hover .lp-preview-btn__label,.pic-wrap:focus-within .lp-preview-btn__label,.lp-preview-btn:focus-visible .lp-preview-btn__label{display:inline}
  .pic-wrap:hover .lp-preview-btn,.lp-preview-btn:focus-visible{padding:6px 8px}
}
.lp-qprev{
  box-sizing:border-box;
  padding:0!important;
  border:0;
  margin:auto;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  width:min(920px,calc(100vw - 24px));
  max-width:calc(100vw - 24px);
  max-height:min(90vh,calc(100dvh - 16px));
  color:var(--navy);
}
.lp-qprev::backdrop{background:#0b1c4dcc}
.lp-qprev__panel{
  display:flex;
  flex-direction:column;
  max-height:min(90vh,calc(100dvh - 16px));
  min-height:0;
  overflow:hidden;
  background:#fff;
}
.lp-qprev__scroll{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column}
.lp-qprev__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);flex:0 0 auto}
.lp-qprev__bar h2{margin:0;font:600 18px var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-qprev__x{width:36px;height:36px;border:0;border-radius:8px;background:#f1f5fb;color:var(--navy);cursor:pointer;font-size:18px;flex:0 0 auto}
.lp-qprev__stage{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:12px 16px;
  background:#0f172a;
  width:100%;
  box-sizing:border-box;
  height:min(44vh,calc(90vh - 240px));
}
.lp-qprev__stage-inner{
  position:relative;
  box-sizing:border-box;
  overflow:hidden;
  background:#111;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
}
.lp-qprev__frame{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  max-width:100%;
  max-height:100%;
  border:0;
  background:#111;
  display:block;
  object-fit:contain;
}
.lp-qprev__foot{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:10px 16px 8px;border-top:1px solid var(--line);flex:0 0 auto;background:#fff;min-width:0}
.lp-qprev__meta{margin:0;display:flex;align-items:center;gap:12px;min-width:0}
.lp-qprev__meta em{padding:3px 8px;border-radius:10px;background:#edf2fa;color:#6d7890;font-style:normal;font-size:12px}
.lp-qprev__cta{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0}
.lp-qprev__copy{min-width:0;flex:1 1 auto}
.lp-qprev__hint{margin:0}
.lp-qprev__hint b{display:block;font:600 14px var(--display);color:var(--navy)}
.lp-qprev__hint span{display:block;margin-top:3px;color:#475569;font:500 12.5px/1.4 var(--font)}
.lp-qprev__note{margin:4px 0 0;color:var(--muted);font:500 12px/1.4 var(--font)}
.lp-qprev__actions{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;flex:0 0 auto;min-width:0}
.lp-qprev__actions .btn{min-width:0}
.lp-qprev-bgs{flex:0 0 auto;padding:8px 16px 12px;border-top:1px solid var(--line);background:#fff;min-width:0}
.lp-qprev-bgs__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.lp-qprev-bgs__head h3{margin:0;font:600 14px var(--display)}
.lp-qprev-bgs__head p{margin:4px 0 0;color:var(--muted);font:500 12px var(--font)}
.lp-qprev-bgs__all{color:var(--blue);text-decoration:none;font:600 13px var(--font);white-space:nowrap;padding-top:2px}
.lp-qprev-bgs__row{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.lp-qprev-bg{flex:0 0 88px;width:88px;margin:0;padding:0;border:0;background:transparent;text-align:left;cursor:pointer;color:inherit;font:inherit}
.lp-qprev-bg:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:10px}
.lp-qprev-bg__media{position:relative;display:block;aspect-ratio:var(--poster-w,3)/var(--poster-h,4);border-radius:10px;overflow:hidden;background:#0f172a;box-shadow:inset 0 0 0 1px #e2e8f0}
.lp-qprev-bg.is-on .lp-qprev-bg__media{box-shadow:inset 0 0 0 2px var(--blue),0 0 0 2px #dbeafe}
.lp-qprev-bg__media img{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;object-fit:contain;object-position:center;background:#111}
.lp-qprev-bg__check{display:none;position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:22px;height:22px;place-items:center;border-radius:999px;background:#2563eb;color:#fff;font:700 13px/1 var(--font);z-index:1}
.lp-qprev-bg.is-on .lp-qprev-bg__check{display:grid}
.lp-qprev-bg b{display:block;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;text-align:center}
.lp-qprev-bg__lock{position:absolute;right:4px;top:4px;z-index:2;padding:2px 6px;border-radius:999px;background:rgba(15,23,42,.88);color:#fde68a;font:800 10px/1.2 var(--font)}
.lp-qprev-pro{margin:0 16px 8px;padding:8px 12px;border-radius:10px;background:#eff6ff;color:#1e3a8a;font:700 12px var(--font)}
.lp-qprev-upgrade{margin:0 16px 12px;padding:12px;border:1px solid #bfdbfe;border-radius:12px;background:#f8fafc}
.lp-qprev-upgrade b{display:block;margin-bottom:4px}
.lp-qprev-upgrade p{margin:0 0 8px;color:var(--muted);font:500 13px var(--font)}
@media(min-width:1100px){
  .lp-qprev{width:min(1080px,calc(100vw - 32px));max-height:min(92vh,calc(100dvh - 12px))}
  .lp-qprev__panel{max-height:min(92vh,calc(100dvh - 12px))}
  .lp-qprev__stage{height:min(42vh,calc(92vh - 248px));padding:8px 10px}
}
@media(max-width:760px){
  .lp-qprev{width:calc(100vw - 12px);max-width:calc(100vw - 12px);max-height:min(94vh,calc(100dvh - 8px))}
  .lp-qprev__panel{max-height:min(94vh,calc(100dvh - 8px))}
  .lp-qprev__stage{height:min(34vh,calc(94vh - 260px));padding:8px}
  .lp-qprev__foot{flex-direction:column;align-items:stretch}
  .lp-qprev__cta{flex-direction:column;align-items:stretch}
  .lp-qprev__actions{flex-direction:column}
  .lp-qprev__actions .btn{width:100%;box-sizing:border-box}
  .lp-preview-btn__label{display:none!important}
  .lp-qprev-bg{flex:0 0 80px;width:80px}
}

/* Landing gallery — แถวละ 5 การ์ด · สัดส่วนโปสเตอร์ 3:4 */
.lp-gallery>.wrap{width:calc(100% - 48px);max-width:none}
.lp-gallery .cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.lp-gallery .card{width:auto;max-width:none;min-width:0;border-radius:16px;box-shadow:0 8px 22px #1f3c7018}
.lp-gallery .pic-wrap,.lp-gallery .pic{width:100%;max-width:none}
.lp-gallery .pic{height:auto;aspect-ratio:300/400}
.lp-gallery .pic img,.lp-gallery .pic iframe.lp-card__showcase{object-fit:contain}
.lp-card__hover{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;cursor:pointer;background:rgba(15,23,42,0);color:#fff;opacity:0;transition:background .2s ease,opacity .2s ease}
.lp-card__hover span{padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.95);color:#1769ff;font:700 13px var(--font);box-shadow:0 8px 20px #0f172a2e;transform:translateY(6px);transition:transform .2s ease}
.lp-gallery .pic-wrap:hover .lp-card__hover,.lp-gallery .pic-wrap:focus-within .lp-card__hover{opacity:1;background:rgba(15,23,42,.42)}
.lp-gallery .pic-wrap:hover .lp-card__hover span,.lp-gallery .pic-wrap:focus-within .lp-card__hover span{transform:translateY(0)}
.lp-gallery .card-body{display:flex;flex-direction:column;gap:4px;padding:12px 12px 14px}
.lp-gallery .card-body>b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 15px/1.3 var(--display);color:#0b1c4d}
.lp-card__meta{margin:0;color:#64748b;font-size:12px;line-height:1.35;min-width:0}
.lp-card__meta-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lp-card__views{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;color:#64748b;font-size:11px;white-space:nowrap}
.lp-card__views svg{width:14px;height:14px}
.lp-card__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.lp-gallery .lp-preview-btn{position:static;top:auto;right:auto;z-index:1;width:100%;justify-content:center;min-height:36px;padding:8px 8px;border:1px solid #c7d2fe;border-radius:999px;background:#f4f6ff;color:#2563eb;box-shadow:none;font:700 12px var(--font)}
.lp-gallery .lp-preview-btn:hover{background:#eef2ff}
.lp-card__use{display:flex;align-items:center;justify-content:center;min-height:36px;padding:8px 8px;border-radius:999px;background:#1769ff;color:#fff;text-decoration:none;font:700 12px var(--font);text-align:center}
.lp-card__use:hover{background:#1258d6}
@media(max-width:980px){
  .lp-gallery .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .lp-gallery>.wrap{width:calc(100% - 28px)}
  .lp-gallery .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-gallery .card{width:auto;max-width:none;min-width:0}
  .lp-gallery .pic-wrap,.lp-gallery .pic{width:100%;height:auto;aspect-ratio:300/400}
}

.lp-catmenu-sec{padding:8px 0 4px;background:#f4f6fb}
.lp-catmenu{padding:14px 16px 12px;border:1px solid #e6ebf4;border-radius:16px;background:#fff;box-shadow:0 8px 24px #1e3a6e0f}
.lp-catmenu__filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.lp-catmenu__filters button{margin:0;padding:8px 16px;border:1px solid #e5eaf2;border-radius:999px;background:#fff;color:#334155;font:600 13px var(--font);cursor:pointer}
.lp-catmenu__filters button.is-on{background:#eee8ff;border-color:#c4b5fd;color:#5b21b6}
.lp-catmenu__scroller{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:thin}
.lp-catcard{flex:0 0 auto;display:flex;align-items:center;gap:10px;min-width:148px;padding:8px 12px 8px 8px;border:1px solid #e5eaf2;border-radius:12px;background:#fff;color:#0f172a;cursor:pointer;text-align:left;font:inherit}
.lp-catcard:hover{border-color:#c7d2fe}
.lp-catcard.is-on{background:#eee8ff;border-color:#c4b5fd;color:#5b21b6}
.lp-catcard__ico{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;background:#f1f5f9;flex:0 0 36px}
.lp-catcard.is-on .lp-catcard__ico{background:#ddd6fe}
.lp-catcard__ico svg{width:20px;height:20px}
.lp-catcard b{display:block;font-size:13px;font-weight:700;line-height:1.2}
.lp-catcard small{display:block;margin-top:1px;color:#94a3b8;font-size:11px}
.lp-gallery-empty{margin:8px 0 0;color:var(--muted);font-size:14px}
@media(max-width:480px){
  .lp-gallery .cards{grid-template-columns:1fr}
  .lp-gallery .card{max-width:none;min-width:0}
  .lp-card__actions{grid-template-columns:1fr; }
  .lp-card__use,.lp-gallery .lp-preview-btn{min-height:40px}
}