/* ========== PSU Calc — BASE (toàn dự án) ==========
   - Trung tính, gọn, không màu mè UI mặc định
   - Dùng biến CSS để thống nhất theme
   - Tối ưu focus-ring cho desktop & mobile
   ================================================== */

/* ---- Tokens ---- */
:root{
  /* Font & scale */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
          "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji",
          "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  --size-12:12px; --size-14:14px; --size-16:16px; --size-18:18px; --size-24:24px; --size-32:32px;

  /* Spacing & shape */
  --gap-0.5:3px; --gap-1:6px; --gap-2:10px; --gap-3:14px; --gap-4:20px; --gap-5:28px;
  --radius:8px; --brd:1px;

  /* */
  --ctl-h:42px;
  
  
  /* Colors (dark-neutral) */
  --bg:#0f172a;         /* page background */
  --card:#111827;       /* surfaces/cards */
  --card-2:#0b1223;     /* inputs */
  --text:#e5e7eb;       /* main text */
  --muted:#9ca3af;      /* secondary text */
  --border:#1f2937;     /* borders */
  --accent:#22d3ee;     /* focus & highlights */
  --link:#38bdf8;       /* link color */
  --btn-border:rgba(56,189,248,.25); /* button border */
}

/* ===== Defaults (mobile-first) ===== */
.container{ max-width: 100%; margin-inline:auto; padding: 12px; gap:12px; }
.form-grid{ display:grid; grid-template-columns: 1fr; gap: 12px; }
.form-row{ display:grid; grid-template-columns: 1fr; gap: 8px; }
label{ font-size: 13px; }

/* Controls default height theo token --ctl-h */
input[type="text"], input[type="search"], select, .btn, .input{
  height: var(--ctl-h);
  font-size:14px;
}

/* .btn{ padding: 0 12px; } */

/* Bảng: cuộn ngang trên màn nhỏ */
/* .table-wrap{ overflow-x:auto; } */

/* Header: mobile xếp dọc */
/* .header{ display:grid; grid-template-columns: 1fr; gap: 8px; } */

/* Sidebar: mobile ẩn theo mặc định (dùng class .sidebar) */
/* .system-grid{ display:grid; grid-template-columns: 1fr; gap: 16px; } */
/* .sidebar{ display:none; } */

/* Card grid mặc định 1 cột trên mobile */
/* .card-grid{ display:grid; grid-template-columns: 1fr; gap: 16px; } */

/* ========= SM — ≥480px ========= */
@media (min-width:480px){
  :root{
    --ctl-h: 40px;
    --btn-pad-x: 14px;
    --fs: 14.5px;
  }
  .form-row{ grid-template-columns: 1fr 1fr; }   /* label/field song song nếu muốn */
}

/* ========= MD — ≥680px ========= */
@media (min-width:680px){
  :root{
    --gap: 14px;
    --container-max: 680px;
  }
  .card-grid{ grid-template-columns: repeat(2, 1fr); }
  .form-grid{ grid-template-columns: 1fr 1fr; }  /* form thành 2 cột */
  .header{ grid-template-columns: 180px 1fr; }   /* logo | nav */
}

/* ========= LG — ≥980px ========= */
@media (min-width:980px){
  :root{
    --sidebar-w: 360px;
    --container-max: 800px;
    --ctl-h: 42px;
    --btn-pad-x: 16px;
    --fs: 15px;
  }
  .system-grid{ grid-template-columns: var(--sidebar-w) 1fr; }
  .sidebar{ display:block; }
  .card-grid{ grid-template-columns: repeat(3, 1fr); }
  .form-grid{ grid-template-columns: 1fr 1fr 1fr; } /* form 3 cột */
  .form-row{ grid-template-columns: 160px 1fr; }    /* label trái, field phải */
  .header{ grid-template-columns: 220px 1fr auto; } /* logo | nav | actions */
}

/* ========= XL — ≥1280px ========= */
@media (min-width:1280px){
  :root{ --container-max: 1100px; --ctl-h: 44px; }
  .system-grid{display:grid;gap:12px}
  .form-grid{ grid-template-columns: repeat(3, 1fr); } /* form 3 cột nếu đủ chỗ */
}

/* ========= 2XL — ≥1536px ========= */
@media (min-width:1536px){
  :root{ --container-max: 1100px; }
  .system-grid{ grid-template-columns: calc(var(--sidebar-w) + 40px) 1fr; }
}

/* ========= UW — ≥1920px (my display) ========= */
@media (min-width:1920px){
  :root{ --container-max: 1100px; --ctl-h: 46px; --fs: 15.5px; }
  .form-grid{ grid-template-columns: repeat(3, 1fr); }
  .card-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px;}
}

/* ========= UW2 — ≥2560px ========= */
@media (min-width:2560px){
  :root{ --container-max: 1500px; --ctl-h: 48px; --fs: 16px; }
  .card-grid{ grid-template-columns: repeat(5, 1fr); }
  .form-grid{ grid-template-columns: repeat(6, 1fr); }
}

/* ===== Một số pattern sẵn dùng theo cỡ ===== */

/* Ẩn bớt label dài trên mobile, hiện lại từ md */
/* @media (max-width:679.98px){ */
  /* .label-long{ display:none; } */
/* } */
/* @media (min-width:680px){ */
  /* .label-long{ display:inline; } */
/* } */

/* /* Nút: full-width trên mobile, gọn lại trên PC */ */
/* @media (max-width:979.98px){ */
  /* .btn-block-sm{ width:100%; } */
/* } */

/* /* Input hẹp/dài tùy cỡ */ */
/* @media (min-width:980px){ */
  /* .input-sm{ max-width: 240px; } */
  /* .input-md{ max-width: 360px; } */
  /* .input-lg{ max-width: 520px; } */
/* } */

/* Modal/Drawer: modal rộng dần theo viewport */
.modal{ width:min(96vw, 560px); }
@media (min-width:980px){ .modal{ width:min(92vw, 720px); } }
@media (min-width:1280px){ .modal{ width:min(88vw, 860px); } }

/* Toolbar: dồn icon khi hẹp */
.toolbar{ display:flex; flex-wrap:wrap; gap:8px; }
@media (min-width:980px){ .toolbar{ flex-wrap:nowrap; } }


/* ---- Reset ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:var(--size-16); line-height:1.55;
}

/* ---- Typography ---- */
h1,h2,h3,h4,h5,h6{font-weight:700; line-height:1.2; letter-spacing:.2px}
h1{font-size:var(--size-32); margin-bottom:var(--gap-3)}
h2{font-size:var(--size-24); margin-bottom:var(--gap-3)}
h3{font-size:var(--size-18); margin-bottom:var(--gap-2)}
p{margin:var(--gap-2) 0}
small{font-size:var(--size-12); color:var(--muted)}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}

/* ---- Layout helpers ---- */
.container{max-width: var(--container-max,1100px); margin:0 auto; padding: var(--gap-2,10px)}
.row{display:flex; gap:var(--gap-2); align-items:center; flex-wrap:wrap}
.grid{display:grid; gap:var(--gap-3)}
.hidden{display:none !important}
.muted{color:var(--muted)}
.text-center{text-align:center}

/* ---- Badges / misc ---- */
.badge{
  display:inline-block; padding:4px 10px; border-radius:10px;
  border:1px solid #334155; background:#0b1223; color:#e5e7eb; font-size:12px;
}
.sep{opacity:.5; margin:0 6px}

/* ---- Card / Panel ---- */
.card{
  background:var(--card); border:var(--brd) solid var(--border);
  border-radius:var(--radius); padding:var(--gap-3); /* compact */
  box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 6px 18px rgba(0,0,0,.25);
}

/* ---- Sections (áp dụng chung) ---- */
/* (1) Giảm khoảng cách viền Section ↔ card con */
.section{
  background:var(--card); border:var(--brd) solid var(--border);
  border-radius:var(--radius);
  padding:10px 12px; /* ↓ từ var(--gap-3) => siết mép trái/phải & trên/dưới */
}
.section > h2{ margin:0 0 var(--gap-2); }    /* h2 sát hơn xuống nội dung */
.section .card{ margin-top:8px; }            /* ↓ từ var(--gap-2)=10px */

/* Card con “compact” dùng cho mô tả ngắn */
#sec1Card{
  padding:8px 12px;
  max-height:none; height:auto; overflow:visible;
  border-radius:10px;
}
#sec1Card > *:first-child{ margin-top:0; }
#sec1Card p{ margin:0 0 .7rem; line-height:1.6; }

/* (3) Bullet list nằm gọn trong card, không “nhảy” ra ngoài */
.section ul,
.section ol{
  list-style-position:inside;
  padding-left:1.1rem;
  margin:0 0 .75rem;
}

/* ---- Inputs & Buttons (neutral) ---- */
/* input, select, textarea{ */
  /* width:100%; min-height:42px; padding:10px 12px; */
  /* border-radius:var(--radius); border:var(--brd) solid var(--border); */
  /* background:var(--card-2); color:var(--text); */
  /* outline:none; -webkit-appearance:none; appearance:none; */
/* } */
/* .input::placeholder{color:var(--muted)} */
/* textarea{min-height:110px; resize:vertical} */

/* .input{ */
  /* width: flex; min-height:42px, padding:10px 12px; */
  /* border-radius:var(--radius); border:var(--brd) solid var(--border); */
  /* background:var(--card-2); color:var(--text); */
/* } */

/* Inputs */
.input,
input[type="text"], input[type="search"], select, textarea{
  width:100%;
  padding:10px 12px;
  border-radius:var(--radius);
  border:var(--brd) solid var(--border);
  background:var(--card-2);
  color:var(--text);
}
.input::placeholder{ color:var(--muted); }
textarea{ min-height:110px; resize:vertical; }

.section .actions :is(.input, input[type="text"], input[type="search"], select, textarea){
  flex:1 1 0;
  width:auto;
  min-width:0;
}
.section .actions .btn{ flex:0 0 auto; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height: var(--ctl-h); padding:0 14px; border-radius:var(--radius);
  white-space:nowrap;
  border: var(--brd) solid var(--btn-border);
  background:var(--card); color:var(--text);
  cursor:pointer; text-decoration:none; user-select:none;
}

/* .btn{ */
  /* display:inline-flex; align-items:center; justify-content:center; gap:8px; */
  /* min-height:35px; padding:10px 14px; border-radius:var(--radius); */
  /* white-space: nowrap; */
  /* ▼ Viền xanh mờ giống brand (#38bdf8 @ 35%) */
  /* border: var(--brd) solid var(--btn-border); */
  /* background:var(--card); color:var(--text); */
  /* cursor:pointer; text-decoration:none; user-select:none; */
/* } */
.btn:hover{
  filter:brightness(1.06);
  /* ▼ Viền đậm hơn khi hover */
  border-color: rgba(56,189,248,.55);
}
.btn:active{transform:translateY(1px)}

/* Giữ nền primary nhưng dùng chung viền xanh mờ */
.btn-primary{
  background:#1f2937;
  border-color: rgba(56,189,248,.35);
}
/* Danger giữ phong cách riêng (đỏ) */
.btn-danger{
  background:#7f1d1d; border-color:#7f1d1d;
}

/* ---- Focus ring (desktop + mobile) ---- */
.input:focus, select:focus, textarea:focus, .btn:focus, a:focus{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ---- Header (2 hàng: brandline + khối điều khiển) ---- */
.site-header{
  padding:var(--gap-3) 0; border-bottom:var(--brd) solid var(--border);
  display:flex; align-items:center; gap:var(--gap-2); flex-wrap:wrap;
}
.brand{font-weight:800; font-size:var(--size-18)}
.site-header .brandline{ flex:1 0 100%; line-height:1.4; }
.site-header .nav{
  flex:1 0 100%; display:flex; gap:var(--gap-2);
  justify-content:flex-end; align-items:center; margin-top:var(--gap-1);
}

.header .actions{
  display:flex; align-items:center; gap:var(--gap-2,12px); width:100%; flex-wrap:wrap;
}

/* ---- Admin blocks (tăng khoảng cách #2) ---- */
.admin-group h4{
  margin:var(--gap-3, 14px) 0 3px !important;
  font-size:14px; color:#cbd5e1;
}

.admin-button{
  display:grid;
  gap: var(--gap-2,10px) !important;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  margin:0 0 var(--gap-1, 6px);
}

/* ---- Footer ---- */
.site-footer{
  margin-top:var(--gap-5);
  padding:var(--gap-4) 0;
  border-top:var(--brd) solid var(--border);
  color:var(--muted);
  text-align:left;
  font-size:7pt;
  line-height:1;
}

/* ---- Mobile tweaks (giảm đệm 2 bên container & section) ---- */
@media (max-width: 480px){
  .container{ padding-left:6px; padding-right:6px; }
  .section{  padding:8px 10px; }
  .card{     padding:12px; }
  input, select, textarea {font-size:16px;}
}