/* DTG Studio — khung chung (header + tab), cùng bố cục với Logo Studio, đổi sang màu In DTG Công Nghiệp */
:root{--black:#0B0B0C;--ink:#16181D;--ink2:#5A5F69;--rule:#D8DBD3;--paper:#F1F2EE;
 --green:#5BC847;--green-d:#3E9E2E;--green-l:#EAF7E6;--red:#E0282E}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);font:14px/1.5 "Be Vietnam Pro",-apple-system,sans-serif;color:var(--ink)}
.hidden{display:none!important}
header.top{display:flex;align-items:center;gap:16px;padding:12px 28px;background:var(--black);color:#fff;flex-wrap:wrap}
header.top .brand{display:block;height:46px}
header.top .brand img{height:100%;width:auto;display:block}
header.top .tag{color:#9a9aa3;font-size:12px;letter-spacing:.14em;font-weight:600;border-left:1px solid #2c2c31;padding-left:14px}
header.top .rt{margin-left:auto;display:flex;gap:6px;align-items:center}
header.top .rt a{font-size:13.5px;color:#d9d9de;border:1px solid transparent;border-radius:6px;padding:6px 11px;text-decoration:none}
header.top .rt a:hover{border-color:#3a3a40;color:#fff}
header.top .rt .who{color:#9a9aa3;font-size:13px;padding:0 4px}
nav.feat{display:flex;gap:2px;padding:0 28px;background:var(--black);overflow-x:auto;position:relative}
nav.feat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--green)}
nav.feat a{font-size:14.5px;font-weight:700;color:#9a9aa3;text-decoration:none;padding:12px 16px 14px;white-space:nowrap;text-transform:uppercase;letter-spacing:.03em}
nav.feat a:hover{color:#fff}
nav.feat a.on{color:var(--green);background:#1c1c20;border-radius:8px 8px 0 0}
nav.feat .soon{font-size:11px;font-weight:600;color:#9a9aa3;border:1px solid #3a3a40;border-radius:99px;padding:1px 8px;text-transform:none;letter-spacing:0;margin-left:6px}
@media(max-width:700px){header.top,nav.feat{padding-left:16px;padding-right:16px}header.top .tag{display:none}}

.wrap{display:grid;grid-template-columns:340px 1fr;gap:20px;padding:20px 24px 50px;max-width:1500px;margin:auto;align-items:start}
@media(max-width:900px){.wrap{grid-template-columns:1fr}.wrap>.card{max-width:560px}}
@media(max-width:700px){.wrap{padding:16px}}
.card{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:16px}
.card h3{margin:0 0 4px;font-size:16px;font-weight:800}
.sec-t{font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--green-d);margin:14px 0 0;padding-top:10px;border-top:1px solid #ecece8;text-transform:uppercase}
label{display:block;font-weight:700;font-size:12.5px;margin:8px 0 3px}
input,select,textarea{font:inherit;font-size:13.5px;border:1px solid var(--rule);border-radius:7px;padding:6px 8px;width:100%;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green);outline-offset:-1px;border-color:var(--green)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.sub{color:var(--ink2);font-size:12.5px}
.chk{display:flex;gap:7px;align-items:center;font-size:13px;margin-top:6px;font-weight:400}
.chk input{width:16px;height:16px;accent-color:var(--green-d)}
.btn{font:inherit;font-weight:700;border:1.5px solid var(--black);background:var(--black);color:#fff;border-radius:8px;padding:9px 14px;cursor:pointer;width:100%;margin-top:8px}
.btn.go{background:var(--green);border-color:var(--green);color:#0B0B0C}
.btn.go:hover{background:#6ad455}
.btn.sec{background:#fff;color:var(--ink);border-color:var(--rule)}
.btn:disabled{opacity:.5;cursor:wait}
.btn.sm{width:auto;margin:0;padding:6px 12px;font-size:13px}
#err,.err{background:#FDECEC;color:#9B1C1C;border-radius:6px;padding:8px 10px;font-size:13px;margin-top:10px}
.ann{background:var(--green-l);border:1px dashed var(--green-d);color:#245c1a;border-radius:8px;padding:9px 12px;font-size:12.5px;margin-top:12px}