* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.3; margin: 0; }
button { font-family: inherit; }
.num { font-variant-numeric: tabular-nums; }

/* Icon line */
.ico { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico.sm { width: 18px; height: 18px; }

/* Nút: phẳng, bo tròn kiểu Canva; nút chính đỏ KLM, nút phụ trắng viền mảnh */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; font-family: inherit; line-height: 1.25; box-sizing: border-box;   /* <a> và <button> cao bằng nhau → thẳng hàng */
  padding: 10px 20px; font-size: 15px; font-weight: 600; cursor: pointer;
  color: #fff; background: var(--red); box-shadow: none;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--red-deep); }
.btn:active { transform: scale(.97); animation: none; }
.btn:active, .bounce:active { animation: bounce .2s ease-out; }
.btn.sm { padding: 7px 16px; font-size: 13px; }
.btn.ghost { background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--text); font-weight: 500; }      /* nút phụ: luôn là nút trắng có viền, không còn chữ đỏ trơn (Kha 08/11) */
.btn.ghost:active { transform: none; }
.btn.ghost:hover { background: var(--bg); }
.btn.secondary { background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--text); font-weight: 500; }
.btn.secondary:hover { background: var(--bg); }
.btn.secondary:active { box-shadow: var(--shadow-press); }
@keyframes bounce { 0% { transform: scale(1); } 40% { transform: scale(0.95); } 75% { transform: scale(1.02); } 100% { transform: scale(1); } }

/* Ô nhập: nền trắng, viền mảnh; focus viền đỏ */
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.input {
  width: 100%; border: 0; border-radius: var(--radius-ctl);
  background: #fff; box-shadow: 0 0 0 1px #DAD3CF;
  padding: 11px 14px; font: inherit; font-weight: 400; color: var(--text); outline: none;  /* chữ người dùng nhập luôn regular, kể cả khi ô nằm trong <label> in đậm */
  transition: box-shadow .15s ease;
}
.input:focus { box-shadow: 0 0 0 2px var(--red); background: #fff; }
.input::placeholder { color: var(--text-3); }

/* Ô logo KLM: logo đỏ trên nền trắng (thanh trái); bản nền đỏ giữ cho trang đăng nhập */
.brand-red { display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 14px; background: linear-gradient(180deg, #DB3030 0%, #C91C1C 55%, #B31515 100%); box-shadow: 0 6px 14px rgba(149,1,2,.22); }
.brand-red img { display: block; height: 100%; width: 100%; object-fit: contain; filter: brightness(0) invert(1); }

/* Ô nổi khối kiểu đất sét */
.clay { background: var(--card-grad); border-radius: 14px; box-shadow: var(--shadow-clay); }   /* tên cũ giữ nguyên: thẻ phẳng viền mảnh */

@media (prefers-reduced-motion: reduce) { .btn:active, .bounce:active { animation: none; } }
.btn[hidden], .icon-btn[hidden] { display: none !important; }

/* Không gạch chân chữ ở bất kỳ đâu (ý Kha 10/10). Liên kết trong câu phân biệt bằng màu + đậm; hành động là nút có khối. */
a, a:hover, a:focus, a:active, a:visited { text-decoration: none; }
a { color: var(--account-ink); }
p > a:not([class]), li > a:not([class]), td > a:not([class]) { font-weight: 600; }
a:not([class]):hover, .ex-link:hover { color: var(--text); }

/* MỘT kiểu nút xoá / nguy hiểm cho cả app: viền hồng nhạt + chữ đỏ, rê chuột thì nền hồng */
.btn.danger, .btn.ghost.danger, .btn.secondary.danger { background: #fff; color: var(--error); box-shadow: 0 0 0 1px #E6B8B3; }
.btn.danger:hover, .btn.ghost.danger:hover, .btn.secondary.danger:hover { background: #FBECEA; }
.btn.danger-btn { background: #FBECEA; color: var(--error); box-shadow: 0 0 0 1px #F0C9C4; }
.btn.danger-btn:hover { background: #F7DCD8; }
.btn { white-space: nowrap; }
/* Thông báo kết quả dùng chung (trước đây mỗi trang tự định nghĩa nên nhiều trang mất kiểu) */
.cu-flash { padding: 10px 14px; border-radius: 12px; margin: 0 0 14px; font-size: 14px; }
.cu-flash.ok { background: rgba(123, 175, 142, .22); color: var(--todo-deep); }
.cu-flash.err { background: rgba(201, 112, 112, .18); color: var(--error); }
/* Ô chọn tệp của trình duyệt trông như nút của app */
input[type=file]::file-selector-button { margin-right: 12px; border: 0; border-radius: 999px; padding: 8px 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--text); font: inherit; font-weight: 500; cursor: pointer; }

/* ĐỀU HÀNG (Kha 08/11): hàng nào có ô nhập / chọn / chọn tệp đứng cùng nút thì hai bên luôn cao bằng nhau (40px); điện thoại dùng 44px ở shell.css */
@media (min-width: 761px) {
  :is(div, form, label, p, span):has(> :is(input.input, select.input, input[type=file]) ~ .btn) > :is(input.input, select.input, input[type=file], .btn),
  :is(div, form, label, p, span):has(> .btn ~ :is(input.input, select.input)) > :is(input.input, select.input, .btn) { height: 40px; box-sizing: border-box; }
  :is(div, form, label, p, span):has(> :is(input.input, select.input, input[type=file]) ~ .btn) > .btn,
  :is(div, form, label, p, span):has(> .btn ~ :is(input.input, select.input)) > .btn { padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; justify-content: center; }
}
@media (min-width: 761px) {
  :is(div, form, label):has(> input.input ~ select.input) > :is(input.input, select.input),
  :is(div, form, label):has(> select.input ~ input.input) > :is(input.input, select.input) { height: 40px; box-sizing: border-box; }
}

/* Anh Kha 12/11 (điện thoại): khung cố định — không trượt ngang; ô chữ ≥ 16px để iPhone không tự phóng to khi bấm vào */
html, body { overflow-x: clip; max-width: 100%; }
@media (max-width: 760px) { input, select, textarea, .input { font-size: 16px; } }