/* ============================================================
   BỘ NHẬN DIỆN – Công ty Cổ phần Tập đoàn Tâm Đức Phát
   Màu lấy từ logo (xanh #1E73BE). Font: Be Vietnam Pro.
   Mọi trang đều dùng file này: sửa ở đây là đổi toàn web.
   ============================================================ */

:root {
  /* màu thương hiệu */
  --blue: #1E73BE;
  --blue-dark: #0F4C8A;
  --blue-soft: #E8F1FA;
  --blue-mist: #F4F8FC;
  --yellow: #FFC20E;
  --yellow-soft: #FFF3CC;
  --red: #D31F2A;
  --cream: #FFF8EA;
  --ink: #12263A;
  --muted: #5B6B7C;
  --line: #DDE6F0;
  --white: #FFFFFF;
  --ok: #1F9D55;

  /* chữ */
  --font: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  /* hình khối */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(15, 76, 138, .08), 0 1px 3px rgba(15, 76, 138, .06);
  --shadow: 0 6px 20px rgba(15, 76, 138, .10);
  --shadow-lg: 0 18px 50px rgba(15, 76, 138, .18);

  /* chuyển động */
  --ease: cubic-bezier(.22, .8, .24, 1);
  --t: .28s;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.6;
  color: var(--ink); background: var(--blue-mist);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { line-height: 1.25; margin: 0; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
:focus-visible { outline: 3px solid rgba(30, 115, 190, .45); outline-offset: 2px; border-radius: 6px; }

/* ----- nút ----- */
.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; padding: 12px 24px; font-weight: 600;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 6px 16px rgba(30, 115, 190, .35); }
.btn-primary:hover { background: var(--blue-dark); color: #fff; box-shadow: 0 10px 24px rgba(30, 115, 190, .4); }
.btn-gold { background: var(--yellow); color: var(--ink); box-shadow: 0 6px 16px rgba(255, 194, 14, .45); }
.btn-gold:hover { color: var(--ink); box-shadow: 0 10px 24px rgba(255, 194, 14, .55); }
.btn-ghost { background: transparent; color: var(--blue-dark); box-shadow: inset 0 0 0 2px var(--line); }
.btn-ghost:hover { background: var(--blue-soft); box-shadow: inset 0 0 0 2px var(--blue); }
.btn-danger { background: var(--red); color: #fff; }
.btn-sm { padding: 8px 16px; font-size: 14px; }
.ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .45); transform: scale(0); animation: ripple .6s ease-out forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(3.2); opacity: 0; } }

/* ----- ô nhập ----- */
.field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.field label { font-size: 13px; font-weight: 600; color: var(--muted); }
.input {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff;
  transition: border-color var(--t), box-shadow var(--t);
}
.input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(30, 115, 190, .15); }

/* ----- chuyển động dùng chung ----- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
.page-in { animation: pageIn .5s var(--ease) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(24px, -18px) scale(1.08); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes pop { 0% { transform: scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } }
.skeleton { background: linear-gradient(90deg, #eef3f9 25%, #f8fbfe 50%, #eef3f9 75%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; border-radius: var(--r-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ----- logo + tên thương hiệu (dùng ở mọi thanh trên cùng) ----- */
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand img { height: 42px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text b { font-size: 16px; color: var(--blue-dark); letter-spacing: -.01em; }
.brand-text small { font-size: 11px; color: var(--red); font-style: italic; font-weight: 500; }

/* ----- bộ icon nét mảnh (dùng <svg class="i"><use href="#i-tên"/></svg>) ----- */
.i { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.22em; flex-shrink: 0; }
.btn .i, button .i { vertical-align: middle; }
.k-folder { color: #E3A600; fill: var(--yellow-soft); }
.k-image { color: var(--blue); }
.k-video { color: var(--red); }
.k-audio { color: #6B54C9; }
.k-pdf, .k-text { color: var(--blue-dark); }
.k-file { color: var(--muted); }