h2{font-size:16px;margin:0 0 10px}
.card{margin-bottom:16px}
.pagehead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.pagehead h1{margin:0;overflow-wrap:anywhere}
.pagehead .button{margin:0 0 0 6px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column}
.stat-n{font-size:22px;font-weight:600;overflow-wrap:anywhere}
.stat-l{color:var(--muted);font-size:13px}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;white-space:nowrap}
th{color:var(--muted);font-weight:500}
td a{color:var(--accent);text-decoration:none}
.num{text-align:right}
.badge{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:500;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.badge.ok{color:var(--ok);border-color:var(--ok)}
.badge.warn{color:var(--warn);border-color:var(--warn)}
.badge.crit,.badge.overdue{color:var(--err);border-color:var(--err)}
.badge.overdue{background:var(--err);color:#fff}
.flash{padding:8px 12px;border-radius:6px;border:1px solid var(--line);margin:8px 0}
.flash.ok{border-color:var(--ok)}
.flash.warn{border-color:var(--warn)}
.flash.error{border-color:var(--err)}
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:16px}
.filters label{margin:0;min-width:150px}
.filters button{margin:0}
select,textarea{display:block;width:100%;margin-top:4px;padding:9px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--text);font:inherit}
.narrow-form{max-width:560px}
.frow{display:block}
.frow .hint{display:block;color:var(--muted);font-size:13px;font-weight:400}
.frow .error{display:block;font-size:13px;font-weight:400}
.frow.has-error input,.frow.has-error select,.frow.has-error textarea{border-color:var(--err)}
.importrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 12px;align-items:end}
.importrow label{margin:6px 0}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;overflow-wrap:anywhere}
.pre{white-space:pre-wrap}
.checks{padding-left:18px}
button.danger{background:var(--err)}
@media (max-width:560px){.kv{grid-template-columns:1fr}.kv dd{margin-bottom:6px}}
.specrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0}
.specrow input{margin-top:0}
.specrow .error{grid-column:1 / -1;font-size:13px}
.specrow.has-error input{border-color:var(--err)}
.check{display:flex;align-items:center;gap:8px;font-weight:400}
.check input{display:inline-block;width:auto;margin:0}
.copybox .copy{user-select:all;-webkit-user-select:all;cursor:text}
.calc{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:8px 12px}
/* Form có khung chi tiết gói bên phải */
.form-with-aside{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:20px;align-items:start}
.form-with-aside .narrow-form{max-width:none}
.plan-aside{position:sticky;top:16px}
.plan-card h2{font-size:17px;margin:0 0 6px}
.plan-card h3{font-size:15px;margin:14px 0 6px}
.spec-table,.price-table{width:100%;border-collapse:collapse;font-size:14px}
.spec-table th,.spec-table td,.price-table th,.price-table td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
.spec-table th{font-weight:500;color:var(--muted);width:45%}
.price-table td:nth-child(n+2),.price-table th:nth-child(n+2){text-align:right}
.price-table tr.current td{font-weight:600;background:color-mix(in srgb,var(--accent) 10%,transparent)}
@media (max-width:900px){.form-with-aside{grid-template-columns:1fr}.plan-aside{position:static}}
.pay-summary{margin-bottom:16px}
.pay-summary th{font-weight:500;color:var(--muted)}
.pay-summary tr.total th,.pay-summary tr.total td{font-weight:700;font-size:16px;color:var(--text)}
.discount-group{border:1px solid var(--line);border-radius:6px;margin:12px 0;padding:4px 12px 8px}
.discount-group legend{padding:0 6px;font-weight:500}
