/* ==== Scoped reset ==== */
.ageunit-root, .ageunit-root * { box-sizing: border-box; }
.ageunit-root h1, .ageunit-root h2, .ageunit-root h3,
.ageunit-root p, .ageunit-root ol, .ageunit-root ul { margin: 0; }
.ageunit-root ol, .ageunit-root ul { padding-left: 1.2rem; }
.ageunit-root h3 {
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: 20px;
}
.ageunit-root h2 {
    margin-bottom: 10px;
     margin-top: 10px;
    font-size: 24px;
}
/* ==== Tokens ==== */
.ageunit-root{
  --bg:#0b1220; --panel:#0f172a; --panel-2:#0b1324; --text:#e8edf7; --muted:#a8b3cf;
  --accent:#6ea8fe; --accent-2:#22d3ee; --line:#1f2c4a; --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.25);
  font:16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg); color:var(--text);
}
.ageunit-root[data-theme="light"]{
  --bg:#fff; --panel:#ffffff; --panel-2:#f4f7ff; --text:#0f172a; --muted:#51607a; --line:#e6ecf7; --shadow:0 10px 24px rgba(2,6,23,.08);
}

/* ==== Layout ==== */
.ageunit-wrap{margin:auto;}
.ageunit-header{background:linear-gradient(90deg,#5b8cff,#8a68ff);color:#fff;border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow)}
.ageunit-hero{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.ageunit-title{font-size:clamp(20px,4vw,28px);font-weight:800;margin:0 0 6px}
.ageunit-subtitle{opacity:.92}

@media (min-width:880px){.ageunit-grid{grid-template-columns:1.1fr .9fr}}

.ageunit-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px; margin-bottom: 20px;}

/* ==== Form ==== */
.ageunit-section-title{margin-bottom:12px}
.ageunit-row{display:grid;gap:12px}
@media (min-width:720px){.ageunit-row{grid-template-columns:1fr 1fr}}
.ageunit-field label{font-weight:700}
.ageunit-field input[type="number"],
.ageunit-field select{
  width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel-2);color:var(--text);font:inherit
}
.ageunit-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

/* ==== Buttons ==== */
.ageunit-btn{appearance:none;border:0;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;padding:10px 14px;font-weight:700;cursor:pointer}
.ageunit-btn:hover{filter:brightness(1.08)}
.ageunit-btn-solid{background:linear-gradient(90deg,#5b8cff,#8a68ff);color:#fff}
.ageunit-btn-ghost{background:transparent;border:1px solid var(--line);color:inherit}

/* ==== Result ==== */
.ageunit-pill{display:inline-flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line);padding:8px 12px;border-radius:999px;font-weight:800}
.ageunit-table-wrap{margin-top:14px;overflow:auto}
.ageunit-table{width:100%;border-collapse:separate;border-spacing:0}
.ageunit-table thead th{background:var(--panel-2);border:1px solid var(--line);border-bottom:0;padding:10px 12px;text-align:left}
.ageunit-table tbody td{border:1px solid var(--line);padding:10px 12px}

/* ==== SEO/FAQ ==== */
.ageunit-seo details{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);margin:12px 0;overflow:hidden}
.ageunit-seo summary{list-style:none;cursor:pointer;padding:10px 10px;font-weight:700;display:flex;align-items:center;gap:10px;background:var(--panel-2);border-bottom:1px solid var(--line)}
.ageunit-seo summary::-webkit-details-marker{display:none}
.ageunit-seo summary::after{content:"▾";margin-left:auto;font-weight:800;transition:transform .25s ease;opacity:.9}
.ageunit-seo details[open] summary::after{transform:rotate(-180deg)}
.ageunit-seo details>*:not(summary){padding:14px 16px;color:var(--text)}

/* ==== Footer ==== */
.ageunit-footer{text-align:center;opacity:.8;color:var(--muted);margin:20px auto}

/* ===== FIX: Form controls hiển thị chuẩn – chỉ trong .ageunit-root ===== */

/* Lưới 2 cột (desktop) – 1 cột (mobile) */
.ageunit-root .ageunit-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 640px){
  .ageunit-root .ageunit-row{ grid-template-columns: 1fr; }
}

/* Nhãn & ô nhập đồng bộ margin */
.ageunit-root .ageunit-field label{
  display:block;
  font-weight: 700;
  margin-bottom: 6px;
}

/* Input & Select: cùng chiều cao, nền, viền, chữ */
.ageunit-root .ageunit-field input[type="number"],
.ageunit-root .ageunit-field select{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 48px;                 /* CHIỀU CAO CHUẨN */
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  line-height: 1.2;
  outline: none;
  box-shadow: none;
}

/* Placeholder */
.ageunit-root .ageunit-field input::placeholder{ color: color-mix(in srgb, var(--muted) 85%, transparent); }

/* Focus ring gọn, không bị theme đè */
.ageunit-root .ageunit-field input[type="number"]:focus,
.ageunit-root .ageunit-field select:focus{
  border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Select: mũi tên custom, không lệch */
.ageunit-root .ageunit-field select{
  padding-right: 42px; /* chừa chỗ cho mũi tên */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2351607a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
}

/* Sửa Safari/Firefox dấu mốc */
.ageunit-root .ageunit-field select::-ms-expand{ display:none; }
.ageunit-root .ageunit-field select::-webkit-list-button{ display:none; }

/* Hành động: nút đều nhau & cùng chiều cao */
.ageunit-root .ageunit-actions{
  display:flex; gap:12px; flex-wrap:wrap; align-items:stretch; margin-top: 12px;
}
.ageunit-root .ageunit-actions .ageunit-btn{
  height: 44px; display:inline-flex; align-items:center; justify-content:center;
  padding: 0 16px; border-radius: 999px;
}
.ageunit-root .ageunit-btn-ghost{ background: transparent; border: 1px solid var(--line); color: inherit; }
.ageunit-root .ageunit-btn-solid{ background: linear-gradient(90deg, #5b8cff, #8a68ff); color: #fff; }

/* Thêm góc mềm cho card & khoảng cách tổng thể */
.ageunit-root .ageunit-card{ border-radius: var(--radius); }
.ageunit-root #ageunit-formTitle{ margin-bottom: 16px; }