@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Noto+Sans+KR:wght@400;700&display=swap');
:root{
  --xanh:#14532D; --xanh-d:#0C3B1F; --vang:#F5B301; --do:#D6402B;
  --kem:#FFF9EC; --card:#FFFFFF; --muc:#1E2A22; --xam:#7A8276; --line:#E8E2CF;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Archivo','Noto Sans KR',sans-serif;background:var(--kem);color:var(--muc);line-height:1.6}
a{color:inherit;text-decoration:none}
.wrap{max-width:560px;margin:0 auto;padding:0 16px 110px}

.topbar{background:var(--xanh-d);color:#fff;padding:12px 16px}
.topbar .inner{max-width:560px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:10px}
.topbar .brand{font-weight:900;font-stretch:72%;font-size:18px;text-transform:uppercase;color:var(--vang);letter-spacing:.02em;display:block}
.topbar .sub{font-size:11px;color:#BFD6C6;margin-top:1px}
.langbtn{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.4);color:#fff;font-size:12px;font-weight:700;padding:7px 12px;border-radius:99px;white-space:nowrap;flex-shrink:0}

.nav{background:var(--xanh);margin:0;padding:0 16px}
.nav .inner{max-width:560px;margin:0 auto;display:flex;gap:4px;overflow-x:auto}
.nav a{color:#DFEDE4;font-size:12.5px;font-weight:700;padding:10px 10px;white-space:nowrap;border-bottom:3px solid transparent}
.nav a.on{color:var(--vang);border-bottom-color:var(--vang)}
.nav a .soon{font-size:9px;color:#8FB49B;display:block;font-weight:400}

.hero{background:var(--xanh);color:#fff;margin:0 -16px;padding:28px 20px 26px;border-bottom:5px solid var(--vang)}
.hero h1{font-weight:900;font-stretch:70%;font-size:32px;line-height:1.04;text-transform:uppercase}
.hero h1 em{font-style:normal;color:var(--vang)}
.hero .ko{display:block;font-family:'Noto Sans KR';font-size:12.5px;font-weight:700;margin-top:9px;color:#BFD6C6}
.search{margin-top:16px;background:#fff;border-radius:10px;padding:14px 16px;color:var(--xam);font-size:14.5px;display:flex;gap:10px;align-items:center;box-shadow:4px 4px 0 rgba(0,0,0,.22)}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.quick a{background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.35);border-radius:12px;padding:11px 4px;text-align:center;color:#fff}
.quick .ic{font-size:20px}
.quick .lb{display:block;font-size:10.5px;font-weight:700;margin-top:5px;line-height:1.25}

.ticker{background:var(--do);color:#fff;margin:0 -16px;padding:8px 20px;font-size:12px;font-weight:700;letter-spacing:.04em;white-space:nowrap;overflow:hidden}

.section{margin-top:28px}
.section h2{font-weight:900;font-stretch:75%;font-size:20px;text-transform:uppercase;color:var(--xanh);border-bottom:3px solid var(--vang);display:inline-block;padding-bottom:2px}
.section h2 span{font-family:'Noto Sans KR';font-size:11px;font-weight:700;color:var(--xam);margin-left:8px;text-transform:none}

.tool{background:var(--card);border:2.5px solid var(--xanh);border-radius:12px;padding:15px 16px;margin-top:12px;display:flex;justify-content:space-between;align-items:center;gap:12px;box-shadow:4px 4px 0 var(--vang)}
.tool h3{font-size:15px;font-weight:800}
.tool .ko{font-size:11.5px;color:var(--xam);font-family:'Noto Sans KR'}
.tool .btn{background:var(--do);color:#fff;font-weight:900;font-stretch:75%;font-size:13px;text-transform:uppercase;padding:10px 16px;border-radius:8px;white-space:nowrap}

.article-card{background:var(--card);border-radius:10px;padding:14px 16px;margin-top:10px;border-left:6px solid var(--do);box-shadow:0 1px 3px rgba(30,42,34,.08);display:block}
.article-card.alt{border-left-color:var(--xanh)}
.article-card .tag{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--do)}
.article-card.alt .tag{color:var(--xanh)}
.article-card h4{font-size:15px;font-weight:700;line-height:1.35;margin-top:3px}
.verify{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--xanh);margin-top:8px;font-weight:700;border-top:1px solid var(--line);padding-top:7px}

/* article page */
.prose{background:#fff;border-radius:12px;padding:22px 18px;margin-top:20px;box-shadow:0 1px 4px rgba(30,42,34,.07)}
.prose h1{font-weight:900;font-stretch:75%;font-size:24px;line-height:1.15;text-transform:none;color:var(--xanh-d)}
.prose h2{font-size:17px;font-weight:800;margin:26px 0 8px;color:var(--xanh)}
.prose p,.prose li{font-size:15px;margin-top:10px;line-height:1.7}
.prose ul{padding-left:20px;margin-top:6px}
.prose strong{color:var(--xanh-d)}
.gov{background:var(--kem);border:1.5px dashed var(--xanh);border-radius:10px;padding:13px 15px;font-size:12.5px;margin:16px 0;line-height:1.7}
.gov b{color:var(--xanh)}
.callout{background:#FDF0EE;border-left:5px solid var(--do);border-radius:8px;padding:13px 15px;font-size:14px;margin:14px 0;line-height:1.65}
.callout.green{background:#EDF5EF;border-left-color:var(--xanh)}
.cta-box{background:var(--xanh);color:#fff;border-radius:12px;padding:18px;text-align:center;margin:22px 0 6px;box-shadow:4px 4px 0 var(--vang)}
.cta-box a{display:inline-block;background:var(--vang);color:var(--xanh-d);font-weight:900;padding:11px 18px;border-radius:8px;margin-top:10px;font-size:14px}

/* calculator */
.calc-card{background:var(--card);border-radius:16px;padding:20px 16px;margin-top:20px;box-shadow:0 2px 8px rgba(30,42,34,.08)}
label.f{display:block;font-size:13px;font-weight:700;color:var(--xam);margin:14px 0 6px}
label.f .ko{font-weight:400;color:#A8AE9F;margin-left:6px;font-size:11.5px;font-family:'Noto Sans KR'}
input[type=date],input[type=number]{width:100%;padding:12px 14px;font-size:16px;font-family:inherit;border:1.5px solid var(--line);border-radius:10px;background:#fff}
input:focus{outline:none;border-color:var(--xanh);box-shadow:0 0 0 3px rgba(20,83,45,.14)}
.mode{display:flex;margin:16px 0 4px;border:1.5px solid var(--line);border-radius:10px;overflow:hidden}
.mode button{flex:1;padding:11px 8px;font-size:12.5px;font-weight:700;font-family:inherit;border:none;cursor:pointer;background:#fff;color:var(--xam)}
.mode button.on{background:var(--xanh);color:#fff}
.chk{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:13.5px;color:var(--xam);line-height:1.5;cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--xanh);margin-top:1px}
.receipt{margin-top:18px;background:#F4EFE2;border-radius:14px;padding:8px;display:none}
.receipt.show{display:block}
.receipt .paper{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px 16px;position:relative;overflow:hidden}
.stamp{position:absolute;top:12px;right:12px;width:56px;height:56px;border-radius:50%;border:2.5px solid var(--do);color:var(--do);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;font-family:'Noto Sans KR';transform:rotate(-8deg);opacity:.85;text-align:center;line-height:1.15}
.r-title{font-family:'Noto Sans KR';font-size:15px;font-weight:700;letter-spacing:.06em}
.r-sub{font-size:12px;color:var(--xam);margin-bottom:12px}
.r-row{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px dashed var(--line);gap:12px}
.r-row .ko{font-size:13px;font-weight:700;font-family:'Noto Sans KR'}
.r-row .vi{font-size:11px;color:var(--xam)}
.r-row .val{font-size:15px;font-weight:700;white-space:nowrap}
.r-total{text-align:center;padding:16px 0 4px}
.r-total .lb{font-size:12px;color:var(--xam)}
.r-total .num{font-size:34px;font-weight:900;color:var(--xanh);letter-spacing:-.02em}
.r-total .num.off{color:#A8AE9F}
.notice{margin-top:10px;padding:12px 14px;border-radius:10px;font-size:13.5px;line-height:1.55;display:none}
.notice.red{background:#FDF0EE;color:var(--do)}
.notice.green{background:#EDF5EF;color:var(--xanh-d)}
.notice.show{display:block}
.copybtn{width:100%;margin-top:16px;padding:14px;font-size:15px;font-weight:800;font-family:inherit;color:#fff;background:var(--do);border:none;border-radius:12px;cursor:pointer}
.copybtn.ok{background:var(--xanh)}

.emgbar{position:fixed;bottom:0;left:0;right:0;background:var(--do);color:#fff;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;max-width:592px;margin:0 auto;border-top:3px solid var(--xanh-d);z-index:9}
.emgbar b{font-weight:900;font-stretch:75%;font-size:14px;text-transform:uppercase}
.emgbar span{font-size:11.5px}
.emgbar .call{background:#fff;color:var(--do);font-weight:900;font-size:15px;padding:9px 16px;border-radius:99px;box-shadow:3px 3px 0 rgba(0,0,0,.25)}

footer{margin-top:30px;font-size:11px;color:var(--xam);text-align:center;line-height:1.8}
footer a{text-decoration:underline}

/* currency & info additions */
.vnd{font-size:13px;color:var(--xam);font-weight:600;margin-top:2px}
.mw-box{background:var(--card);border:2.5px solid var(--xanh);border-radius:12px;padding:15px 16px;margin-top:16px;box-shadow:4px 4px 0 var(--vang)}
.mw-box .t{font-weight:900;font-stretch:75%;font-size:15px;text-transform:uppercase;color:var(--xanh)}
.mw-box .t span{font-family:'Noto Sans KR';font-size:11px;color:var(--xam);margin-left:6px;text-transform:none;font-weight:700}
.mw-row{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px dashed var(--line);gap:10px}
.mw-row:last-of-type{border-bottom:none}
.mw-row .lb{font-size:13px;font-weight:600;color:var(--muc)}
.mw-row .lb small{display:block;font-size:10.5px;color:var(--xam);font-weight:400}
.mw-row .v{text-align:right}
.mw-row .v b{font-size:15px;font-weight:800;display:block}
.mw-row .v i{font-style:normal;font-size:11.5px;color:var(--xam)}
.rate-line{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1.5px solid var(--line);font-size:12.5px;color:var(--xam);flex-wrap:wrap}
.rate-line input{width:84px;padding:7px 10px;font-size:14px}
.src-note{font-size:10.5px;color:var(--xam);margin-top:8px}

/* messenger contact */
.msgbtn{display:flex;align-items:center;justify-content:center;gap:10px;background:#0084FF;color:#fff;font-weight:800;font-size:15px;padding:14px 18px;border-radius:12px;margin:14px 0 10px;box-shadow:3px 3px 0 rgba(0,0,0,.15)}
.msgbtn:active{transform:translateY(1px)}
.fb-foot{color:var(--xanh);font-weight:700}
