:root{--brand:#1f6fe0;--brand-d:#1657b8;--accent:#e3262b;--warn:#b7791f;--ink:#10213f;--muted:#51607a;--bg:#fff;--alt:#f3f6fb;--line:#dbe2ee;--ok:#13795b;--err:#b42318;--radius:14px}
@media(prefers-color-scheme:dark){:root{--ink:#e8eefb;--muted:#9fb0cc;--bg:#0d1526;--alt:#142038;--line:#26385c;--brand:#5b94ff;--brand-d:#85acff;--accent:#ff6b70;--warn:#e0a63c;--ok:#4cc9a0;--err:#ff8a80}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{overflow-wrap:break-word;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--brand)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--bg);padding:8px;z-index:9}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}
.nav{border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:12px}
.nav img{height:44px;width:auto;display:block}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700;font-size:1.3rem;letter-spacing:-.01em}
.brand img{height:40px;width:40px}.brand i{font-style:normal;font-weight:500;color:var(--muted)}
.brand span{white-space:nowrap}.notfound{text-align:center;padding-block:72px}.notfound img{margin-inline:auto;display:block}.notfound h1{margin:18px 0 22px}
@media(min-width:900px){.nav .brand img{height:44px;width:44px}.brand{font-size:1.45rem}.nav img{height:56px}.nav ul{font-size:.95rem}}
.navmenu{border:0;padding:0;margin:0;background:none}
.nav ul{display:flex;gap:4px 14px;list-style:none;flex-wrap:wrap;font-size:.92rem}
.nav ul a{text-decoration:none;color:var(--muted)}.nav ul a:hover{color:var(--brand)}
/* Brand banner: the logo's own palette, same in light and dark mode. */
.hero{background:#10213f;color:#fff;padding-block:36px 32px}
@media(min-width:900px){.hero{padding-block:60px 56px}}
.hero h1{color:#fff;font-size:clamp(1.7rem,3.8vw,2.5rem)}
.hero .lead{color:#d6e4fb}.hero .lead-en{color:#a9bddf;opacity:1}
.hero .chips li{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#d6e4fb}
@media(min-width:900px){}
.hero .card{color:var(--ink)}
.hero .wrap{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:900px){.hero .wrap{grid-template-columns:1fr 1.05fr;align-items:start}}
h1{font-size:clamp(1.9rem,5vw,2.9rem);line-height:1.15;margin-bottom:12px}
h2{font-size:1.5rem;margin-bottom:14px}h3{font-size:1.05rem;margin-bottom:6px}
.lead{color:var(--muted);font-size:1.08rem;margin-bottom:14px}
.lead-en{color:var(--muted);font-size:.95rem;opacity:.85}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;list-style:none}
.chips li{background:var(--alt);border:1px solid var(--line);border-radius:99px;padding:3px 12px;font-size:.85rem;color:var(--muted)}
section{padding-block:34px}section.alt{background:var(--alt)}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 6px 22px rgba(16,33,63,.07)}
.drop{display:block;border:2px dashed var(--brand);border-radius:var(--radius);padding:26px 14px;text-align:center;cursor:pointer;background:var(--alt);transition:background .15s}
.drop:hover,.drop.over,.drop:focus-within{background:color-mix(in srgb,var(--brand) 12%,var(--bg))}
.drop strong{display:block;font-size:1.05rem}.drop small{color:var(--muted)}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.fname{margin-top:8px;font-size:.92rem;word-break:break-all}
.row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:14px}
label{display:block;font-size:.88rem;font-weight:600;margin-bottom:4px}
select,input[type=text],input[type=email],input[type=number]{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit}
.hint{font-size:.8rem;color:var(--muted);margin-top:3px}
.btn{display:inline-block;background:var(--brand);color:#fff;border:0;border-radius:10px;padding:12px 22px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;margin-top:16px}
.btn:hover{background:var(--brand-d)}.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--brand);border:1px solid var(--brand)}
.status{margin-top:14px;padding:10px 12px;border-radius:8px;background:var(--alt);font-size:.92rem}
.status.err{color:var(--err);border:1px solid var(--err)}
.result{margin-top:16px;border:1px solid var(--ok);border-radius:var(--radius);padding:16px}
.result h3{color:var(--ok)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0;text-align:center}
.stats div{background:var(--alt);border-radius:8px;padding:8px 4px}.stats b{display:block;font-size:1.3rem}
.result dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font-size:.9rem}.result dt{color:var(--muted)}
.result ul{margin-left:18px;font-size:.9rem}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.steps{list-style:none;counter-reset:s;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.steps li{counter-increment:s;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.steps li::before{content:counter(s);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;margin-bottom:8px}
.out{display:block;text-decoration:none;color:inherit;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.out:hover{border-color:var(--brand)}.out b{font-size:1.3rem;color:var(--brand)}.out p{color:var(--muted);font-size:.9rem}
.trust{list-style:none;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.trust li{background:var(--bg);border-left:4px solid var(--ok);padding:10px 14px;border-radius:8px}
.en{color:var(--muted);font-size:.88rem;display:block}
details{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:8px;background:var(--bg)}
summary{cursor:pointer;font-weight:600}details p{margin-top:8px;color:var(--muted)}
.prose p,.prose li{color:var(--muted);margin-bottom:8px}.prose ul{margin-left:20px}
footer{border-top:1px solid var(--line);padding-block:24px;color:var(--muted);font-size:.9rem;text-align:center}
.h1-vi{display:block;font-size:.5em;font-weight:500;line-height:1.3;margin-top:8px;color:var(--muted)}
.hero .h1-vi{color:#a9bddf}
.hero.solo .wrap{grid-template-columns:1fr}
.hero.solo .wrap>div{max-width:820px}
.crumbs{font-size:.85rem;margin-bottom:10px;color:#a9bddf}.crumbs a{color:#d6e4fb}
.tablewrap{overflow-x:auto;margin:12px 0;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.92rem}
tbody th{min-width:6em}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top;overflow-wrap:anywhere}
thead th{background:var(--alt)}tbody th{font-weight:600;background:color-mix(in srgb,var(--alt) 55%,var(--bg))}
td .en,th .en{font-size:.82rem}
.prose td,.prose th{color:var(--ink)}
.prose ol{margin-left:22px}.prose li .en{margin-top:2px}
.related{border-top:1px solid var(--line);background:var(--alt);padding-block:26px}
.related .wrap{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.related h2{font-size:1rem;margin-bottom:8px}
.related ul{list-style:none}.related li{margin-bottom:4px;font-size:.92rem;overflow-wrap:anywhere}
.related [aria-current]{font-weight:600;color:var(--muted)}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.skp-opts{margin-top:14px;border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.skp-opts legend{font-weight:600;padding:0 6px}
.check{display:flex;gap:8px;align-items:center;margin-top:10px;font-size:.92rem}
.check input{width:auto}
/* ---- rebar take-off (/boc-tach-thep) ---- */
.rb-set{margin-top:14px;border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.rb-set legend{font-weight:600;padding:0 6px}
.rb-presets{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 4px}
.btn.sm{padding:7px 12px;font-size:.88rem;margin-top:6px}
.rb-stock{margin-top:6px;display:grid;gap:6px}
.rb-stock-head,.rb-stock-row{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:8px}
.rb-stock-head span{font-size:.78rem;font-weight:600;color:var(--muted)}
textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit}
.rb-adv{margin-top:10px}
.rb-adv label{margin-top:8px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.toolbar .btn{margin-top:0}
.stats.big{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:14px 0}
.stats.big b{font-size:1.45rem}.stats.big span{font-size:.82rem;color:var(--muted)}
.flags{list-style:none;display:grid;gap:6px;margin:8px 0}
.flag{padding:8px 12px;border-radius:8px;border-left:4px solid var(--line);background:var(--alt);font-size:.92rem}
.flag.warn{border-left-color:var(--warn)}.flag.ok{border-left-color:var(--ok)}.flag.info{border-left-color:var(--brand)}
.num-table td{text-align:right}.num-table td.cuts,.num-table td:first-child:not(:only-child){text-align:left}
.num-table tfoot th,.num-table tfoot td{background:var(--alt);font-weight:700}
.num-table input[type=text],.num-table select{min-width:6em;padding:6px 8px}
.num-table input[type=checkbox]{width:auto}
.barlist{margin:8px 0 0 22px;font-size:.88rem;columns:2 320px}
.barlist .stock{color:var(--muted)}
details.inner{margin-top:10px}
.sr{position:absolute;left:-999px}
.hero.solo .toolbar{margin:0}
@media(max-width:480px){.rb-stock-head,.rb-stock-row{grid-template-columns:1fr 1fr 1fr;gap:6px}.rb-set{padding:8px}.card{padding:14px}}
/* ---- coordinate-system detection panel ---- */
.detect{margin-top:16px;border:1px solid var(--line);border-radius:var(--radius);padding:14px 14px 16px}
.detect h3{font-size:1rem;margin-bottom:4px}
.detect .dmsg{font-size:.93rem;color:var(--ink);margin:4px 0 10px}
.dcards{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:760px){.dcards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.dcard{border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--bg);display:flex;flex-direction:column;gap:6px}
.dcard.sel{border:2px solid var(--ok)}
.dcard h4{font-size:.98rem;line-height:1.3}
.dcard .why{font-size:.86rem;color:var(--ink);opacity:.82;margin-left:4px}
.dcard .conf{font-size:.82rem;font-weight:600}
.dcard .conf.cao{color:var(--ok)}.dcard .conf.thap{color:var(--err)}
.dmap{height:150px;border-radius:8px;border:1px solid var(--line);background:var(--alt);z-index:0}
.dmap.tall{height:260px}
.detect .btn{margin-top:4px;min-height:44px}
.dlink{display:inline-flex;align-items:center;background:none;border:0;color:var(--brand);text-decoration:underline;font:inherit;padding:10px 4px;min-height:44px;cursor:pointer}
.dsvg{width:100%;height:300px;border:1px solid var(--line);border-radius:8px;background:var(--alt);touch-action:manipulation;cursor:crosshair}
.dsvg path{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.75}
.dsvg circle{fill:var(--warn);stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke}
.dsvg text{font:700 13px system-ui;fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-width:3px}
.dstep{font-size:.9rem;margin:8px 0 4px}
.dpts{display:grid;gap:8px;grid-template-columns:1fr 1fr;margin-top:8px}
.dpts input{min-height:44px}
.dok{color:var(--ok);font-weight:600;font-size:.92rem;margin-top:8px}
.derr{color:var(--err);font-size:.9rem;margin-top:6px}
.leaflet-container{font:inherit}
.dtype{margin:8px 0;padding:8px 10px}
.dlink .en{display:inline;margin-left:6px}

/* ---- phone: the upload form first, 44 px targets (09/10) ---- */
@media(max-width:700px){
  .nav .wrap{padding-block:6px}
  .nav img{height:36px}
  .navmenu>summary{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;cursor:pointer;font-weight:600;list-style:none}
  .navmenu>summary .en{display:none}
  .navmenu ul{display:block;position:absolute;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);padding:4px 18px 10px;z-index:20}
  .navmenu li a{display:flex;align-items:center;min-height:44px}
  .nav{position:relative}
  .hero{padding-block:16px 20px}
  .hero .lead-en,.hero .chips{display:none}
    .hero h1{font-size:1.55rem;margin-bottom:6px}
  .hero .h1-vi{font-size:.62em;margin-top:4px}
  .hero .lead{font-size:.95rem;margin-bottom:0}
  .hero .wrap{gap:14px}
  .drop{padding:20px 12px}
  select,input[type=text],input[type=email],input[type=number]{min-height:44px}
  .btn.sm{min-height:44px}
  summary{padding-block:10px}
  .related a,footer a,.hint a,.crumbs a,.out,.dlink{display:inline-flex;align-items:center;min-height:44px}
  .related li{margin-bottom:0}
  .hint a{padding-block:2px}
}
@media(max-width:700px){.nav .wrap>a{display:inline-flex;align-items:center;min-height:44px}.skip{padding:12px 8px}}

/* ---- upload form steps: 1 file, 2 function, 3 options ---- */
.stp{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:1.02rem;line-height:1.3;margin:20px 0 10px}
.card>.stp:first-child{margin-top:0}
.stp .num{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;font-size:.82rem;font-weight:700;flex:none}
.stp .en{display:inline;margin-left:2px;font-weight:400}
.fgroup{border:0;margin:0 0 12px;padding:0;min-width:0}
.fgroup legend{font-weight:600;font-size:.92rem;margin-bottom:6px;padding:0}
.fgroup legend .en{display:inline;margin-left:6px;font-weight:400}
.fgroup.dim{opacity:.42}
.fgrid{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.fcard{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:2px;align-items:start;margin:0;border:1px solid var(--line);border-radius:10px;padding:10px 10px 10px 12px;background:var(--bg);color:var(--ink);cursor:pointer;text-decoration:none;font-weight:400;min-height:44px}
.fcard input{position:absolute;opacity:0;width:1px;height:1px}
.fcard .ic{grid-row:1 / span 2;color:var(--brand);margin-top:1px}
.fcard b{font-size:.98rem;line-height:1.25}
.fcard .d{grid-column:2;font-size:.8rem;color:var(--muted);line-height:1.35}
.fcard:hover{border-color:var(--brand)}
.fcard.sel{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--bg))}
.fcard:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.fcard.off{opacity:.4;cursor:not-allowed}
.fcard.off:hover{border-color:var(--line)}
.opt[hidden]{display:none}
.seg{border:0;padding:0;margin:0 0 4px;display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.seg legend{grid-column:1 / -1;font-size:.88rem;font-weight:600;margin-bottom:2px;padding:0}
.segopt{position:relative;display:block;margin:0;border:1px solid var(--line);border-radius:10px;padding:9px 12px;cursor:pointer;font-weight:400;min-height:44px}
.segopt input{position:absolute;opacity:0;width:1px;height:1px}
.segopt b{display:block;font-size:.95rem}
.segopt .d{display:block;font-size:.8rem;color:var(--muted);line-height:1.35}
.segopt.sel{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--bg))}
.segopt:focus-within{outline:3px solid var(--accent);outline-offset:2px}
/* ---- result: quick-check previews ---- */
.pv{margin-top:14px}
.pv h4{font-size:.95rem;margin-bottom:6px}
.pv-grid{display:grid;gap:12px;grid-template-columns:1fr}
.pv-fig{margin:0}
.pv-img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:8px;background:#fff;min-height:120px}
.pv-fig figcaption{font-size:.82rem;color:var(--muted);margin-top:4px}
.pv-seg{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:6px;font-size:.88rem}
.pv-seg label{display:inline-flex;gap:5px;align-items:center;font-weight:400;margin:0;min-height:36px}
.pv-seg input{width:auto}
@media(max-width:700px){.pv-seg label{min-height:44px}.fcard .d{font-size:.78rem}}
.seg legend .en,.check .en,.stp .en,.hint .en{display:inline;margin-left:4px}
.check{align-items:flex-start;line-height:1.35}
.check input{margin-top:3px;flex:none}
#opt-crs .row{grid-template-columns:1fr}
@media(min-width:700px){#opt-crs .row{grid-template-columns:repeat(2,minmax(0,1fr))}#opt-crs #crs-block{grid-column:1 / -1}}

.mainnav{display:flex;gap:4px 18px;list-style:none;margin-left:auto}.mainnav a{text-decoration:none;color:var(--ink);font-weight:600}.mainnav a:hover{color:var(--brand)}
.nav .navmenu{position:relative}.navmenu summary{white-space:nowrap;cursor:pointer;color:var(--muted);font-size:.92rem}.nav .navmenu ul{position:absolute;right:0;z-index:20;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 14px;display:grid;grid-template-columns:repeat(2,auto);gap:6px 18px;min-width:230px}
.navmenu summary .en{display:none}
@media(max-width:700px){.mainnav{margin-left:0;gap:2px 10px}.mainnav a,.nav .navmenu summary{display:inline-block;padding:11px 4px;font-size:.95rem}.nav .navmenu ul{grid-template-columns:repeat(2,auto)}.nav .navmenu li a{display:inline-block;padding:8px 2px}}

/* compact converter: everything from the drop zone to the Convert button fits one screen */
.sr{position:absolute;left:-999px}
.hero{padding-block:22px 22px}
@media(min-width:900px){.hero{padding-block:26px 26px}}
.hero h1{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.2}
.hero .lead-en{display:none}
.hero .lead{font-size:1rem;margin-top:8px}
.hero .card{padding:16px 18px}
.stp{font-size:.95rem;margin:12px 0 6px}
.drop{padding:14px 12px}.drop strong{font-size:1rem}
.fgroup{margin:0 0 6px}
.fgroup legend{font-size:.8rem;color:var(--muted);margin-bottom:4px}
.fgroup legend .en{display:none}
.fgrid{display:flex;flex-wrap:wrap;gap:6px}
.fcard{display:inline-flex;align-items:center;padding:6px 14px;min-height:38px;border-radius:999px;column-gap:0}
.fcard .ic,.fcard .d{display:none}
.fcard b{font-size:.92rem}
.fcard.sel{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:none}
.fcard.sel b{color:#fff}
.fcard.off{opacity:.4;background:var(--alt)}
#sel-desc{margin:2px 0 0;min-height:1.2em}
#func-hint:empty{display:none}
.mailbox{margin-top:10px;border:0;padding:0}.mailbox summary{cursor:pointer;color:var(--brand);font-size:.9rem}
.mailbox input{margin-top:6px}
#btn-hint{margin-top:6px}
.btn{margin-top:10px}
.btn:disabled{background:var(--muted);opacity:.55;cursor:not-allowed}
.btn.busy:disabled{background:var(--brand);opacity:1;cursor:progress}
.btn.busy::before{content:"";display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.btn.busy::before{animation:none}}
@media(max-width:700px){.fcard{min-height:44px;padding:8px 14px}.hero{padding-block:14px 16px}.hero h1{font-size:1.3rem}.hero .lead{font-size:.9rem;margin-top:4px}.hero .card{padding:12px 12px}.stp{margin:10px 0 5px}.drop{padding:12px 10px}}
#opt-crs .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#opt-crs label{font-size:.8rem;font-weight:600}
#opt-crs select,#opt-crs input{padding:8px 10px}
.mailbox summary{font-weight:500}.mailbox summary .en{display:inline}
@media(max-width:700px){
 .hero .lead,.hero .h1-vi{display:none}
 .stp .en{display:none}
 .drop small{display:none}
 .fgroup legend{margin-bottom:2px}
 .fgroup{margin-bottom:4px}
 #opt-crs .row{grid-template-columns:1fr}
 #opt-crs #crs-block label{position:absolute;left:-999px}
 .mailbox{margin-top:6px}
 #btn-hint .en,.mailbox summary .en{display:none}
 #convert-form:not(.is-skp) .fgroup[data-group=skp]{display:none}
 .stp#st4{margin-top:8px}
}
/* review round: one-line hero, full-width Convert, stronger disabled state, five chips on one row at 390 */
.hero .lead{display:none}
.btn-go,#submit{width:100%}
.btn:disabled{background:#5b6b85;opacity:1;color:#fff}
.btn.busy:disabled{background:var(--brand)}
#skp-options .row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#skp-options .hint{font-size:.78rem;margin:2px 0}
@media(max-width:700px){.fgrid{gap:5px}.fcard{padding:8px 10px}.fcard b{font-size:.86rem}#skp-options .row{grid-template-columns:1fr 1fr}.hero .card{padding:12px 12px}}
.fcard.sel{background:#1f6fe0;border-color:#1f6fe0}
@media(min-width:900px){.hero .wrap>div:first-child{align-self:center}}
.langsw{display:inline-flex;gap:6px;align-items:center;color:var(--muted);font-size:.9rem}
.langsw a{color:var(--muted);text-decoration:none;font-weight:600;padding:10px 3px}.langsw a[aria-current]{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
/* house ads: labelled, fixed height, never above the converter */
.house-tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.02em;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:1px 6px;margin-right:8px;white-space:nowrap}
.house-line{margin-top:10px;font-size:.9rem;color:var(--muted);min-height:44px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.hero .house-line{color:#d6e4fb}.hero .house-line a{color:#fff}.hero .house-tag{color:#a9bddf;border-color:rgba(255,255,255,.3)}
.house-result{margin-top:10px;min-height:44px;font-size:.92rem;display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px}
.house-wrap{padding-block:28px}.house-card{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;background:var(--alt);min-height:150px}
.house-card h2{font-size:1.1rem;margin:8px 0 4px}.house-card p{color:var(--muted);margin-bottom:6px}
.adsense-box{margin-top:16px;min-height:280px}
.eco-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:.88rem;margin-bottom:10px;min-height:44px}
.eco-strip ul{display:flex;flex-wrap:wrap;gap:4px 14px;list-style:none}
.eco-strip a{color:var(--brand)}
/* ===== horizontal converter: four steps side by side on desktop, stacked <= 900px ===== */
.hero .wrap{display:block}
.hero .wrap>div:first-child{padding-bottom:10px}
.hero h1{font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.3;font-weight:600;margin:0;color:#d6e4fb}
.hero .lead,.hero .lead-en,.hero .h1-vi{display:none}
.hero .card{padding:16px 18px}
.steps4{display:block}
@media(min-width:900px){
  .steps4{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr) minmax(0,1.1fr) minmax(0,.9fr);gap:0 22px;align-items:start}
  .steps4 .step[hidden]{display:none}
  .steps4:has(.s3[hidden]){grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,.9fr)}
  .steps4 .step .stp:first-child{margin-top:0}
  .steps4 .step+.step{border-left:1px solid var(--line);padding-left:22px}
  .steps4 .s4{display:flex;flex-direction:column}
  .steps4 .s4 .btn{width:100%}
}
.steps4 .stp{margin:0 0 8px}
@media(max-width:899px){.steps4 .step+.step{margin-top:6px}}
.detect{margin-top:14px}
/* review round 2 */
#skp-options{border:0;padding:0;margin:0}
#skp-options .row{grid-template-columns:1fr;gap:6px}
#skp-options label{font-size:.8rem;font-weight:600}
#skp-options input{padding:7px 9px}
.nav .wrap{align-items:center}
.langsw{margin-left:auto}
@media(max-width:700px){
  .nav .wrap{gap:0 8px}
  .brand{flex:1}.langsw{order:2;margin-left:0}
  .mainnav,.navmenu{order:3}
  .mainnav{margin-left:0}
}