/* css/style.css */
/* ThaiDNS - WorkFlow DMS
 Brand palette pulled from flyer image
 ============================================ */
:root{
 --navy-900:#03103a;
 --navy-800:#061849;
 --navy-700:#0a2160;
 --navy-600:#0f2d80;
 --blue-500:#1d4ed8;
 --blue-400:#3b82f6;
 --gold-500:#ffc107;
 --gold-400:#ffd54f;
 --green-500:#22c55e;
 --green-600:#16a34a;
 --purple-500:#7c3aed;
 --red-500:#ef4444;
 --text:#1f2937;
 --text-muted:#64748b;
 --bg:#f7f9fc;
 --white:#ffffff;
 --shadow-sm:0 2px 8px rgba(6,24,73,.08);
 --shadow-md:0 8px 24px rgba(6,24,73,.12);
 --shadow-lg:0 20px 50px rgba(6,24,73,.18);
 --radius:14px;
 --radius-md:18px;
 --radius-lg:22px;
 --maxw:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
:target{scroll-margin-top:90px}
section[id]{scroll-margin-top:90px}
body{
 font-family:"Sarabun","Prompt","Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif;
 color:var(--text);
 background:var(--bg);
 line-height:1.65;
 -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--blue-500);text-decoration:none}
a:hover{color:var(--navy-700)}

/* ====== NAVBAR ====== */
.nav{
 position:sticky;top:0;z-index:50;
 background:linear-gradient(135deg,var(--navy-800) 0%,var(--navy-700) 60%,var(--blue-500) 100%);
 box-shadow:var(--shadow-sm);
}
.nav-inner{
 max-width:var(--maxw);margin:0 auto;
 display:flex;align-items:center;justify-content:space-between;
 padding:14px 22px;color:#fff;
}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.25rem;color:#fff}
.brand-mark{
 width:42px;height:42px;border-radius:10px;
 background:linear-gradient(135deg,var(--gold-500),#ff8a00);
 display:flex;align-items:center;justify-content:center;
 color:var(--navy-800);font-weight:900;font-size:1.1rem;
 box-shadow:0 4px 12px rgba(255,193,7,.35);
}
.brand small{display:block;font-weight:500;font-size:.7rem;opacity:.85;letter-spacing:.08em}

.menu{display:flex;gap:6px;align-items:center;list-style:none}
.menu a{
 color:#dbeafe;font-weight:500;padding:8px 14px;border-radius:8px;
 transition:.2s;font-size:.95rem;
}
.menu a:hover,.menu a.active{background:rgba(255,255,255,.12);color:#fff}

/* Nav dropdown */
.menu li.has-dropdown{position:relative}
.menu li.has-dropdown > a::after{content:" ▾";font-size:.7em;opacity:.85;margin-left:2px}
.menu .dropdown{
 position:absolute;top:calc(100% + 8px);left:0;min-width:280px;
 background:#fff;border-radius:12px;box-shadow:0 20px 50px rgba(6,24,73,.25);
 padding:8px;list-style:none;opacity:0;visibility:hidden;
 transform:translateY(-6px);transition:.18s ease;z-index:60;
 border:1px solid #e5e7eb;
}
.menu li.has-dropdown:hover > .dropdown,
.menu li.has-dropdown.open > .dropdown,
.menu li.has-dropdown:focus-within > .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.menu .dropdown li{margin:0}
.menu .dropdown a{
 display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;
 color:var(--navy-800);font-weight:600;font-size:.92rem;
}
.menu .dropdown a:hover,.menu .dropdown a.active{background:#eff6ff;color:var(--blue-500)}
.menu .dropdown a i{color:var(--blue-500);width:18px;text-align:center;font-size:.95rem}
.menu .dropdown small{display:block;color:var(--text-muted);font-weight:400;font-size:.78rem;margin-top:1px}
/* Mobile: collapse dropdown inside open menu */
@media (max-width:1100px){
 .menu li.has-dropdown > a::after{content:" ▾";float:right}
 .menu .dropdown{
  position:static;opacity:1;visibility:visible;transform:none;
  box-shadow:none;border:none;background:rgba(255,255,255,.05);
  padding:4px 0 4px 12px;margin:6px 0 0;display:none;min-width:0;
 }
 .menu li.has-dropdown.open > .dropdown{display:block}
 .menu .dropdown a{color:#dbeafe;padding:8px 12px}
 .menu .dropdown a:hover,.menu .dropdown a.active{background:rgba(255,255,255,.1);color:#fff}
 .menu .dropdown a i{color:var(--gold-400)}
 .menu .dropdown small{color:#94a3b8}
}

.nav-right{display:flex;gap:10px;align-items:center}
.lang-switch{
 display:flex;background:rgba(255,255,255,.1);
 border-radius:8px;overflow:hidden;font-size:.85rem;
}
.lang-switch button,.lang-switch a{
 background:none;border:none;color:#dbeafe;padding:6px 12px;cursor:pointer;font-weight:600;
 text-decoration:none;display:inline-flex;align-items:center;
}
.lang-switch button.on,.lang-switch a.on{background:var(--gold-500);color:var(--navy-800)}

.btn{
 display:inline-flex;align-items:center;gap:8px;
 padding:11px 22px;border-radius:10px;font-weight:700;font-size:.95rem;
 border:none;cursor:pointer;transition:.2s;text-decoration:none;
}
.btn-primary{
 background:linear-gradient(135deg,var(--gold-500),#ff8a00);color:var(--navy-800);
 box-shadow:0 6px 18px rgba(255,138,0,.35);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(255,138,0,.45);color:var(--navy-800)}
.btn-ghost{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn-ghost:hover{background:rgba(255,255,255,.25);color:#fff}
.btn-outline{background:transparent;color:var(--blue-500);border:2px solid var(--blue-500)}
.btn-outline:hover{background:var(--blue-500);color:#fff}

.menu-toggle{display:none;background:none;border:none;color:#fff;font-size:1.6rem;cursor:pointer}

/* ====== HERO ====== */
.hero{
 position:relative;overflow:hidden;color:#fff;
 background:radial-gradient(1200px 600px at 80% -10%,rgba(59,130,246,.45),transparent 60%),
 radial-gradient(900px 500px at 10% 100%,rgba(124,58,237,.35),transparent 60%),
 linear-gradient(135deg,var(--navy-900) 0%,var(--navy-800) 50%,var(--navy-700) 100%);
 padding:90px 0 120px;
}
.hero::before{
 content:"";position:absolute;inset:0;
 background-image:
 linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),
 linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);
 background-size:60px 60px;
 mask-image:radial-gradient(ellipse at center,#000 0%,transparent 70%);
 -webkit-mask-image:radial-gradient(ellipse at center,#000 0%,transparent 70%);
}
.hero-inner{
 max-width:var(--maxw);margin:0 auto;padding:0 22px;
 display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;
 position:relative;
}
.hero-eyebrow{
 display:inline-flex;align-items:center;gap:8px;
 background:rgba(255,193,7,.15);border:1px solid rgba(255,193,7,.4);
 color:var(--gold-400);padding:6px 14px;border-radius:99px;
 font-size:.85rem;font-weight:600;margin-bottom:18px;
}
.hero h1{
 font-size:clamp(2.2rem,5vw,3.6rem);font-weight:900;line-height:1.15;
 margin-bottom:18px;
 background:linear-gradient(135deg,#fff 0%,#e0e7ff 60%,var(--gold-400) 100%);
 -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero h1 .accent{color:var(--gold-500);-webkit-text-fill-color:var(--gold-500)}
.hero p.lead{font-size:1.15rem;color:#cbd5e1;margin-bottom:28px;max-width:560px}
/* Single-column hero (service detail pages without right visual) */
.hero-inner:has(> :only-child),
.hero-inner.solo{grid-template-columns:1fr;max-width:880px;text-align:center}
.hero-inner.solo .hero-eyebrow,
.hero-inner:has(> :only-child) .hero-eyebrow{margin-left:auto;margin-right:auto}
.hero p.hero-accent{
 font-size:1.1rem;color:var(--gold-400);font-weight:700;margin-bottom:14px;
 letter-spacing:.01em;
}
.hero p.hero-lead{
 font-size:1.05rem;color:#cbd5e1;margin-bottom:24px;max-width:780px;
 line-height:1.75;
}
.hero-inner.solo .hero-lead,
.hero-inner:has(> :only-child) .hero-lead{margin-left:auto;margin-right:auto}
.hero .hero-card{margin-top:24px}
.hero-inner.solo .hero-card,
.hero-inner:has(> :only-child) .hero-card{max-width:760px;margin-left:auto;margin-right:auto;text-align:left}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.hero-stats{display:flex;gap:30px;flex-wrap:wrap}
.stat{}
.stat .n{font-size:1.7rem;font-weight:900;color:var(--gold-500)}
.stat .l{font-size:.85rem;color:#94a3b8}

.hero-visual{position:relative}
.hero-card{
 background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
 border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(10px);
 border-radius:20px;padding:22px 26px;box-shadow:var(--shadow-lg);
}
.hero-inner.solo .hero-card{display:flex;flex-direction:column;gap:14px}
.hero-inner.solo .hero-card .hero-cta{margin-bottom:0;justify-content:center}
.hero-inner.solo .hero-card .price-quick{text-align:center;display:flex;justify-content:center;align-items:baseline;gap:10px;flex-wrap:wrap}
.hero-inner.solo .hero-card .price-label{color:#cbd5e1;font-size:.95rem}
.hero-inner.solo .hero-card .price-value{color:#fff;font-size:1.6rem;font-weight:900}
.hero-inner.solo .hero-card .price-value small{color:var(--gold-400);font-size:.85rem;font-weight:600;margin-left:2px}
.hero-inner.solo .hero-card .price-note,
.hero-inner.solo .hero-card .price-or{flex-basis:100%;color:#94a3b8;font-size:.82rem}
.hero .trust-bar{margin-top:32px}
.hero .trust-item{padding:14px 14px;font-size:.85rem;line-height:1.35}
.hero .trust-item i{font-size:1.35rem}
.hero-card h3{color:#fff;font-size:1.2rem;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.hero-feature{
 display:flex;align-items:center;gap:12px;padding:12px 0;
 border-bottom:1px solid rgba(255,255,255,.08);color:#e2e8f0;font-size:.95rem;
}
.hero-feature:last-child{border-bottom:none}
.hero-feature .check{
 width:24px;height:24px;border-radius:50%;background:var(--green-500);
 color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;
}
.hero-badge{
 position:absolute;top:-44px;right:18px;z-index:3;
 background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;
 padding:14px 22px;border-radius:16px;font-weight:800;font-size:.82rem;
 box-shadow:0 12px 28px rgba(220,38,38,.45);transform:rotate(-4deg);
 text-align:center;line-height:1.2;
}
.hero-badge span:first-child{display:block;font-size:.78rem;font-weight:600;color:#fff;opacity:.95;letter-spacing:.05em}
.hero-badge span:nth-child(2){display:block;font-size:1.7rem;color:var(--gold-400);margin:2px 0;line-height:1.1}
.hero-badge small{display:block;font-size:.72rem;font-weight:600;opacity:.95;margin-top:2px}

/* ====== SECTION GENERIC ====== */
.section{padding:80px 0}
.section .container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.section-head{text-align:center;margin-bottom:50px}
.section-head .eyebrow{
 display:inline-block;color:var(--blue-500);font-weight:700;
 font-size:.85rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:10px;
}
.section-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);color:var(--navy-800);font-weight:900;margin-bottom:12px}
.section-head p{color:var(--text-muted);font-size:1.05rem;max-width:680px;margin:0 auto}

/* ====== FEATURE PILLS ====== */
.pills{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:-60px;position:relative;z-index:5}
.pill{
 background:#fff;border-radius:var(--radius);padding:20px;
 box-shadow:var(--shadow-md);text-align:center;transition:.25s;
}
.pill:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pill .ico{
 width:54px;height:54px;border-radius:12px;margin:0 auto 12px;
 display:flex;align-items:center;justify-content:center;
 background:linear-gradient(135deg,var(--blue-500),var(--navy-700));color:#fff;font-size:1.4rem;
}
.pill h4{color:var(--navy-800);font-size:1rem;margin-bottom:4px}
.pill p{color:var(--text-muted);font-size:.85rem;margin:0}

/* ====== SERVICE CARDS ====== */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc-card{
 background:#fff;border-radius:var(--radius-lg);padding:0;
 box-shadow:var(--shadow-sm);border:1px solid #e5e7eb;transition:.25s;
 display:flex;flex-direction:column;
}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--blue-400)}
.svc-card > .svc-icon,
.svc-card > .icon{
 width:56px;height:56px;border-radius:14px;
 background:linear-gradient(135deg,var(--blue-500),var(--navy-700));
 color:#fff;display:flex;align-items:center;justify-content:center;
 font-size:1.5rem;margin:26px 26px 0;flex-shrink:0;
}
.svc-card > .svc-icon i,
.svc-card > .icon i{color:#fff}
.svc-card > h3{padding:14px 26px 0;margin:0 0 8px;font-size:1.15rem;font-weight:800;color:var(--navy-800)}
.svc-card > p{padding:0 26px 26px;margin:0;color:var(--text-muted);font-size:.95rem;line-height:1.7;flex:1}

/* Tables: comparison + pricing */
.table-wrap,.compare-table-wrap{overflow-x:auto;margin:8px 0 14px;-webkit-overflow-scrolling:touch;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);background:#fff}
.compare-table,.pricing-table{
 width:100%;border-collapse:separate;border-spacing:0;background:#fff;
 font-size:.95rem;color:var(--navy-800);min-width:640px;
}
.compare-table th,.pricing-table th{
 background:linear-gradient(135deg,var(--navy-800),var(--navy-700));
 color:#fff;text-align:left;padding:14px 16px;font-weight:700;font-size:.92rem;
 border-bottom:2px solid var(--navy-900);white-space:nowrap;
}
.compare-table td,.pricing-table td{
 padding:13px 16px;border-bottom:1px solid #eef2f7;vertical-align:middle;
}
.compare-table tbody tr:nth-child(even),
.pricing-table tbody tr:nth-child(even){background:#f8fafc}
.compare-table tbody tr:hover,
.pricing-table tbody tr:hover{background:#fff8e6}
.compare-table tbody tr:last-child td,
.pricing-table tbody tr:last-child td{border-bottom:none}
.compare-table td:first-child,
.pricing-table td:first-child{font-weight:600;color:var(--navy-800)}
.compare-table th:nth-child(2),
.compare-table td:nth-child(2){background:rgba(255,193,7,.10);font-weight:700}
.compare-table th:nth-child(2){background:linear-gradient(135deg,var(--gold-500),#d97706);color:#fff}
.compare-table tbody tr:nth-child(even) td:nth-child(2){background:rgba(255,193,7,.15)}
.pricing-table td.popular,.pricing-table th.popular{background:rgba(255,193,7,.12)}
.pricing-table .price-cell{font-weight:800;color:var(--blue-500);font-size:1rem;white-space:nowrap}
.compare-table .check,.compare-table-yes{color:var(--green-600);font-weight:800}
.compare-table .x,.compare-table-no{color:#ef4444;font-weight:800}
.table-note{font-size:.82rem;color:var(--text-muted);margin-top:10px;line-height:1.6}
@media (max-width:720px){
 .compare-table,.pricing-table{font-size:.85rem}
 .compare-table th,.pricing-table th,.compare-table td,.pricing-table td{padding:14px 16px}
}
.svc-head{
 padding:26px 26px 22px;color:#fff;
 border-radius:var(--radius-lg) var(--radius-lg) 0 0;
 display:flex;align-items:center;gap:14px;
}
.svc-head .ico{
 width:54px;height:54px;border-radius:12px;background:rgba(255,255,255,.18);
 display:flex;align-items:center;justify-content:center;font-size:1.5rem;
}
.svc-head h3{font-size:1.2rem;font-weight:800;margin:0}
.svc-head small{display:block;font-weight:500;opacity:.85;font-size:.8rem;margin-top:2px}
.svc-blue .svc-head{background:linear-gradient(135deg,var(--blue-500),var(--navy-700))}
.svc-green .svc-head{background:linear-gradient(135deg,var(--green-600),#0d9488)}
.svc-purple .svc-head{background:linear-gradient(135deg,var(--purple-500),#6d28d9)}
.svc-orange .svc-head{background:linear-gradient(135deg,#f59e0b,#d97706)}
.svc-body{padding:24px 26px 28px;flex:1;display:flex;flex-direction:column}
.svc-body ul{list-style:none;margin-bottom:18px;flex:1}
.svc-body li{
 padding:8px 0 8px 28px;position:relative;color:#374151;font-size:.95rem;
}
.svc-body li::before{
 content:"✓";position:absolute;left:0;top:8px;
 width:20px;height:20px;border-radius:50%;background:var(--green-500);color:#fff;
 display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:900;
}

/* ====== PRICING ====== */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
.pricing-grid-4{grid-template-columns:repeat(4,1fr);gap:18px;margin-top:32px}
.pricing-grid-5{grid-template-columns:repeat(5,1fr);gap:16px;margin-top:32px}
/* Compact price card when in 5-col grid */
.pricing-grid-5 .price-card{padding:26px 18px}
.pricing-grid-5 .price-card .price-name{font-size:1.1rem;margin-bottom:4px}
.pricing-grid-5 .price-card .price-tag{font-size:.82rem;min-height:36px;margin-bottom:14px}
.pricing-grid-5 .price-card .price-amount{flex-wrap:wrap;align-items:baseline;gap:3px;margin-bottom:14px}
.pricing-grid-5 .price-card .price-amount .num{font-size:2rem}
.pricing-grid-5 .price-card .price-amount .per{font-size:.78rem;white-space:nowrap}
.pricing-grid-5 .price-card .price-amount .currency{font-size:.85rem}
.pricing-grid-5 .price-card .price-list li{font-size:.88rem;padding:6px 0 6px 22px}
.pricing-grid-5 .price-card.popular{transform:none}
.pricing-grid-5 .price-card.popular::before{font-size:.7rem;padding:5px 12px;right:16px;top:-12px}
@media (max-width:1200px){.pricing-grid-5{grid-template-columns:repeat(3,1fr);gap:20px}.pricing-grid-5 .price-card{padding:30px 24px}.pricing-grid-5 .price-card .price-amount .num{font-size:2.4rem}}
@media (max-width:1100px){.pricing-grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.pricing-grid-5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pricing-grid-4,.pricing-grid-5{grid-template-columns:1fr}}
@media (max-width:600px){.wfdms-teaser-grid{grid-template-columns:repeat(2,1fr) !important}}
.price-card{
 background:#fff;border-radius:var(--radius-lg);padding:34px 28px;
 box-shadow:var(--shadow-sm);border:2px solid #e5e7eb;
 position:relative;transition:.25s;display:flex;flex-direction:column;
}
.price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.price-card.popular{
 border-color:var(--gold-500);transform:scale(1.03);
 box-shadow:0 20px 50px rgba(255,193,7,.25);
}
.price-card.popular::before{
 content:"แนะนำ";position:absolute;top:-14px;right:22px;
 background:linear-gradient(135deg,var(--red-500),#dc2626);color:#fff;
 padding:6px 16px;border-radius:99px;font-weight:800;font-size:.8rem;
 box-shadow:0 6px 16px rgba(239,68,68,.4);
}
html[data-lang="en"] .price-card.popular::before{content:"POPULAR"}
.price-name{color:var(--navy-800);font-weight:800;font-size:1.3rem;margin-bottom:6px}
.price-tag{font-size:.9rem;color:var(--text-muted);margin-bottom:18px;min-height:42px}
.price-amount{display:flex;align-items:baseline;gap:6px;margin-bottom:22px}
.price-amount .currency{color:var(--text-muted);font-size:1rem}
.price-amount .num{font-size:2.8rem;font-weight:900;color:var(--navy-800);line-height:1}
.price-amount .per{color:var(--text-muted);font-size:.9rem}
.price-list{list-style:none;margin-bottom:24px;flex:1}
.price-list li{padding:8px 0 8px 28px;position:relative;color:#374151;font-size:.95rem;border-bottom:1px dashed #e5e7eb}
.price-list li::before{
 content:"✓";position:absolute;left:0;top:10px;color:var(--green-600);font-weight:900;
}
.price-list li.dim{color:#cbd5e1;text-decoration:line-through}
.price-list li.dim::before{content:"×";color:#cbd5e1}
.price-card .btn{justify-content:center;width:100%}
.price-card h3{color:var(--navy-800);font-weight:800;font-size:1.6rem;margin:0 0 10px}
.price-card .price{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}
.price-card .price .amount{font-size:2.4rem;font-weight:900;color:var(--navy-800);line-height:1}
.price-card .price .per{color:var(--text-muted);font-size:.9rem}
.price-card .price-yearly{color:var(--green-600);font-weight:700;font-size:.9rem;margin:0 0 18px}
.price-card .popular-tag{position:absolute;top:-14px;right:22px;background:linear-gradient(135deg,var(--red-500),#dc2626);color:#fff;padding:6px 16px;border-radius:99px;font-weight:800;font-size:.8rem;box-shadow:0 6px 16px rgba(239,68,68,.4)}
.price-card .popular-tag + h3{margin-top:6px}
.price-card .feat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.price-card .feat-list li{padding:8px 0 8px 26px;position:relative;color:#374151;font-size:.93rem;border-top:1px dashed #e5e7eb}
.price-card .feat-list li:first-child{border-top:none}
.price-card .feat-list li::before{content:"✓";position:absolute;left:0;top:8px;color:var(--green-600);font-weight:900}
.vat-note{color:var(--text-muted);font-size:.85rem;margin-top:18px}
.text-center{text-align:center}

/* ====== PROMO STRIP ====== */
.promo{
 background:linear-gradient(135deg,var(--gold-500),#ff8a00);
 border-radius:var(--radius-lg);padding:36px;color:var(--navy-800);
 display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
 box-shadow:0 25px 50px rgba(255,138,0,.25);
}
.promo h3{font-size:1.6rem;font-weight:900;margin-bottom:6px}
.promo p{font-size:1rem;margin:0}
.promo .big{
 font-size:3rem;font-weight:900;color:var(--navy-800);line-height:1;
}

/* ====== BENEFITS / WHO ====== */
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.benefit{text-align:center;padding:20px}
.benefit .ico{
 width:64px;height:64px;border-radius:50%;
 background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:var(--blue-500);
 display:flex;align-items:center;justify-content:center;font-size:1.8rem;
 margin:0 auto 14px;
}
.benefit h4{color:var(--navy-800);margin-bottom:6px;font-size:1.05rem}
.benefit p{color:var(--text-muted);font-size:.9rem;margin:0}

.who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.who{
 background:#fff;border-radius:var(--radius);padding:24px 18px;text-align:center;
 box-shadow:var(--shadow-sm);transition:.25s;border:1px solid #e5e7eb;
}
.who:hover{transform:translateY(-4px);border-color:var(--blue-400);box-shadow:var(--shadow-md)}
.who .ico{
 width:56px;height:56px;margin:0 auto 12px;border-radius:14px;
 background:linear-gradient(135deg,var(--blue-500),var(--navy-700));color:#fff;
 display:flex;align-items:center;justify-content:center;font-size:1.5rem;
}
.who h4{color:var(--navy-800);font-size:1rem;margin:0}

/* ====== CTA SECTION ====== */
.cta-band{
 background:linear-gradient(135deg,var(--navy-800),var(--blue-500));
 color:#fff;border-radius:var(--radius-lg);padding:50px 40px;text-align:center;
 box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
}
.cta-band::before{
 content:"";position:absolute;inset:0;
 background:radial-gradient(600px 300px at 20% 0%,rgba(255,193,7,.25),transparent 60%);
}
.cta-band h2{font-size:2rem;margin-bottom:10px;position:relative}
.cta-band p{opacity:.9;margin-bottom:24px;font-size:1.05rem;position:relative}
.cta-band .btn{position:relative}

/* ====== CONTACT ====== */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:36px;align-items:start}
.contact-info{background:#fff;border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-sm)}
.contact-info h3{color:var(--navy-800);font-size:1.25rem;margin-bottom:18px}
.contact-row{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid #e5e7eb}
.contact-row:last-child{border-bottom:none}
.contact-row .ico{
 width:44px;height:44px;border-radius:12px;flex-shrink:0;
 background:linear-gradient(135deg,var(--blue-500),var(--navy-700));color:#fff;
 display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.contact-row .meta{flex:1}
.contact-row .meta strong{display:block;color:var(--navy-800);font-size:.95rem;margin-bottom:2px}
.contact-row .meta span{color:var(--text-muted);font-size:.95rem}
.contact-row .meta a{font-weight:700}

.form{background:#fff;border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-sm)}
.form h3{color:var(--navy-800);font-size:1.25rem;margin-bottom:6px}
.form .sub{color:var(--text-muted);font-size:.9rem;margin-bottom:22px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.field{margin-bottom:14px}
.field label{display:block;color:var(--navy-800);font-weight:600;font-size:.9rem;margin-bottom:6px}
.field input,.field select,.field textarea{
 width:100%;padding:12px 14px;border:1.5px solid #e5e7eb;border-radius:10px;
 font-family:inherit;font-size:.95rem;color:var(--text);background:#fff;transition:.2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
 outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(29,78,216,.12);
}
.field textarea{min-height:120px;resize:vertical}

/* ====== BRAND LOGO ====== */
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand-logo{display:block;height:64px;width:auto;max-width:280px;object-fit:contain}
.footer .brand-logo{height:80px;max-width:300px;margin-bottom:14px}
@media(max-width:600px){.brand-logo{height:52px;max-width:220px}.footer .brand-logo{height:72px;max-width:260px}}

/* ====== FOOTER ====== */
.footer{
 background:linear-gradient(180deg,var(--navy-900) 0%,#050e1f 100%);
 color:#cbd5e1;padding:60px 0 0;margin-top:60px;position:relative;
}
.footer::before{
 content:"";position:absolute;top:0;left:0;right:0;height:3px;
 background:linear-gradient(90deg,var(--blue-500),var(--gold-400),var(--blue-500));
}
.footer-inner{
 max-width:var(--maxw);margin:0 auto;padding:0 22px;
 display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,1.2fr);gap:32px;
}
.footer-col{position:relative}
.footer-col + .footer-col{padding-left:20px}
.footer-col + .footer-col::before{
 content:"";position:absolute;left:0;top:0;bottom:30px;width:1px;
 background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.08) 20%,rgba(255,255,255,.08) 80%,transparent 100%);
}
.footer h5{
 color:#fff;font-size:.78rem;margin-bottom:18px;font-weight:800;
 letter-spacing:.18em;text-transform:uppercase;
 display:flex;align-items:center;gap:10px;
}
.footer h5::before{
 content:"";width:24px;height:2px;background:var(--gold-400);border-radius:2px;flex:none;
}
.footer ul{list-style:none}
.footer li{padding:7px 0;font-size:.92rem;color:#cbd5e1;line-height:1.5}
.footer a{color:#cbd5e1;font-size:.92rem;transition:color .2s,padding .2s;display:inline-block}
.footer a:hover{color:var(--gold-400);padding-left:4px}
.footer .brand{color:#fff;margin-bottom:16px}
.footer .brand small{color:#94a3b8;font-weight:500;letter-spacing:.05em}
.footer .footer-desc{
 font-size:.9rem;color:#94a3b8;margin:0 0 18px;line-height:1.65;max-width:340px;
}
.footer .footer-contact{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.footer .footer-contact a{
 display:flex;align-items:center;gap:10px;color:#cbd5e1;font-size:.9rem;padding:6px 0;
}
.footer .footer-contact .ico-mini{
 width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
 background:rgba(255,255,255,.06);color:var(--gold-400);font-size:.9rem;flex:none;transition:.2s;
}
.footer .footer-contact a:hover .ico-mini{background:var(--gold-400);color:var(--navy-900)}
.footer .footer-contact .ico-mini.line{color:#06c755}
.footer .footer-contact .ico-mini.fb{color:#60a5fa}
.footer .footer-contact a:hover{padding-left:0;color:#fff}
.footer .footer-hours{
 display:flex;align-items:center;gap:10px;color:#94a3b8;font-size:.88rem;
 padding:8px 0 0;margin-top:6px;border-top:1px dashed rgba(255,255,255,.08);
}
.footer .footer-hours .ico-mini{color:var(--gold-400)}
.footer-bottom{
 text-align:center;border-top:1px solid rgba(255,255,255,.08);
 padding:22px;margin-top:44px;color:#94a3b8;font-size:.85rem;
 background:rgba(0,0,0,.2);
}
.footer-bottom strong{color:#cbd5e1;font-weight:600}

/* ====== FAB CONTACT ====== */
.fab{
 position:fixed;bottom:24px;left:24px;z-index:40;
 display:flex;flex-direction:column;gap:10px;
}
.fab a{
 width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
 color:#fff;box-shadow:0 10px 25px rgba(0,0,0,.2);transition:.25s;text-decoration:none;font-size:1.3rem;
}
.fab a:hover{transform:scale(1.1)}
.fab .line{background:#06c755}
.fab .phone{background:linear-gradient(135deg,var(--blue-500),var(--navy-700))}

/* ====== UTILS ====== */
.text-center{text-align:center}

/* WorkFlow DMS packages — keep price line aligned across 4 cards */
.wfd-packages .svc-head{align-items:flex-start;min-height:106px}
.wfd-packages .svc-head small{display:block;min-height:38px;line-height:1.4}
.wfd-packages .svc-body > div:nth-child(1){min-height:42px}
.wfd-packages .svc-body > div:nth-child(2){min-height:32px}
.wfd-packages .svc-body > div:nth-child(3){min-height:24px}

/* Language swap is handled by main.js (swaps textContent). */
.mt-1{margin-top:24px}
.alt-bg{background:#fff}

/* ====== RESPONSIVE ====== */
@media (max-width: 960px){
 .hero-inner{grid-template-columns:1fr;gap:30px}
 .pills{grid-template-columns:repeat(2,1fr)}
 .svc-grid,.pricing-grid{grid-template-columns:1fr;gap:20px}
 .price-card.popular{transform:none}
 .benefits,.who-grid{grid-template-columns:repeat(2,1fr)}
 .footer-inner{grid-template-columns:1fr 1fr;gap:24px}
 .footer-col + .footer-col::before{display:none}
 .contact-grid{grid-template-columns:1fr}
 .promo{grid-template-columns:1fr;text-align:center}
 .form .row{grid-template-columns:1fr}
 .hero{padding:60px 0 90px}
 .section{padding:60px 0}
}
/* Nav collapses earlier than other sections — full menu needs ~1080px to avoid wrapping */
@media (max-width:1100px){
 .menu{
 display:none;position:absolute;top:100%;left:0;right:0;
 flex-direction:column;background:var(--navy-800);padding:14px;gap:0;
 }
 .menu.open{display:flex}
 .menu a{display:block;padding:12px 14px;border-radius:6px}
 .menu-toggle{display:block}
}
@media (max-width:520px){
 .pills{grid-template-columns:1fr}
 .benefits,.who-grid{grid-template-columns:1fr 1fr}
 .footer-inner{grid-template-columns:1fr}
}

/* Breadcrumb */
.breadcrumb{background:var(--navy-900);border-bottom:1px solid rgba(255,255,255,.05);font-size:.85rem}
.breadcrumb-inner{max-width:1280px;margin:0 auto;padding:10px 5%;display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.5)}
@media (min-width:769px){.breadcrumb-inner{padding-left:calc(5% + 2cm)}}
.breadcrumb-inner a{color:rgba(255,255,255,.7);text-decoration:none;transition:.2s}
.breadcrumb-inner a:hover{color:#fff;text-decoration:none}
.breadcrumb-inner .sep{color:rgba(255,255,255,.3)}
.breadcrumb-inner .current{color:var(--gold-400);font-weight:500}

/* Trust bar */
.trust-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;align-items:center}
.trust-item{display:flex;gap:12px;align-items:center;background:#fff;padding:16px;border-radius:var(--radius-md);border:1px solid #e5e7eb;color:var(--navy-800);font-size:.92rem;font-weight:600}
.trust-item i{font-size:1.6rem;color:var(--blue-500);flex-shrink:0}
.trust-item strong{display:block;font-size:.92rem;color:var(--navy-800)}
.trust-item small{display:block;color:var(--text-muted);font-size:.78rem;margin-top:2px}
@media (max-width:960px){.trust-bar{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.trust-bar{grid-template-columns:1fr}}

/* Cookie consent banner */
.tdns-cookie{
    position:fixed;left:50%;right:auto;bottom:16px;z-index:9999;
    width:min(780px,calc(100% - 32px));
    background:#0b2545;color:#e2e8f0;border-radius:14px;
    box-shadow:0 20px 50px rgba(11,37,69,.45);
    border:1px solid rgba(251,191,36,.25);
    padding:18px 22px;
    transform:translate(-50%,20px);opacity:0;transition:.28s ease;
}
.tdns-cookie.show{transform:translate(-50%,0);opacity:1}
.tdns-cookie-inner{
    max-width:var(--maxw);margin:0 auto;
    display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
}
.tdns-cookie-text strong{display:block;color:#fff;font-size:1rem;margin-bottom:4px}
.tdns-cookie-text p{margin:0;font-size:.88rem;line-height:1.55;color:#cbd5e1}
.tdns-cookie-text a{color:var(--gold-400);text-decoration:underline}
.tdns-cookie-actions{display:flex;gap:10px;flex-shrink:0}
.tdns-cookie-actions button{
    border:none;cursor:pointer;font-weight:700;padding:10px 18px;border-radius:10px;
    font-family:inherit;font-size:.9rem;transition:.18s;
}
.btn-cookie-necessary{background:rgba(255,255,255,.08);color:#e2e8f0;border:1px solid rgba(255,255,255,.18)!important}
.btn-cookie-necessary:hover{background:rgba(255,255,255,.14)}
.btn-cookie-accept{background:linear-gradient(135deg,var(--gold-400),var(--gold-500));color:var(--navy-900)}
.btn-cookie-accept:hover{filter:brightness(1.08)}
@media (max-width:760px){
    .tdns-cookie{width:calc(100% - 16px);bottom:8px;padding:16px}
    .tdns-cookie-inner{grid-template-columns:1fr;gap:12px}
    .tdns-cookie-actions{justify-content:stretch}
    .tdns-cookie-actions button{flex:1}
}

/* FAQ */
.faq-list{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1px solid #e5e7eb;border-radius:var(--radius-md);padding:0;overflow:hidden}
.faq-item summary{padding:18px 22px;cursor:pointer;font-weight:600;color:var(--navy-800);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.4rem;color:var(--blue-500);font-weight:400;transition:transform .2s}
.faq-item[open] summary::after{content:"−"}
.faq-item p{padding:0 22px 18px;margin:0;color:var(--text-muted);line-height:1.7}
.faq-item p a{color:var(--blue-500)}

/* css/theme2026.css */
/* ThaiDNS 2026 visual system. The original page content and forms remain intact. */
:root{--navy-900:#12236f;--navy-800:#1a2c82;--navy-700:#263d9d;--navy-600:#354db5;--blue-500:#465dca;--blue-400:#667be0;--gold-500:#f7cb61;--gold-400:#ffe19b;--text:#243150;--text-muted:#607096;--bg:#f5f8ff;--shadow-sm:0 3px 16px #172b7720;--shadow-md:0 16px 38px #182d8024;--shadow-lg:0 25px 55px #172b8031;--radius:14px;--radius-md:18px;--radius-lg:24px;--maxw:1240px}
html{scroll-behavior:smooth}body.theme-2026{background:#f7f9ff;color:var(--text)}.theme-2026 a:focus-visible,.theme-2026 button:focus-visible,.theme-2026 summary:focus-visible{outline:3px solid #ffd063;outline-offset:3px}
.theme-2026 .nav{background:linear-gradient(105deg,#192a7a,#4656b5);box-shadow:0 6px 24px #14257532}.theme-2026 .nav-inner{padding:9px 22px}.theme-2026 .brand-logo{height:55px;max-width:225px}.theme-2026 .menu{gap:0}.theme-2026 .menu a{font-size:.89rem;padding:9px 11px;border-radius:8px}.theme-2026 .menu a:hover,.theme-2026 .menu a.active{background:#ffffff20}.theme-2026 .nav-right{gap:11px}.theme-2026 .nav-login{display:inline-flex;align-items:center;color:#fff;border:1px solid #ffffff66;padding:9px 12px;border-radius:6px;white-space:nowrap;font-size:.82rem;font-weight:700}.theme-2026 .nav-login:hover{color:#fff;background:#ffffff22}.theme-2026 .lang-switch{background:#ffffff13;border-color:#ffffff28;gap:2px}.theme-2026 .lang-switch a{display:inline-flex;align-items:center;gap:5px;padding:5px 7px;font-size:.7rem}.theme-2026 .lang-switch img{width:22px;height:15px;border-radius:2px;box-shadow:0 1px 4px #08175d55}.theme-2026 .nav-right .btn-primary{background:#dbeeff;color:#1b2e82;border-radius:6px;font-size:.8rem;font-weight:800;padding:10px 14px;box-shadow:none}.theme-2026 .menu .dropdown{border:1px solid #d5e0ff;box-shadow:0 18px 45px #14257836}.theme-2026 .menu .dropdown a:hover{background:#eaf1ff;color:#243c9e}
.theme-2026 .breadcrumb{background:#142574;border-top:1px solid #ffffff20}.theme-2026 .breadcrumb .current{color:#dceaff}.theme-2026 .hero{position:relative;padding:80px 0 95px;background:radial-gradient(circle at 80% 35%,#6c70d2 0%,#4459bd 30%,transparent 60%),linear-gradient(110deg,#172974 0%,#2c43a2 55%,#5c63c8 100%)}.theme-2026 .hero::before{background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(90deg,transparent,#000)}.theme-2026 .hero::after{content:"";position:absolute;right:1%;top:9%;width:min(43vw,530px);height:82%;background-image:var(--hero-image);background-repeat:no-repeat;background-size:contain;background-position:center;opacity:.25;pointer-events:none}.theme-2026 .hero-inner{position:relative;z-index:1}.theme-2026 .hero h1{background:none;color:#fff;-webkit-text-fill-color:#fff;font-size:clamp(2.5rem,4.3vw,4.25rem);line-height:1.2;letter-spacing:-.05em}.theme-2026 .hero h1 .accent{-webkit-text-fill-color:#cceaff;color:#cceaff}.theme-2026 .hero-eyebrow{background:#ffffff13;border:1px solid #c0d3ff5e;color:#d9e9ff;font-size:.75rem;letter-spacing:.05em}.theme-2026 .hero p.lead,.theme-2026 .hero .hero-lead{color:#e0e9ff}.theme-2026 .hero-card{background:#ffffff16;border:1px solid #e1eaff54;backdrop-filter:blur(15px);box-shadow:0 22px 45px #07135433}.theme-2026 .hero-badge{background:#f8d275;color:#1b2c77}.theme-2026 .stat .n{color:#e8f3ff}.theme-2026 .btn-primary{background:#dceeff;color:#1d3289;border-radius:7px;box-shadow:0 7px 20px #102e8021}.theme-2026 .btn-primary:hover{background:#fff;color:#1d3289;box-shadow:0 10px 27px #12246432}.theme-2026 .btn-outline{border-color:#445dca;color:#344eae;border-radius:7px}.theme-2026 .btn-outline:hover{background:#445dca;color:#fff}.theme-2026 .hero .btn-outline{color:#fff;border-color:#d6e7ff}.theme-2026 .hero .btn-outline:hover{background:#ffffff24}
.theme-2026 .section{padding:88px 0}.theme-2026 .section.alt-bg,.theme-2026 .alt-bg{background:#eaf2ff}.theme-2026 .section-head{margin-bottom:43px}.theme-2026 .section-head .eyebrow{color:#556cca;letter-spacing:.15em}.theme-2026 .section-head h2{color:#1c2d81;font-size:clamp(2rem,3.4vw,3rem);letter-spacing:-.045em;line-height:1.3}.theme-2026 .section-head h2::before{content:"";display:block;width:34px;height:5px;border-radius:5px;background:linear-gradient(90deg,#4862ca,#92b9ff);margin:0 auto 18px}.theme-2026 .section-head p{color:#5c6c93}.theme-2026 .svc-card,.theme-2026 .price-card,.theme-2026 .who,.theme-2026 .trust-item,.theme-2026 .faq-item{border-color:#dce5fa;box-shadow:0 10px 30px #2e4b9210;border-radius:17px}.theme-2026 .svc-card:hover,.theme-2026 .price-card:hover{transform:translateY(-5px);box-shadow:0 20px 42px #243e9630}.theme-2026 .svc-blue .svc-head,.theme-2026 .svc-green .svc-head,.theme-2026 .svc-purple .svc-head,.theme-2026 .svc-orange .svc-head{background:linear-gradient(120deg,#223a98,#6371d3)}.theme-2026 .svc-card > .svc-icon,.theme-2026 .svc-card > .icon,.theme-2026 .benefit .ico,.theme-2026 .who .ico{background:linear-gradient(135deg,#3149ad,#7c8be6);color:#fff}.theme-2026 .price-card.popular{border-color:#879be8;box-shadow:0 20px 40px #203e9a22}.theme-2026 .price-card.popular::before,.theme-2026 .price-card .popular-tag{background:#ffe29a;color:#1b2d80;box-shadow:none}.theme-2026 .price-amount .num,.theme-2026 .price-card .price .amount{color:#304bb1}.theme-2026 .cta-band{background:linear-gradient(110deg,#1c318f,#5669c9);border-radius:22px;box-shadow:0 22px 48px #1f378c28}.theme-2026 .faq-item[open]{border-color:#9baee8}.theme-2026 .faq-item summary{color:#243985}
.theme-2026 .footer{margin-top:0;padding-top:70px;background:#172669}.theme-2026 .footer::before{height:1px;background:#9fb7ff69}.theme-2026 .footer h5::before{background:#a5c6ff}.theme-2026 .footer a:hover{color:#fff}.theme-2026 .footer-col + .footer-col::before{background:#ffffff1c}.theme-2026 .footer-bottom{background:#0f1d59}.theme-2026 .footer .brand-logo{height:64px}.theme-2026 .tdns-cookie{background:#1d2d78}
@media(max-width:1280px){.theme-2026 .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:#1b2c82;padding:12px;gap:0;max-height:75vh;overflow:auto}.theme-2026 .menu.open{display:flex}.theme-2026 .menu a{display:block;padding:12px 14px}.theme-2026 .menu-toggle{display:block}.theme-2026 .menu .dropdown{position:static;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none}.theme-2026 .menu li.has-dropdown.open>.dropdown{display:block}}
@media(max-width:960px){.theme-2026 .hero::after{width:65%;right:-12%;opacity:.13}.theme-2026 .hero{padding:65px 0 80px}.theme-2026 .section{padding:66px 0}.theme-2026 .footer-inner{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.theme-2026 .nav-inner{padding:9px 14px}.theme-2026 .brand-logo{height:44px;max-width:155px}.theme-2026 .nav-right{gap:5px}.theme-2026 .nav-login{font-size:.68rem;padding:7px}.theme-2026 .lang-switch a{font-size:0;padding:4px}.theme-2026 .lang-switch img{width:21px;height:14px}.theme-2026 .nav-right .btn-primary{display:none}.theme-2026 .hero h1{font-size:clamp(2.2rem,8vw,3rem)}.theme-2026 .hero::after{display:none}.theme-2026 .footer-inner{grid-template-columns:1fr}.theme-2026 .section-head h2{font-size:2rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.theme-2026 *{transition:none!important}}
.theme-2026 .hero-inner:has(> :only-child):not(.solo){max-width:var(--maxw);grid-template-columns:minmax(0,1fr) minmax(0,.7fr);text-align:left}.theme-2026 .hero-inner:has(> :only-child):not(.solo) .hero-eyebrow{margin-left:0}.theme-2026 .hero-inner:has(> :only-child):not(.solo) .hero-lead{margin-left:0}.theme-2026 .hero-inner:has(> :only-child):not(.solo) h1{max-width:760px}.theme-2026 .hero-inner:has(> :only-child):not(.solo) p{max-width:640px}.theme-2026 .hero:has(.hero-inner:has(> :only-child):not(.solo))::after{opacity:.42;right:2%;width:40%}
@media(max-width:760px){.theme-2026 .hero-inner:has(> :only-child):not(.solo){display:block}.theme-2026 .hero:has(.hero-inner:has(> :only-child):not(.solo))::after{display:none}}

/* Keep the illustration in its own visual column on all interior pages. */
.theme-2026 .hero{overflow:hidden;min-height:440px;display:flex;align-items:center;padding:78px 0 86px}
.theme-2026 .hero .hero-inner.solo,.theme-2026 .hero .hero-inner:has(> :only-child){width:100%;max-width:1240px;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);text-align:left;gap:5%}
.theme-2026 .hero .hero-inner.solo>div:first-child,.theme-2026 .hero .hero-inner:has(> :only-child)>div:first-child{max-width:650px;grid-column:1}
.theme-2026 .hero .hero-inner.solo .hero-eyebrow,.theme-2026 .hero .hero-inner:has(> :only-child) .hero-eyebrow,.theme-2026 .hero .hero-inner.solo .hero-lead,.theme-2026 .hero .hero-inner:has(> :only-child) .hero-lead,.theme-2026 .hero .hero-inner.solo .hero-card,.theme-2026 .hero .hero-inner:has(> :only-child) .hero-card{margin-left:0;margin-right:0}
.theme-2026 .hero::after,.theme-2026 .hero:has(.hero-inner:has(> :only-child):not(.solo))::after{right:4%;top:12%;width:41%;height:76%;opacity:.82}
.theme-2026 .hero h1{font-size:clamp(2.4rem,3.4vw,3.55rem);line-height:1.17}
.theme-2026 .tdns-cookie{left:22px;right:auto;width:min(390px,calc(100% - 44px));padding:14px 16px;transform:translateY(20px)}
.theme-2026 .tdns-cookie.show{transform:translateY(0)}
.theme-2026 .tdns-cookie-inner{grid-template-columns:1fr;gap:12px}
.theme-2026 .tdns-cookie-actions{width:100%}.theme-2026 .tdns-cookie-actions button{flex:1}
@media(max-width:960px){.theme-2026 .hero .hero-inner.solo,.theme-2026 .hero .hero-inner:has(> :only-child){display:block;text-align:left;max-width:760px}.theme-2026 .hero::after,.theme-2026 .hero:has(.hero-inner:has(> :only-child):not(.solo))::after{display:none}.theme-2026 .hero{min-height:0;padding:58px 0 65px}}
@media(max-width:600px){.theme-2026 .hero h1{font-size:clamp(2rem,8vw,2.7rem)}.theme-2026 .tdns-cookie{left:8px;width:calc(100% - 16px);bottom:8px;padding:14px}.theme-2026 .tdns-cookie-text strong{font-size:.92rem}.theme-2026 .tdns-cookie-text p{font-size:.78rem}}

/* Center interior hero copy within the same content frame as the homepage. */
.theme-2026 .hero .hero-inner.solo,.theme-2026 .hero .hero-inner:has(> :only-child){display:block;width:min(100%,1000px);max-width:1000px;margin-inline:auto;text-align:center}
.theme-2026 .hero .hero-inner.solo>div:first-child,.theme-2026 .hero .hero-inner:has(> :only-child)>div:first-child{max-width:900px;margin-inline:auto}
.theme-2026 .hero .hero-inner.solo .hero-eyebrow,.theme-2026 .hero .hero-inner:has(> :only-child) .hero-eyebrow,.theme-2026 .hero .hero-inner.solo .hero-lead,.theme-2026 .hero .hero-inner:has(> :only-child) .hero-lead,.theme-2026 .hero .hero-inner.solo .lead,.theme-2026 .hero .hero-inner:has(> :only-child) .lead{margin-left:auto;margin-right:auto}
.theme-2026 .hero .hero-inner.solo .hero-card,.theme-2026 .hero .hero-inner:has(> :only-child) .hero-card{margin-left:auto;margin-right:auto}
.theme-2026 .hero::after,.theme-2026 .hero:has(.hero-inner:has(> :only-child):not(.solo))::after{right:-7%;top:16%;width:21%;height:68%;opacity:.62}
.theme-2026 .hero::after{right:0!important;top:18%!important;width:20%!important;height:64%!important;opacity:.55!important}
@media(max-width:960px){.theme-2026 .hero .hero-inner.solo,.theme-2026 .hero .hero-inner:has(> :only-child){text-align:center;max-width:760px}.theme-2026 .hero::after,.theme-2026 .hero:has(.hero-inner:has(> :only-child):not(.solo))::after{display:none}}
.theme-2026 .service-intro{padding:54px 0}
.theme-2026 .service-intro .container{max-width:1000px}
.theme-2026 .service-intro h2{margin:0 0 14px;color:#1c2d81;line-height:1.3}
.theme-2026 .service-intro p{max-width:850px;margin:0;color:#485b7e;line-height:1.75;font-size:1.04rem}
@media(max-width:600px){.theme-2026 .service-intro{padding:42px 0}}
.theme-2026 .section .btn-primary{background:#243c98;color:#fff;border-color:#243c98}
.theme-2026 .section .btn-primary:hover{background:#182b78;color:#fff}
.theme-2026 .section .btn-ghost{background:#fff;color:#243c98;border:1px solid #6478bd}
.theme-2026 .section .btn-ghost:hover{background:#dce8ff;color:#182b78}
.theme-2026 .section.alt-bg>.container>h2{color:#1c2d81}
.theme-2026 .section.alt-bg>.container>p{color:#384c75;opacity:1}
.theme-2026 .cta-band h2,.theme-2026 .cta-band p{color:#fff;opacity:1}
.theme-2026 .cta-band .btn-primary{background:#dceeff;color:#1d3289;border-color:#dceeff}
.theme-2026 .cta-band .btn-outline,.theme-2026 .cta-band .btn-ghost{background:transparent;color:#fff;border-color:#dceeff}
.theme-2026 .cta-band .btn-outline:hover,.theme-2026 .cta-band .btn-ghost:hover{background:#ffffff25;color:#fff}

/* assets/site2026/shared-shell.css */

.shared-shell{font-family:'DM Sans','Noto Sans Thai',sans-serif}.shared-shell *{box-sizing:border-box}.shared-shell a{text-decoration:none}.shared-shell .wrap{max-width:1280px;margin:auto;padding-left:5%;padding-right:5%}
.shared-header{background:linear-gradient(105deg,#18287b,#5456c3);color:#fff;position:relative;z-index:100}.shared-header .nav{height:80px;display:flex;align-items:center;justify-content:space-between;gap:25px;background:transparent;box-shadow:none;padding-top:0;padding-bottom:0;max-width:1280px}.shared-header .brand{display:inline-flex;align-items:center;flex:none}.shared-header .brand img{width:190px;height:auto;max-width:none}.shared-header nav{display:flex;align-items:center;gap:27px;font-size:13px}.shared-header nav>a,.shared-header .nav-service>a{color:#fff;opacity:.9;white-space:nowrap}.shared-header nav a:hover{opacity:1;text-decoration:underline}.shared-header .nav-actions{display:flex;align-items:center;gap:12px;font-size:13px;margin-left:auto}.shared-header .languages{display:flex;align-items:center;gap:7px;font:700 10px 'IBM Plex Mono',monospace}.shared-header .languages a{display:inline-flex;align-items:center;gap:4px;color:#fff;opacity:.7}.shared-header .languages a[aria-current]{opacity:1;text-decoration:underline}.shared-header .languages img{width:22px;height:15px;border-radius:2px;box-shadow:0 1px 4px #0d1d6755}.shared-header .home-login{border:1px solid #ffffff75;border-radius:5px;padding:10px 13px;color:#fff;font-size:12px;font-weight:700;white-space:nowrap}.shared-header .home-login:hover{background:#ffffff24}.shared-header .nav-button{padding:11px 17px;background:#c9e5ff;color:#1c328d;border-radius:4px;font-weight:700;white-space:nowrap}.shared-header .nav-service{position:relative;display:flex;align-items:center}.shared-header .service-toggle{display:none}.shared-header .service-dropdown{display:none;position:absolute;top:100%;left:-20px;background:#fff;color:#233889;min-width:230px;padding:10px 0;border-radius:7px;box-shadow:0 18px 38px #11195b55;z-index:101}.shared-header .service-dropdown a{display:block;padding:10px 18px;color:#233889;font-size:12px;white-space:nowrap}.shared-header .service-dropdown a:hover{background:#e7efff;text-decoration:none}.shared-header .nav-service:hover .service-dropdown,.shared-header .nav-service:focus-within .service-dropdown{display:block}.shared-header .menu{display:none;border:0;background:none;color:#fff;font-size:23px;cursor:pointer;padding:4px}
.site-footer.shared-shell{background:#172773;color:#fff;margin-top:0;padding:0}.site-footer.shared-shell .footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr) 1.3fr;gap:35px;padding-top:70px;padding-bottom:65px}.site-footer.shared-shell .brand img{width:190px;height:auto}.site-footer.shared-shell h3{font-size:15px;margin:0 0 20px;color:#d3e9ff}.site-footer.shared-shell p{font-size:12px;color:#bec8e9;margin:20px 0 0;line-height:1.8}.site-footer.shared-shell a:not(.brand),.site-footer.shared-shell small{display:block;font-size:12px;line-height:1.55;color:#bfc9ea;margin:0 0 12px}.site-footer.shared-shell a:hover{text-decoration:underline;color:#fff}.site-footer.shared-shell small{margin-top:25px}.site-footer.shared-shell .footer-bottom{padding-top:22px;padding-bottom:25px;border-top:1px solid #ffffff33;color:#bfc9ea;font-size:12px}.site-footer.shared-shell .footer-bottom strong{color:#fff}
@media(max-width:1100px){.shared-header nav{gap:13px;font-size:11px}.shared-header .nav-actions{gap:8px}.shared-header .nav-button{font-size:11px;padding:9px}.site-footer.shared-shell .footer-grid{grid-template-columns:repeat(3,1fr)}.site-footer.shared-shell .footer-grid>div:first-child{grid-column:span 3}}
@media(max-width:1000px){.shared-header .nav{height:68px}.shared-header nav{display:none;position:absolute;top:68px;left:0;right:0;background:#26369b;padding:20px 5%;flex-direction:column;align-items:flex-start;box-shadow:0 15px 20px #101c6660;font-size:14px;gap:0}.shared-header nav.open{display:flex}.shared-header nav>a,.shared-header .nav-service>a{display:block;padding:10px 0}.shared-header .nav-service{width:100%;display:flex;flex-wrap:wrap}.shared-header .nav-service>a{flex:1}.shared-header .service-toggle{display:block;border:0;background:none;color:#fff;padding:10px 14px;cursor:pointer}.shared-header .service-dropdown,.shared-header .nav-service:hover .service-dropdown,.shared-header .nav-service:focus-within .service-dropdown{display:none;position:static;width:100%;box-shadow:none;border-radius:0;background:#3445a8;color:#fff;padding:5px 0 5px 12px}.shared-header .nav-service.expanded .service-dropdown{display:block}.shared-header .service-dropdown a{color:#fff;font-size:13px}.shared-header .service-dropdown a:hover{background:#ffffff1c}.shared-header .menu{display:block}}
@media(max-width:720px){.site-footer.shared-shell .footer-grid{grid-template-columns:repeat(2,1fr);gap:25px}.site-footer.shared-shell .footer-grid>div:first-child{grid-column:span 2}}
@media(max-width:560px){.shared-header .brand img{width:150px}.shared-header .languages a{font-size:0}.shared-header .home-login{font-size:10px;padding:8px}.shared-header .nav-button{display:none}}
@media(max-width:480px){.site-footer.shared-shell .footer-grid{grid-template-columns:1fr}.site-footer.shared-shell .footer-grid>div:first-child{grid-column:span 1}.site-footer.shared-shell h3{margin-top:10px}}
.shared-header .menu,.theme-2026 .shared-header .menu{position:static;top:auto;left:auto;right:auto;max-height:none;overflow:visible;flex:none}
@media(min-width:1001px){.shared-header .nav{display:grid;grid-template-columns:190px minmax(0,1fr) auto;gap:20px}.shared-header nav{justify-self:center}.shared-header .nav-actions{margin-left:0;justify-self:end}}

/* Match the homepage navigation scale on every language and utility page. */
.shared-header nav{font-size:14px}
.shared-header .service-dropdown a{font-size:13px}
.shared-header .service-dropdown{max-height:min(75vh,650px);overflow-y:auto;min-width:270px;padding:8px 0}
.shared-header .service-group-label{display:block;padding:10px 18px 4px;color:#6073ad;font-size:11px;font-weight:800;letter-spacing:.04em;border-top:1px solid #e4eafa;margin-top:5px}
.shared-header .service-dropdown a{padding:7px 18px}
body[data-visual="business-email"] .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-visual="business-email"] .svc-card .svc-body>p{margin:0 0 18px;line-height:1.65}
body[data-visual="business-email"] .svc-card .svc-body>a{margin-top:auto;font-weight:700}
.hosting-hero .hero-price-cue,.hero .hero-price-cue{display:inline-flex;align-items:center;width:max-content;max-width:100%;margin:14px 0 8px;padding:8px 14px;border:1px solid #d8eaff88;border-radius:999px;background:#e7f3ff24;color:#fff;font-size:16px;font-weight:800;line-height:1.35}
@media(max-width:720px){body[data-visual="business-email"] .svc-grid{grid-template-columns:1fr}}
@media(max-width:1000px){.shared-header .service-group-label{color:#c5d6ff;border-color:#ffffff30}.shared-header .service-dropdown{max-height:55vh;overflow-y:auto}}
.shared-header .languages{font-size:11px}
.shared-header .home-login,.shared-header .nav-button{font-size:13px}
@media(max-width:1000px){.shared-header nav{font-size:15px}.shared-header .service-dropdown a{font-size:14px}}
@media(max-width:560px){.shared-header .nav{gap:8px}.shared-header .brand img{width:145px}.shared-header .nav-actions{gap:5px}.shared-header .languages{gap:3px;margin-right:0}.shared-header .languages img{width:19px;height:13px}.shared-header .home-login{font-size:11px;padding:7px}.shared-header .menu{font-size:22px}}

/* assets/site2026/footer-home.css */
.footer-home{position:relative;overflow:hidden;background:#101e5e;color:#fff}
.footer-home::before{content:"";position:absolute;inset:0 0 auto;height:390px;background:radial-gradient(circle at 75% 10%,#4f61bf88,transparent 52%),linear-gradient(120deg,#1b2d80,#263994);pointer-events:none}
.footer-home .wrap{position:relative}.footer-invite{display:flex;align-items:center;justify-content:space-between;gap:60px;padding-top:73px;padding-bottom:72px}.footer-kicker{display:block;color:#abd7ff;font:700 10px 'IBM Plex Mono',monospace;letter-spacing:.15em;margin-bottom:15px}.footer-invite h2{font-size:clamp(30px,3vw,43px);line-height:1.18;letter-spacing:-.045em;margin:0 0 17px}.footer-invite p{font-size:14px;line-height:1.7;color:#d3def9;max-width:565px;margin:0}.footer-invite-actions{display:flex;gap:12px;flex:none}.footer-invite-actions a{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:48px;padding:0 18px;border-radius:6px;font-size:12px;font-weight:800;white-space:nowrap;transition:transform .2s,background .2s}.footer-invite-actions a:hover{transform:translateY(-3px);text-decoration:none}.footer-primary{background:#d2ebff;color:#1b328d}.footer-primary:hover{background:#fff}.footer-secondary{border:1px solid #bbd2ff8a;color:#fff}.footer-secondary:hover{background:#ffffff1d}.footer-divider{height:1px;background:#ffffff2b}
.footer-main{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:52px;padding-top:62px;padding-bottom:66px}.footer-identity img{display:block;width:190px;height:auto}.footer-identity p{color:#b8c7ef;font-size:13px;line-height:1.75;max-width:300px;margin:22px 0 20px}.footer-chips{display:flex;gap:7px;flex-wrap:wrap}.footer-chips span{border:1px solid #8ba5ed5c;border-radius:99px;color:#d6e7ff;padding:5px 10px;font-size:10px;font-weight:700}.footer-home h3{color:#fff;font-size:14px;margin:0 0 23px;letter-spacing:0}.footer-links a,.footer-contact-new>a{display:block;color:#bdccef;font-size:12px;line-height:1.5;margin:0 0 13px}.footer-home a:hover{color:#fff;text-decoration:underline}.footer-contact-label{display:block;color:#9eb0e6;font-size:11px;margin-bottom:4px}.footer-contact-new .footer-contact-phone{font-size:23px;line-height:1.3;font-weight:800;color:#fff;letter-spacing:-.035em;margin:0 0 14px}.footer-contact-new .footer-social{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.footer-social a{display:inline-flex;padding:8px 11px;border:1px solid #7d96da7d;border-radius:5px;color:#deebff;font-size:11px;font-weight:700}.footer-contact-new small{display:block;color:#8fa4d8;font-size:11px;margin-top:19px}.footer-legal{border-top:1px solid #ffffff24;background:#0d194e}.footer-legal .wrap{display:flex;justify-content:space-between;gap:20px;padding-top:21px;padding-bottom:23px;color:#a9b9e2;font-size:11px}.footer-legal strong{color:#e8f3ff}
@media(max-width:1100px){.footer-invite{align-items:flex-start}.footer-invite-actions{flex-direction:column}.footer-main{grid-template-columns:repeat(2,1fr);gap:40px}.footer-identity{max-width:380px}}
@media(max-width:720px){.footer-invite{display:block;padding-top:58px;padding-bottom:58px}.footer-invite-actions{display:flex;flex-direction:row;flex-wrap:wrap;margin-top:28px}.footer-main{gap:38px 25px}.footer-legal .wrap{display:block}.footer-legal .wrap span{display:block;margin:4px 0}}
@media(max-width:480px){.footer-invite h2{font-size:34px}.footer-invite-actions a{width:100%}.footer-main{grid-template-columns:1fr 1fr;gap:35px 18px;padding-top:48px;padding-bottom:50px}.footer-identity,.footer-contact-new{grid-column:span 2}.footer-identity p{max-width:none}.footer-home h3{margin-bottom:18px}.footer-contact-new .footer-social{margin-bottom:8px}}

/* Homepage footer navigation readability */
.footer-home h3{font-size:16px}
.footer-home .footer-links a,.footer-home .footer-contact-new>a{font-size:14px;line-height:1.6}
.footer-home .footer-invite-actions a{font-size:13px}
.footer-home .footer-social a,.footer-home .footer-contact-label,.footer-home .footer-contact-new small{font-size:12px}
.footer-home .footer-identity p{font-size:14px}
.footer-home .footer-contact-new .footer-contact-phone{font-size:24px}
.footer-home{font-family:'DM Sans','Noto Sans Thai',sans-serif}
.footer-home *{box-sizing:border-box}
.footer-home .wrap{max-width:1280px;margin:auto;padding-left:5%;padding-right:5%}
.footer-home a{text-decoration:none}

/* assets/site2026/hosting-detail.css */
.hosting-detail{background:#f5f8ff;color:#1c2d81}
.hosting-detail main{display:block}
.hosting-detail .hosting-hero{background:linear-gradient(110deg,#172976,#3b4cad 58%,#6668ca);color:#fff;overflow:hidden}
.hosting-detail .hosting-hero-inner{max-width:1280px;margin:auto;padding:86px 5% 95px;display:grid;grid-template-columns:1.1fr .9fr;gap:65px;align-items:center}
.hosting-detail .hosting-kicker{display:inline-flex;border:1px solid #b5d2ff8c;border-radius:30px;padding:7px 13px;font-size:11px;font-weight:800;letter-spacing:.13em;color:#c7e6ff}
.hosting-detail .hosting-hero h1{font-size:clamp(2.8rem,5vw,4.8rem);line-height:1.12;letter-spacing:-.05em;margin:22px 0}
.hosting-detail .hosting-hero p{font-size:17px;line-height:1.8;color:#e2eaff;max-width:650px}
.hosting-detail .hosting-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hosting-detail .hosting-hero-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:7px;font-size:14px;font-weight:800;text-decoration:none}
.hosting-detail .hosting-hero-actions .primary{background:#d3ebff;color:#17328b}
.hosting-detail .hosting-hero-actions .secondary{border:1px solid #c0d9ff9c;color:#fff}
.hosting-detail .hosting-hero-art{position:relative;min-height:350px;display:grid;place-items:center}
.hosting-detail .hosting-hero-art::before{content:"";position:absolute;inset:5%;border:1px solid #d8e5ff44;border-radius:50%;transform:rotate(-20deg)}
.hosting-detail .hosting-hero-art::after{content:"";position:absolute;inset:18%;border:1px solid #d8e5ff44;border-radius:50%;transform:rotate(25deg)}
.hosting-detail .hosting-hero-art .panel{position:relative;z-index:1;width:min(100%,420px);border:1px solid #dce8ff7a;border-radius:20px;background:#e6f0ff1c;box-shadow:0 24px 55px #0915594f;padding:26px;backdrop-filter:blur(5px)}
.hosting-detail .hosting-hero-art .panel-head{display:flex;align-items:center;justify-content:space-between;color:#c9dfff;font-size:12px;font-weight:700;border-bottom:1px solid #dce8ff44;padding-bottom:18px}
.hosting-detail .hosting-hero-art .panel-head i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#98d8ff;margin-right:5px}
.hosting-detail .hosting-hero-art .panel-body{padding:32px 0 8px;text-align:center}
.hosting-detail .hosting-hero-art .panel-body strong{display:block;font-size:clamp(2rem,3vw,2.8rem);line-height:1.1}
.hosting-detail .hosting-hero-art .panel-body small{display:block;font-size:14px;color:#d5e7ff;margin-top:15px}
.hosting-detail .hosting-hero-art .panel-bars{display:flex;gap:8px;margin-top:35px}.hosting-detail .hosting-hero-art .panel-bars span{height:8px;background:#c5e5ff99;border-radius:8px;flex:1}.hosting-detail .hosting-hero-art .panel-bars span:nth-child(2){flex:1.5}.hosting-detail .hosting-hero-art .panel-bars span:nth-child(3){flex:.65}
.hosting-detail .hosting-content{max-width:1280px;margin:auto;padding:0 5%}
.hosting-detail .hosting-section{padding:78px 0}
.hosting-detail .hosting-section.alt{background:#eaf2ff}
.hosting-detail .hosting-section h2{font-size:clamp(2rem,3.4vw,3rem);line-height:1.2;letter-spacing:-.04em;margin:0 0 17px}
.hosting-detail .hosting-section-lead{color:#5c6c93;line-height:1.75;max-width:760px;margin:0 0 34px}
.hosting-detail .hosting-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hosting-detail .hosting-feature{background:#fff;border:1px solid #dce5fa;border-radius:16px;padding:30px;box-shadow:0 12px 30px #243e9612}
.hosting-detail .hosting-feature b{display:block;font-size:13px;letter-spacing:.12em;color:#536bc6;margin-bottom:18px}
.hosting-detail .hosting-feature h3{font-size:1.25rem;margin:0 0 12px}.hosting-detail .hosting-feature p{color:#5c6c93;line-height:1.75;font-size:14px;margin:0}
.hosting-detail .hosting-pricing{background:linear-gradient(180deg,#f3f7ff,#fff)}
.hosting-detail .hosting-pricing .container{max-width:1280px;margin:auto;padding:0 5%}
.hosting-detail .hosting-pricing-head{text-align:left;max-width:850px;margin:0 0 34px}
.hosting-detail .hosting-pricing-head h2{margin:0 0 14px}
.hosting-detail .hosting-plan-group{margin:0}
.hosting-detail .hosting-plan-group-head{display:none}
.hosting-detail .hosting-faq{display:grid;grid-template-columns:.65fr 1fr;gap:50px;align-items:start}
.hosting-detail .hosting-faq-list details{background:#fff;border:1px solid #dce5fa;border-radius:10px;padding:18px 22px;margin-bottom:12px}
.hosting-detail .hosting-faq-list summary{cursor:pointer;font-weight:800;color:#203681}
.hosting-detail .hosting-faq-list p{color:#5c6c93;line-height:1.75;margin:14px 0 0}
.hosting-detail .hosting-related{display:flex;gap:12px;flex-wrap:wrap}.hosting-detail .hosting-related a{display:inline-flex;border:1px solid #bccdf2;background:#fff;border-radius:7px;color:#2a4298;padding:12px 17px;font-weight:800;text-decoration:none}
@media(max-width:900px){.hosting-detail .hosting-hero-inner{grid-template-columns:1fr;gap:10px;padding-top:65px}.hosting-detail .hosting-hero-art{min-height:260px}.hosting-detail .hosting-feature-grid{grid-template-columns:1fr 1fr}.hosting-detail .hosting-faq{grid-template-columns:1fr}}
@media(max-width:650px){.hosting-detail .hosting-hero-inner{padding-top:55px;padding-bottom:55px}.hosting-detail .hosting-hero h1{font-size:2.7rem}.hosting-detail .hosting-hero p{font-size:15px}.hosting-detail .hosting-hero-actions a{width:100%}.hosting-detail .hosting-hero-art{min-height:220px}.hosting-detail .hosting-hero-art .panel{padding:20px}.hosting-detail .hosting-feature-grid{grid-template-columns:1fr}.hosting-detail .hosting-section{padding:60px 0}}

/* assets/site2026/reseller-new.css */
.reseller-new .reseller-pricing{background:linear-gradient(180deg,#f3f7ff,#fff)}
.reseller-new .reseller-plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.reseller-new .reseller-plan-card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid #dce5fa;border-radius:17px;box-shadow:0 13px 30px #213c8812;padding:25px 21px 21px}
.reseller-new .reseller-plan-card h3{font-size:1.25rem;line-height:1.35;color:#1c318f;margin:0 0 7px}
.reseller-new .reseller-plan-spec{color:#5c6c93;font-size:13px;margin:0 0 22px}
.reseller-new .reseller-plan-numbers{display:grid;gap:7px;margin-bottom:18px}
.reseller-new .reseller-plan-numbers span{display:flex;justify-content:space-between;gap:7px;color:#5c6c93;font-size:12px}
.reseller-new .reseller-plan-numbers b{color:#1c318f}
.reseller-new .reseller-plan-card ul{list-style:none;padding:0;margin:0;flex:1}
.reseller-new .reseller-plan-card li{position:relative;border-top:1px dashed #e0e8f4;padding:8px 0 8px 19px;color:#324672;font-size:12px;line-height:1.45}
.reseller-new .reseller-plan-card li::before{content:"✓";position:absolute;left:0;color:#18a45e;font-weight:900}
.reseller-new .reseller-gift{background:#fff2c7;color:#725114;border-radius:8px;padding:9px 10px;font-size:11px;font-weight:800;line-height:1.45;margin:19px 0 0}
.reseller-new .reseller-plan-bottom{margin-top:22px}
.reseller-new .reseller-plan-price{display:flex;align-items:baseline;gap:5px;margin-bottom:15px;color:#304bb1}
.reseller-new .reseller-plan-price strong{font-size:2.12rem;letter-spacing:-.04em;line-height:1}
.reseller-new .reseller-plan-price span{color:#62729a;font-size:12px;font-weight:700}
.reseller-new .reseller-plan-bottom a{display:flex;justify-content:center;align-items:center;min-height:44px;border-radius:7px;background:#d9ecff;color:#1d358d;font-size:13px;font-weight:800;text-decoration:none}
.reseller-new .reseller-plan-bottom a:hover{background:#c5e1ff}
.reseller-new .reseller-note{color:#61729a;font-size:13px;line-height:1.7;margin:20px 0 0}
.reseller-new .reseller-common{margin-top:24px;padding:24px;border:1px solid #dce5fa;border-radius:16px;background:#fff}
.reseller-new .reseller-common h3{margin:0 0 14px;color:#1c318f;font-size:1.15rem}
.reseller-new .reseller-common ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px;list-style:none;margin:0;padding:0}
.reseller-new .reseller-common li{position:relative;padding-left:21px;color:#324672;font-size:14px;line-height:1.5}
.reseller-new .reseller-common li::before{content:"✓";position:absolute;left:0;color:#18a45e;font-weight:900}
.reseller-new .reseller-common .reseller-gift{display:inline-block;margin:18px 0 0;font-size:13px}
@media(max-width:1100px){.reseller-new .reseller-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.reseller-new .reseller-plan-grid,.reseller-new .reseller-common ul{grid-template-columns:1fr}.reseller-new .reseller-plan-card{padding:26px 22px}}