/* ═══════════════════════════════════════════════════════════════════════
   GIAO DIỆN DESKTOP — hệ thiết kế 2 tầng
   Tầng 1 (mặt tiền thương hiệu): #login-screen, #landing-screen → kem ấm
   Tầng 2 (mặt làm việc): #app, #leave-app, #hr-app, #dadmin-app,
                          #calendar-app + toàn bộ modal → trung tính doanh nghiệp
   Custom property kế thừa xuống, mà 2 màn hình Tầng 1 là ANH EM của các
   shell chứ không phải tổ tiên → khai Tầng 2 trên :root rồi ghi đè Tầng 1
   trên đúng 2 id là đủ, không lây chéo.
═══════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px) {
  :root {
    /* ── BỀ MẶT ─────────────────────────────────────────── */
    --bg:#f1f3f7;                 /* nền canvas — 1.11:1 so với thẻ trắng */
    --card:#ffffff;               /* bí danh cũ, app.css vẫn dùng */
    --d-surface:#ffffff;
    --d-surface-raised:#ffffff;   /* nổi bằng bóng, không đổi tông màu */
    --d-surface-sunken:#f4f6f9;   /* đầu bảng, giếng, chân phân trang */
    --d-surface-hover:#f4f6f9;
    --d-surface-active:#eceff4;
    --d-surface-sel:#fdf2f5;      /* đang chọn — ám đỏ mận */
    --d-card-2:#f4f6f9;           /* bí danh cũ giữ cho tương thích */

    /* ── VIỀN — đây mới là chỗ cần tương phản, không phải mặt thẻ ── */
    --d-border-subtle:#eceff3;    /* 1.19:1 — kẻ dòng danh sách dài */
    --border:#dde2e9;             /* 1.30:1 — mặc định: input, thẻ */
    --d-border-strong:#d2d8e0;    /* 1.43:1 — viền ngoài bảng, mép sticky */
    --d-border-focus:#8b0d2f;

    /* ── CHỮ ────────────────────────────────────────────── */
    --text-primary:#1a1d21;       /* 16.4:1 */
    --text-secondary:#4b5259;     /* 8.3:1  */
    --text-muted:#6b7280;         /* 5.1:1 — đạt AA ở 13px */
    --d-text-inverse:#ffffff;

    /* ── THƯƠNG HIỆU ────────────────────────────────────── */
    --primary:#8b0d2f;
    --primary-dark:#6b0723;
    --primary-light:#fdf2f5;
    --grad-start:#8b0d2f;
    --grad-end:#a8153f;           /* gradient có chiều, không phẳng lì */
    --accent:#0f766e;             /* teal — dành riêng module Nghỉ phép */
    --accent-light:#e6f4f1;
    --d-gold:#b0894c;             /* từ đây chỉ còn dùng ở Tầng 1 */
    --d-hairline-gold:#dcc79c;
    --d-gold-soft:#c9ced6;        /* đổi công năng: thumb thanh cuộn, trung tính */
    --d-header-bg:#ffffff;
    --d-rail-bg:#ffffff;

    /* ── TRẠNG THÁI — một ngôn ngữ chung cho mọi badge ──── */
    --d-ok:#0f7b4f;      --d-ok-bg:#e7f6ee;      --d-ok-bd:#bce3cd;
    --d-warn:#8a5a00;    --d-warn-bg:#fdf3e2;    --d-warn-bd:#efd9ac;
    --d-err:#a3231b;     --d-err-bg:#fdecea;     --d-err-bd:#f2c4bf;
    --d-info:#1c5a99;    --d-info-bg:#eaf2fb;    --d-info-bd:#c2d9f0;
    --d-neutral:#4b5259; --d-neutral-bg:#f1f3f7; --d-neutral-bd:#dde2e9;

    /* ── ĐỘ NỔI — 4 mức thật, tông lạnh ─────────────────── */
    --d-e1:0 1px 2px rgba(17,24,39,.06);
    --d-e2:0 1px 2px rgba(17,24,39,.06), 0 4px 10px -2px rgba(17,24,39,.08);
    --d-e3:0 2px 6px -1px rgba(17,24,39,.07), 0 14px 28px -8px rgba(17,24,39,.12);
    --d-e4:0 10px 20px -6px rgba(17,24,39,.10), 0 28px 60px -16px rgba(17,24,39,.22);
    --shadow:var(--d-e2);
    --shadow-lg:var(--d-e4);
    /* Mép sticky: 1px cứng + blur ngắn. Đây KHÔNG phải bóng thẻ. */
    --d-sticky-edge:0 1px 0 0 var(--d-border-strong), 0 6px 10px -8px rgba(17,24,39,.28);

    /* ── HÌNH KHỐI ──────────────────────────────────────── */
    --radius:8px;
    --radius-sm:6px;
    --d-radius-lg:12px;
    --d-radius-pill:999px;

    /* Thang chữ và khoảng cách */
    --d-serif:'Playfair Display','Iowan Old Style',Georgia,'Times New Roman',serif;
    --d-sans:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
    --s1:4px;
    --s2:8px;
    --s3:12px;
    --s4:16px;
    --s5:24px;
    --s6:32px;
    --s7:48px;
    --s8:64px;
    --fs-display:40px;
    --fs-h1:28px;
    --fs-h2:21px;
    --fs-h3:17px;
    --fs-body:15px;
    --fs-sm:13px;
    --fs-xs:11.5px;

    /* Khung desktop */
    --d-rail:248px;
    --d-topbar:64px;
    --d-max:1280px;
    --d-gutter:32px;
    --d-inset:16px;               /* lề trong chuẩn cho mọi dải điều khiển */
    --d-pane-top:24px;            /* nhịp trên cho pane không có thanh ghim */
    --d-prose:58ch;
  }

  /* ══ TẦNG 1 — mặt tiền thương hiệu giữ kem ấm ══ */
  #login-screen,
  #landing-screen {
    --bg:#f7efe3;
    --card:#ffffff;
    --d-surface:#ffffff;
    --d-surface-sunken:#fbf5ec;
    --d-surface-hover:#fdf9f2;
    --d-surface-active:#f6ecdd;
    --d-border-subtle:#f0e7d8;
    --border:#e6dac6;
    --d-border-strong:#dcc79c;    /* chỉ vàng */
    --text-primary:#241a12;
    --text-secondary:#6b5f50;
    --text-muted:#948779;
    --d-e1:0 1px 2px rgba(74,48,20,.07);
    --d-e2:0 2px 4px rgba(74,48,20,.06), 0 8px 20px -4px rgba(74,48,20,.10);
    --d-e3:0 4px 10px -2px rgba(74,48,20,.08), 0 20px 40px -10px rgba(74,48,20,.14);
    --d-e4:0 14px 28px -8px rgba(74,48,20,.12), 0 36px 72px -20px rgba(74,48,20,.24);
  }

  html,
  body {
    font-family:var(--d-sans);
    background:var(--bg);
  }

  /* Nhịp chữ và motif chỉ vàng */
  .d-eyebrow,
  .lv-admin-lookup-head span:first-child,
  .leave-section-title {
    display:flex;
    align-items:center;
    gap:var(--s3);
    font:700 var(--fs-xs)/1 var(--d-sans);
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--primary);
  }

  .d-eyebrow::before,
  .d-eyebrow::after {
    content:"";
    flex:1;
    height:1px;
    background:var(--border);
  }

  /* Chỉ mặt tiền mới dùng chỉ vàng */
  #landing-screen .d-eyebrow::before,
  #landing-screen .d-eyebrow::after,
  #login-screen .d-eyebrow::before,
  #login-screen .d-eyebrow::after {
    background:var(--d-hairline-gold);
  }

  /* Mặt làm việc dùng sans — serif trên bảng dữ liệu dày là tín hiệu rõ
     nhất của "phần mềm nghiệp dư"; không sản phẩm doanh nghiệp nào dùng.

     ⚠ TUYỆT ĐỐI KHÔNG đặt `color` ở quy tắc này. Nhiều tiêu đề trong app
     nằm trên nền tối và cố ý KHÔNG khai màu để kế thừa #fff từ cha
     (vd .overview-hero h2 ở app.css:444). Một selector `h2` trần khớp
     trực tiếp phần tử nên sẽ PHÁ kế thừa đó và làm chữ tàng hình.
     Đây chính là lỗi đã xảy ra ở v3. Màu để khối bên dưới lo. */
  h1,
  h2,
  h3,
  .lv-admin-lookup-head h3,
  .setup-card-title,
  .modal-title {
    font-family:var(--d-sans);
    font-weight:650;
    letter-spacing:-.011em;
  }

  /* Màu chỉ áp cho tiêu đề nằm trên MẶT SÁNG, liệt kê tường minh */
  .lv-admin-lookup-head h3,
  .setup-card-title,
  .modal-title,
  .section-title,
  .org-section-head h3 {
    color:var(--text-primary);
  }

  /* Serif chỉ ở mặt tiền thương hiệu.
     Landing nền kem sáng → chữ đậm. Login hero nằm trên ẢNH TỐI nên chỉ
     đổi dáng chữ, KHÔNG đổi màu — để .login-hero h2 giữ #fff của app.css. */
  #landing-screen :is(h1, h2, h3) {
    font-family:var(--d-serif);
    font-weight:600;
    letter-spacing:-.005em;
    color:var(--primary-dark);
  }

  #login-screen :is(h1, h2, h3) {
    font-family:var(--d-serif);
    font-weight:600;
    letter-spacing:-.005em;
  }

  .login-hero h2 { color:#fff; }                /* trên ảnh tối */
  .login-card h3 { color:var(--primary-dark); } /* trên thẻ sáng */

  /* Giới hạn bề rộng dòng chữ CHỈ ở văn bản chạy — bản cũ áp lên mọi <p>
     toàn app, kể cả <p> trong thẻ, bảng và modal, làm vỡ bố cục. */
  #landing-screen p,
  #login-screen p,
  .tab-pane > p,
  .module-card-desc {
    max-width:var(--d-prose);
  }

  p,
  .leave-info-tag {
    line-height:1.6;
  }

  /* Login hai cột */
  #login-screen {
    display:grid;
    grid-template-columns:1.15fr .85fr;
    background:var(--bg);
    overflow:hidden;
  }

  #login-screen::before {
    display:none;
  }

  .login-hero {
    background:
      linear-gradient(150deg,rgba(107,7,35,.86),rgba(139,13,47,.72)),
      url('../images/hr-hero.jpg') center/cover no-repeat;
    align-items:flex-start;
    text-align:left;
    padding:var(--s8);
  }

  .login-hero h2 {
    font-family:var(--d-serif);
    font-size:46px;
    font-weight:600;
  }

  .login-hero p {
    text-align:left;
  }

  .login-card {
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-radius:0;
    box-shadow:none;
    background:var(--card);
    padding:var(--s8) clamp(48px,6vw,96px);
    animation:none;
  }

  /* Landing hai cột trên nền kem */
  #landing-screen {
    display:grid;
    align-content:center;
    justify-content:center;
    grid-template-columns:minmax(400px,.9fr) minmax(560px,1fr);
    grid-template-areas:
      "hero cards"
      "hero mini";
    /* ⚠ KHÔNG có track 1fr nào. Bản trước đặt minmax(0,1fr) lên hàng thứ hai
       — mà hàng đó chính là hàng NÚT NHỎ, nên nó hút hết chiều cao thừa và
       xé một lỗ trống giữa nút và thẻ người dùng. Track co giãn không bao
       giờ được đặt lên một hàng có nội dung.
       Hai hàng auto + align-content:center → khối cân đối, không thể hở.
       align-items:stretch để hủy align-items:center rò từ app.css:727. */
    grid-template-rows:auto auto;
    align-content:center;
    align-items:stretch;
    gap:var(--s4) clamp(var(--s6),4vw,var(--s8));
    padding:clamp(var(--s6),4vw,var(--s8));
    background:linear-gradient(140deg,#fdf8f1 0%,#f7efe3 52%,#f0e2cd 100%);
    isolation:isolate;
  }

  /* Lớp nền động — 3 vệt màu trôi lệch pha. transform+filter chạy trên
     compositor nên không gây reflow; KHÔNG dùng background-position. */
  #landing-screen::before {
    content:"";
    display:block;
    position:absolute;
    inset:-25%;
    z-index:0;
    opacity:1;
    background:
      radial-gradient(38% 44% at 22% 30%, rgba(139,13,47,.20), transparent 62%),
      radial-gradient(34% 40% at 76% 20%, rgba(176,137,76,.20), transparent 60%),
      radial-gradient(42% 46% at 64% 80%, rgba(15,118,110,.14), transparent 64%);
    filter:blur(30px);
    animation:dMesh 26s ease-in-out infinite alternate;
    will-change:transform;
    pointer-events:none;
  }

  /* Quầng sáng bám con trỏ + hạt nhiễu mịn, gộp vào MỘT pseudo-element.
     Dùng pseudo chứ không dùng <div> vì `#landing-screen > *` (app.css:754)
     có đặc hiệu ID sẽ ép mọi div con thành position:relative;z-index:1 —
     ở v4 điều đó biến quầng sáng thành một khối 420px nằm trong luồng, vẽ
     đè lên mọi thứ với mix-blend-mode:multiply, đúng "cục đen đen" đã báo.
     Pseudo-element không bị selector `> *` chạm tới nên miễn nhiễm.
     desktop-fx.js chỉ ghi --gx/--gy (px) lên chính #landing-screen. */
  #landing-screen::after {
    content:"";
    display:block;
    position:absolute;
    inset:0;
    z-index:0;
    background-image:
      radial-gradient(circle 380px at var(--gx,50%) var(--gy,38%),
        rgba(139,13,47,.11), rgba(139,13,47,0) 70%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
    pointer-events:none;
  }

  .landing-hero {
    grid-area:hero;
    align-self:center;
    max-width:none;
    margin-bottom:0;
  }

  .landing-hero h1 {
    font-family:var(--d-serif);
    font-size:clamp(40px,3.6vw,56px);
    font-weight:600;
    color:var(--primary-dark);
    text-shadow:none;
  }

  .landing-hero p {
    color:var(--text-secondary);
    font-size:16px;
    max-width:var(--d-prose);
  }

  .landing-logo {
    width:210px;
    height:auto;
    padding:2px 0;
    background:transparent;
    border:none;
    box-shadow:none;
    justify-content:flex-start;
  }

  .landing-logo img {
    width:210px;
    max-height:64px;
  }

  /* Lưới 5 ô đồng cấp: 2 ô lớn hàng trên, 3 ô nhỏ hàng dưới, cùng nhịp cột */
  .landing-modules {
    grid-area:cards;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--s4);
    max-width:none;
  }

  /* auto-fit chứ không phải repeat(3,1fr): các nút bị ẩn theo vai trò, nếu
     cố định 3 cột thì tài khoản chỉ thấy 2 nút sẽ bị hở một cột trống. */
  .landing-mini-btns {
    grid-area:mini;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:var(--s3);
    max-width:none;
    margin:0;
  }

  /* Thẻ người dùng thoát khỏi grid → chip kính mờ neo góc trên phải.
     Nhờ vậy grid chỉ còn 2 hàng nội dung, không còn chỗ nào để hở.

     ⚠ PHẢI dùng tiền tố #landing-screen. app.css:754 có
     `#landing-screen > * { position:relative; z-index:1 }` với đặc hiệu ID
     (1,0,0) — mọi selector chỉ dùng class (0,1,0) đều bị nó nuốt, và chip
     sẽ kẹt lại trong luồng grid thành một khối viên thuốc khổng lồ.
     Đây đúng là lỗi đã xảy ra ở v4. */
  #landing-screen .landing-user {
    position:absolute;
    z-index:3;
    top:var(--s5);
    right:clamp(var(--s6),4vw,var(--s8));
    width:auto;
    max-width:none;
    margin:0;
    padding:6px 6px 6px 15px;
    gap:10px;
    border-radius:var(--d-radius-pill);
    background:rgba(255,255,255,.74);
    border:1px solid rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(16px) saturate(1.4);
    backdrop-filter:blur(16px) saturate(1.4);
    box-shadow:var(--d-e2);
  }

  .landing-user-avatar {
    width:34px;
    height:34px;
    font-size:14px;
  }

  .landing-user-info {
    padding-right:2px;
  }

  .landing-user-name  { font-size:13.5px; }
  .landing-user-email { font-size:11.5px; }

  .landing-user-avatar {
    background:var(--primary-light);
    border-color:var(--d-hairline-gold);
    color:var(--primary-dark);
    box-shadow:none;
  }

  /* Trả lại thứ bậc tên/email — bản cũ đặt cả hai về cùng một màu */
  .landing-user-name {
    color:var(--text-primary);
  }

  .landing-user-email {
    color:var(--text-muted);
  }

  .landing-logout {
    background:var(--d-surface);
    border:1px solid var(--border);
    color:var(--primary-dark);
    box-shadow:var(--d-e1);
    transition:background .15s, border-color .15s, box-shadow .15s;
  }

  .landing-logout:hover {
    background:var(--d-surface-hover);
    border-color:var(--d-border-strong);
    box-shadow:var(--d-e2);
  }

  /* Thẻ module — độ nổi thật, không còn dựa vào một sợi viền 1.30:1 */
  .module-card {
    flex-direction:column;
    align-items:flex-start;
    gap:var(--s3);
    min-height:180px;
    padding:var(--s5);
    background:var(--d-surface);
    border:1px solid var(--border);
    border-radius:var(--d-radius-lg);
    box-shadow:var(--d-e2);
    animation:none;
    transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, border-color .2s;
  }

  .module-card:hover {
    border-color:var(--d-border-strong);
    box-shadow:var(--d-e3);
    transform:translateY(-3px);
  }

  .module-card:active {
    transform:translateY(-1px);
    box-shadow:var(--d-e2);
  }

  .module-card::after {
    display:none;
  }

  /* Hai thẻ phải phân biệt được — bản cũ ép cả hai về cùng var(--primary)
     nên "Chấm công" và "Nghỉ phép" trông y hệt nhau. */
  .module-card-icon.module-checkin,
  .module-card-icon.module-leave {
    width:46px;
    height:46px;
    border-radius:var(--radius);
    box-shadow:var(--d-e1);
  }

  .module-card-icon.module-checkin {
    background:linear-gradient(140deg,var(--primary),#a8153f);
  }

  .module-card-icon.module-leave {
    background:linear-gradient(140deg,#0f766e,#14a08f);
  }

  .module-card-title {
    font-family:var(--d-serif);
    font-size:21px;
    font-weight:600;
    color:var(--primary-dark);
  }

  /* Trả lại chevron — nó là affordance duy nhất báo thẻ bấm được */
  .module-card-arrow {
    display:flex;
    position:absolute;
    right:var(--s5);
    bottom:var(--s5);
    width:28px;
    height:28px;
    background:var(--d-surface-sunken);
    color:var(--text-muted);
    border-radius:var(--radius-sm);
    transition:transform .2s, background .2s, color .2s;
  }

  .module-card:hover .module-card-arrow {
    background:var(--primary-light);
    color:var(--primary);
    transform:translateX(3px);
  }

  /* ⚠ Bản cũ gộp cả :hover và :active vào CÙNG một khai báo nền → ba trạng
     thái giống hệt nhau, không có phản hồi tương tác nào. Cộng với nền
     1.12:1 và viền 1.15:1 so với trang, nút đọc thành chữ trôi nổi chứ
     không ra nút. Đây chính là "các nút chìm hẳn". */
  /* Nút nhỏ nâng cấp thành Ô thật, không còn là viên thuốc dẹt */
  .landing-mini-btn {
    position:relative;
    flex-direction:column;
    align-items:flex-start;
    justify-content:space-between;
    min-height:104px;
    height:auto;
    padding:var(--s4);
    gap:var(--s2);
    background:rgba(255,255,255,.86);
    border:1px solid var(--border);
    border-radius:var(--d-radius-lg);
    color:var(--primary-dark);
    font-size:13.5px;
    font-weight:600;
    text-align:left;
    white-space:normal;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    box-shadow:var(--d-e1);
    overflow:hidden;
  }

  .landing-mini-btn svg {
    width:20px;
    height:20px;
    color:var(--primary);
  }

  .landing-mini-btn:hover {
    border-color:var(--d-hairline-gold);
    box-shadow:var(--d-e3);
  }

  .landing-mini-btn:active {
    box-shadow:var(--d-e1);
  }

  /* Ánh xạ các màu hardcode sang bảng màu desktop */
  .leave-balance-card {
    background:linear-gradient(135deg,#8b0d2f,#a8153f);
    border:0;
    box-shadow:var(--d-e3);
  }

  /* Xanh thép #7c9bb4 là màu chỏi nhất trong bảng phép */
  .lv-month-head {
    background:var(--d-surface-sunken);
    color:var(--text-secondary);
    border-bottom:1px solid var(--border);
  }

  #calendar-app {
    background:var(--bg);
  }

  #calendar-app .app-header,
  .leave-cal-toolbar,
  .cal-grid-wrap,
  .cal-weekdays-row,
  .cal-week-row,
  .leave-cal-item {
    background:var(--card);
    border-color:var(--border);
  }

  #calendar-app .header-avatar {
    background:var(--d-card-2);
    border-color:var(--border);
    color:var(--text-primary);
  }

  #calendar-app .header-title h1,
  .leave-cal-title,
  .leave-cal-list-title,
  .leave-cal-item-name {
    color:var(--text-primary);
  }

  #calendar-app .header-title p,
  .leave-cal-item-meta,
  .cal-more {
    color:var(--text-secondary);
  }

  #calendar-app .header-btn,
  .leave-cal-today,
  .leave-cal-filter-row select {
    background:var(--card);
    border-color:var(--border);
    color:var(--text-primary);
  }

  #calendar-app .header-btn:hover,
  .cal-date-cell:hover {
    background:var(--d-card-2);
  }

  .cal-weekday-name,
  .cal-date-cell {
    color:var(--text-primary);
    border-color:var(--border);
  }

  .cal-date-cell.outside {
    background:var(--d-card-2);
    color:var(--text-muted);
  }

  .cal-date-cell.today .cal-date-num,
  .cal-event-bar {
    background:var(--primary);
  }

  /* Khung ứng dụng desktop: topbar tràn ngang, rail trái và main co an toàn */
  #app,
  #leave-app,
  #hr-app,
  #dadmin-app {
    display:grid;
    grid-template-columns:var(--d-rail) minmax(0,1fr);
    grid-template-rows:var(--d-topbar) minmax(0,1fr);
    grid-template-areas:
      "topbar topbar"
      "rail main";
    max-width:none;
    margin:0;
    background:var(--bg);
    box-shadow:none;
    animation:none;
  }

  #app>.app-header,
  #leave-app>.app-header,
  #hr-app>.app-header,
  #dadmin-app>.app-header {
    grid-area:topbar;
  }

  #app>.tab-nav,
  #leave-app>.tab-nav,
  #dadmin-app>#da-tab-nav,
  #hr-app>.hr-tab-bar {
    grid-area:rail;
    min-height:0;
    min-width:0;
  }

  #app>.tab-content,
  #leave-app>.tab-content,
  #hr-app>.tab-content,
  #dadmin-app>.tab-content {
    grid-area:main;
    min-height:0;
    min-width:0;
  }

  /* Topbar dùng lại watermark logo có sẵn */
  .app-header,
  #calendar-app .app-header {
    height:var(--d-topbar);
    gap:18px;
    padding:0 var(--d-gutter) 0 calc(var(--d-rail) - 60px);
    overflow:visible;
    background:var(--d-header-bg);
    border-bottom:1px solid var(--d-hairline-gold);
    box-shadow:none;
  }

  .app-header::before,
  #calendar-app .app-header::before {
    display:block;
    inset:0 0 auto 0;
    height:3px;
    background:var(--primary);
    animation:none;
    transform:none;
  }

  .app-header::after,
  #calendar-app .app-header::after {
    left:var(--d-gutter);
    right:auto;
    width:122px;
    height:42px;
    opacity:1;
  }

  .header-title {
    padding-left:20px;
    border-left:1px solid var(--d-hairline-gold);
  }

  .header-title h1,
  #calendar-app .header-title h1 {
    font-family:var(--d-serif);
    font-size:17px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--primary-dark);
  }

  .header-title p,
  #calendar-app .header-title p {
    margin-top:3px;
    font-size:10.5px;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--text-muted);
  }

  .header-avatar {
    order:3;
    background:var(--d-card-2);
    border-color:var(--border);
    color:var(--primary-dark);
    box-shadow:none;
  }

  .header-actions {
    order:4;
    gap:10px;
  }

  .header-avatar.brand-avatar {
    display:none;
  }

  .header-btn,
  #calendar-app .header-btn {
    width:auto;
    min-width:38px;
    height:38px;
    padding:0 12px;
    border-radius:999px;
    background:transparent;
    border:1px solid var(--d-hairline-gold);
    color:var(--primary-dark);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    box-shadow:none;
  }

  .header-btn:hover,
  #calendar-app .header-btn:hover {
    background:var(--primary-light);
    border-color:var(--primary);
  }

  /* Rail dọc */
  #app>.tab-nav,
  #leave-app>.tab-nav,
  #dadmin-app>#da-tab-nav,
  #hr-app>.hr-tab-bar {
    flex-direction:column;
    align-items:stretch;
    overflow-x:hidden;
    overflow-y:auto;
    padding:14px 12px;
    gap:2px;
    background:var(--d-rail-bg);
    border-right:1px solid var(--border);
    border-bottom:none;
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  #hr-app>.hr-tab-bar>.hr-tab-nav {
    flex-direction:column;
    align-items:stretch;
    overflow-x:hidden;
    overflow-y:auto;
    gap:2px;
  }

  .tab-item {
    height:40px;
    padding:0 10px;
    border-radius:var(--radius);
    justify-content:flex-start;
    border-bottom:none;
    font-size:13.5px;
    font-weight:500;
    letter-spacing:-.005em;
    color:var(--text-secondary);
    transition:background .14s ease, color .14s ease;
  }

  .tab-item:hover {
    background:var(--d-surface-hover);
    color:var(--text-primary);
  }

  .tab-item:active {
    background:var(--d-surface-active);
    transform:none;
  }

  /* Viên thuốc có nền ám thay cho inset 3px — vạch inset bị bo góc 8px cắt
     ở cả hai đầu nên hiện thành một nét cụt gãy. */
  .tab-item.active {
    background:var(--d-surface-sel);
    color:var(--primary-dark);
    font-weight:600;
    border-bottom:none;
    box-shadow:none;
  }

  #hr-app .tab-item[data-hr-optional] {
    display:flex !important;
  }

  #hr-app .hr-tab-settings-btn,
  #hr-app .hr-optional-tabs-menu {
    display:none !important;
  }

  /* ── 17 tab, 17 nét riêng. Cùng họ: 24×24, fill:none, stroke-width:2,
     đầu bo tròn — khớp các SVG inline sẵn có trong index.html. ────────── */
  :root {
    --d-ico-fingerprint:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 10.5a1.5 1.5 0 0 1 1.5 1.5c0 3.2-.4 5.9-1.2 8.1'/%3E%3Cpath d='M8.6 20.6c.6-2 .9-4.3.9-6.6a2.5 2.5 0 0 1 5 0c0 .9 0 1.8-.1 2.6'/%3E%3Cpath d='M5.6 17.6c.6-1.9.9-3.8.9-5.6a5.5 5.5 0 0 1 11 0c0 1 0 2-.1 3'/%3E%3Cpath d='M3.6 13.7c.1-.6.1-1.1.1-1.7a8.3 8.3 0 0 1 4-7.1'/%3E%3Cpath d='M20.4 15.4c.1-1.1.1-2.2.1-3.4A8.5 8.5 0 0 0 8.9 4.1'/%3E%3C/svg%3E");
    --d-ico-calendar-days:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4'/%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01'/%3E%3C/svg%3E");
    --d-ico-chart-column:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='M8 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M18 17v-6'/%3E%3C/svg%3E");
    --d-ico-circle-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
    --d-ico-inbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13h4l2 3h4l2-3h4'/%3E%3Cpath d='M5.4 5.5 3 13v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5l-2.4-7.5A2 2 0 0 0 16.7 4H7.3a2 2 0 0 0-1.9 1.5Z'/%3E%3C/svg%3E");
    --d-ico-dashboard:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1'/%3E%3C/svg%3E");
    --d-ico-file-pen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h5'/%3E%3Cpath d='M14 2v5h5'/%3E%3Cpath d='M19.5 13.5 21 15l-5 5h-1.5V18.5Z'/%3E%3Cpath d='M8 9h3M8 13h3'/%3E%3C/svg%3E");
    --d-ico-clock-history:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 2.6-6.4'/%3E%3Cpath d='M3 4v5h5'/%3E%3Cpath d='M12 8v4l2.5 2'/%3E%3C/svg%3E");
    --d-ico-stamp-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21h14'/%3E%3Cpath d='M4 18h16v-2a2 2 0 0 0-2-2h-2.5c-.6 0-1-.5-.9-1.1l.4-2.6A3.5 3.5 0 0 0 11.6 6a3.5 3.5 0 0 0-3.4 4.3l.4 2.6c.1.6-.3 1.1-.9 1.1H6a2 2 0 0 0-2 2Z'/%3E%3C/svg%3E");
    --d-ico-users:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.9'/%3E%3Cpath d='M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E");
    --d-ico-calendar-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4'/%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18M8 16l2 2 5-5'/%3E%3C/svg%3E");
    --d-ico-hierarchy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='5' rx='1'/%3E%3Crect x='2' y='17' width='6' height='5' rx='1'/%3E%3Crect x='16' y='17' width='6' height='5' rx='1'/%3E%3Cpath d='M12 7v5'/%3E%3Cpath d='M5 17v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3'/%3E%3C/svg%3E");
    --d-ico-building:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v16'/%3E%3Cpath d='M15 10h2a2 2 0 0 1 2 2v9'/%3E%3Cpath d='M8 7h4M8 11h4M8 15h4'/%3E%3C/svg%3E");
    --d-ico-plug:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2v6M15 2v6'/%3E%3Cpath d='M6 8h12v3a6 6 0 0 1-6 6 6 6 0 0 1-6-6Z'/%3E%3Cpath d='M12 17v5'/%3E%3C/svg%3E");
    --d-ico-download:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E");
    /* Nét dự phòng — tab nào thiếu --ico sẽ ra dấu chấm, không phải ô vuông đặc */
    --d-ico-dot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  }

  /* ⚠ CHỐT AN TOÀN: nếu --ico không được khai, mask trở thành
     invalid-at-computed-value-time → mask:none → hiện ô vuông đặc 17×17.
     Khai mặc định ngay trên .tab-item để mọi tab luôn có nét hợp lệ. */
  .tab-item {
    --ico:var(--d-ico-dot);
  }

  .tab-item::before {
    content:"";
    width:17px;
    height:17px;
    flex:none;
    margin-right:11px;
    background:currentColor;
    opacity:.85;
    -webkit-mask:var(--ico) center/contain no-repeat;
    mask:var(--ico) center/contain no-repeat;
  }

  .tab-item.active::before {
    opacity:1;
  }

  /* Module Chấm công */
  .tab-item[data-tab="checkin"]   { --ico:var(--d-ico-fingerprint); }
  .tab-item[data-tab="history"]   { --ico:var(--d-ico-calendar-days); }
  .tab-item[data-tab="overview"]  { --ico:var(--d-ico-chart-column); }
  .tab-item[data-tab="approval"]  { --ico:var(--d-ico-circle-check); }
  .tab-item[data-tab="requests"]  { --ico:var(--d-ico-inbox); }

  /* Module Nghỉ phép */
  .tab-item[data-lv-tab="dash"]   { --ico:var(--d-ico-dashboard); }
  .tab-item[data-lv-tab="form"]   { --ico:var(--d-ico-file-pen); }
  .tab-item[data-lv-tab="hist"]   { --ico:var(--d-ico-clock-history); }
  .tab-item[data-lv-tab="review"] { --ico:var(--d-ico-stamp-check); }

  /* Module Quản lý HR */
  .tab-item[data-hr-tab="employees"]    { --ico:var(--d-ico-users); }
  .tab-item[data-hr-tab="leave"]        { --ico:var(--d-ico-calendar-check); }
  .tab-item[data-hr-tab="orgchart"]     { --ico:var(--d-ico-hierarchy); }
  .tab-item[data-hr-tab="org"]          { --ico:var(--d-ico-building); }
  .tab-item[data-hr-tab="integrations"] { --ico:var(--d-ico-plug); }
  .tab-item[data-hr-tab="export"]       { --ico:var(--d-ico-download); }

  /* Module Admin phòng ban */
  .tab-item[data-da-tab="checkin"] { --ico:var(--d-ico-fingerprint); }
  .tab-item[data-da-tab="leave"]   { --ico:var(--d-ico-calendar-check); }

  /* Lề nội dung, nền sticky và affordance thanh cuộn */
  /* ⚠ padding-block-start PHẢI là 0. .tab-pane chính là scroll container
     (app.css:167), mà padding trên của scroll container co lại vùng ràng
     buộc sticky → thanh ghim tụt xuống đúng bằng padding đó, để hở một khe
     cho dòng dữ liệu lọt lên trên. Đây là lỗi "tên nhân viên bị tràn lên".
     Với padding-block-start:0 thì mép content box trùng mép padding box,
     nên đúng dưới CẢ HAI cách hiểu spec (Chrome/Firefox vs Safari). */
  .tab-pane {
    padding-inline:max(var(--d-gutter), (100% - var(--d-max))/2);
    padding-block:0 var(--s7);
    scrollbar-width:thin;
    scrollbar-color:var(--d-gold-soft) transparent;
  }

  /* Trả lại nhịp trên CHỈ ở pane không có gì ghim vào mép trên.
     .tab-pane có overflow-y:auto → tạo BFC → margin của con đầu không bị
     collapse ra ngoài. Cả 4 thanh sticky đều là :first-child của pane. */
  .tab-pane > :first-child {
    margin-block-start:var(--d-pane-top);
  }

  .tab-pane > .hr-controls-sticky:first-child,
  .tab-pane > .filter-bar:first-child,
  .tab-pane > .lv-subtab-bar:first-child,
  .tab-pane > .calendar-header:first-child {
    margin-block-start:0;
  }

  .checkin-body,
  .stats-grid,
  .btn-checkin-wrap,
  .overview-award-wrap,
  .leave-section-title,
  .entry-card,
  .managed-leave-lookup,
  .lv-overview-sheet,
  .leave-balance-card,
  .oc-legend,
  .filter-bar,
  .lv-subtab-bar {
    padding-inline:0;
    margin-inline:0;
  }

  /* MỘT mép trái duy nhất. Ô tìm kiếm HR mang inline padding:10px 16px ở
     index.html:532 — không thể thắng nếu không dùng !important, nên thay vì
     đánh nhau với nó, lấy luôn 16px làm lề trong chuẩn cho mọi dải.
     Lề ngoài do .tab-pane lo; lề trong 16px ở khắp nơi. */
  .approval-item,
  .hr-emp-row,
  .org-row {
    padding-inline:var(--d-inset);
  }

  /* Thanh ghim phải TRẮNG — bản cũ sơn var(--bg), trùng hệt màu nền shell,
     nên một dòng lọt lên đọc như thể là một phần của header. */
  .filter-bar,
  .hr-controls-sticky,
  .lv-subtab-bar,
  .calendar-header {
    position:sticky;
    top:0;
    z-index:20;
    background:var(--d-surface);
    border-bottom:1px solid var(--d-border-strong);
    box-shadow:var(--d-sticky-edge);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    padding-block:10px;
  }

  /* Nằm trong .leave-cal-scroll chứ không phải .tab-pane → không dính lỗi
     khe chết, chỉ cần đồng bộ diện mạo. */
  .leave-cal-toolbar {
    background:var(--d-surface);
    border-bottom:1px solid var(--d-border-strong);
    box-shadow:var(--d-sticky-edge);
  }

  /* app.css:168 chạy tabPaneIn với transform:translateY(10px) suốt 320ms
     sau mỗi lần đổi tab → tạo containing block sai cho hậu duệ sticky/fixed
     → chớp nháy. Opacity tạo stacking context nhưng KHÔNG tạo containing
     block, nên giữ được hiệu ứng mà không phá sticky. */
  @keyframes dPaneIn {
    from { opacity:0; }
    to   { opacity:1; }
  }

  .tab-pane.active {
    animation:dPaneIn .16s ease-out;
  }

  .tab-pane::-webkit-scrollbar {
    display:block;
    width:10px;
  }

  .tab-pane::-webkit-scrollbar-thumb {
    background:var(--d-gold-soft);
    border-radius:999px;
    border:3px solid var(--bg);
  }

  .tab-pane::-webkit-scrollbar-track {
    background:transparent;
  }

  /* ══ THANH CÔNG CỤ HR ═══════════════════════════════════════════════
     5 dải xếp chồng (~290px, chiếm 40% khung nhìn) → lưới 4 hàng (~128px).
     Thủ phạm chính là .hr-filter-bar grid-template-columns:1fr 1fr ở
     app.css:993 khiến 6 select xếp thành 2×3. */
  .hr-controls-sticky {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(190px,230px);
    grid-template-areas:
      "search  search"
      "filters sort"
      "bulk    bulk"
      "cols    cols";
    padding-block:0;
    align-items:stretch;
  }

  /* Ô tìm kiếm — con đầu tiên, chỉ có inline style nên phải nhắm theo vị trí.
     KHÔNG cần !important: inline dùng var(--card) và var(--border), mà token
     Tầng 2 đã đổi chúng thành #ffffff và #dde2e9 — tự khớp thiết kế mới. */
  .hr-controls-sticky > div:first-child {
    grid-area:search;
    align-items:center;
  }

  .hr-controls-sticky > div:first-child .form-input {
    height:36px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    background:var(--d-surface);
  }

  .hr-controls-sticky > div:first-child .form-input:focus {
    border-color:var(--d-border-focus);
    box-shadow:0 0 0 3px var(--d-surface-sel);
  }

  .hr-controls-sticky > div:first-child button {
    height:36px;
    border-radius:var(--radius);
    white-space:nowrap;
  }

  .hr-filter-bar {
    grid-area:filters;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:var(--s2);
    padding-block:9px;
    background:transparent;
    border-bottom:none;
  }

  .hr-sort-bar {
    grid-area:sort;
    padding-block:9px;
    padding-inline:0 var(--d-inset);
    background:transparent;
    border-bottom:none;
  }

  .hr-filter-bar select,
  .hr-sort-bar select {
    height:32px;
    border-radius:var(--radius-sm);
    border:1px solid var(--border);
    background:var(--d-surface);
    color:var(--text-secondary);
    font-size:12.5px;
  }

  .hr-filter-bar select:hover,
  .hr-sort-bar select:hover {
    border-color:var(--d-border-strong);
  }

  /* Ô lọc đang có giá trị → nổi lên bằng tông thương hiệu */
  .hr-filter-bar select:not(:has(option[value=""]:checked)) {
    border-color:var(--primary);
    background:var(--d-surface-sel);
    color:var(--primary-dark);
    font-weight:600;
  }

  .hr-bulk-bar {
    grid-area:bulk;
    padding-block:8px;
    background:var(--d-surface-sel);
    border-block:1px solid var(--d-border-subtle);
    color:var(--text-primary);
  }

  .hr-bulk-bar .count {
    color:var(--primary-dark);
  }

  .hr-bulk-bar button {
    height:30px;
    border-radius:var(--radius-sm);
    background:var(--d-surface);
    border:1px solid var(--border);
    color:var(--text-secondary);
  }

  .hr-bulk-bar button:hover {
    border-color:var(--d-border-strong);
    color:var(--text-primary);
  }

  .hr-bulk-bar button.danger {
    background:var(--d-err-bg);
    border-color:var(--d-err-bd);
    color:var(--d-err);
  }

  /* ══ BẢNG NHÂN VIÊN ═════════════════════════════════════════════════ */
  /* 5 cột ở desktop hẹp — xem mốc 1192px phía dưới cho bộ 6 cột */
  .hr-emp-row,
  .hr-emp-columns {
    display:grid;
    align-items:center;
    gap:var(--s3);
    grid-template-columns:26px 34px minmax(150px,1.6fr) minmax(150px,1.4fr) 130px;
  }

  .hr-emp-row {
    grid-template-areas:"chk ava name org badges";
    background:var(--d-surface);
    border-bottom:1px solid var(--d-border-subtle);
    transition:background .12s ease;
  }

  /* Sọc ngựa vằn cũ là 1.04:1 — vô hình. Dùng kẻ dòng mảnh thay thế. */
  .hr-emp-row:nth-child(even) {
    background:var(--d-surface);
  }

  .hr-emp-row:hover {
    background:var(--d-surface-hover);
  }

  /* Hàng đang được tick → ám đỏ mận, để phân biệt với hover */
  .hr-emp-row:has(.hr-row-check:checked) {
    background:var(--d-surface-sel);
    box-shadow:inset 2px 0 0 var(--primary);
  }

  .hr-row-check {
    accent-color:var(--primary);
  }

  .hr-emp-row .hr-row-check { grid-area:chk; }
  .hr-emp-row .hr-emp-avatar { grid-area:ava; }
  .hr-emp-row .hr-emp-name { grid-area:name; }
  .hr-emp-row .hr-emp-title { grid-area:title; }
  .hr-emp-row .hr-emp-org { grid-area:org; }
  .hr-emp-row .hr-emp-badges { grid-area:badges; }

  .hr-emp-primary,
  .hr-emp-email,
  .hr-emp-title-inline,
  .hr-emp-title,
  .hr-emp-org {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .hr-emp-email,
  .hr-emp-title-inline,
  .hr-emp-org {
    display:block;
    white-space:nowrap;
    font-size:var(--fs-xs);
    color:var(--text-muted);
  }

  .hr-emp-title-inline {
    margin-top:2px;
    color:var(--text-secondary);
  }

  .hr-emp-title {
    font-size:var(--fs-sm);
    line-height:1.45;
    color:var(--text-secondary);
  }

  .hr-emp-mobile-meta,
  .hr-emp-title {
    display:none;
  }

  /* Đầu bảng — phải cùng grid-template-columns và cùng lề với .hr-emp-row,
     nếu lệch thì tiêu đề không thẳng cột với dữ liệu. */
  .hr-emp-columns {
    grid-area:cols;
    padding:8px var(--d-inset);
    background:var(--d-surface-sunken);
    border-top:1px solid var(--d-border-subtle);
    border-bottom:1px solid var(--d-border-strong);
    color:var(--text-muted);
    font-size:var(--fs-xs);
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
  }

  .hr-emp-columns .hr-col-title {
    display:none;
  }

  /* Badge — gom 4 họ pastel rời rạc về một ngôn ngữ chung */
  .hr-emp-badge {
    padding:2px 8px;
    border-radius:var(--radius-sm);
    border:1px solid transparent;
    font-size:11px;
    font-weight:600;
    letter-spacing:.01em;
  }

  .hr-emp-badge.active   { background:var(--d-ok-bg);      border-color:var(--d-ok-bd);      color:var(--d-ok); }
  .hr-emp-badge.inactive { background:var(--d-neutral-bg); border-color:var(--d-neutral-bd); color:var(--text-muted); }
  .hr-emp-badge.manager  { background:var(--d-info-bg);    border-color:var(--d-info-bd);    color:var(--d-info); }
  .hr-emp-badge.admin    { background:var(--primary-light);border-color:#f0cdd8;             color:var(--primary-dark); }

  /* Phân trang thành chân bảng thật */
  .hr-employee-pager {
    margin-top:0;
    padding:12px var(--d-inset);
    background:var(--d-surface-sunken);
    border-top:1px solid var(--d-border-strong);
    justify-content:flex-end;
    font-size:var(--fs-sm);
  }

  .hr-employee-pager button {
    height:32px;
    border-radius:var(--radius-sm);
    background:var(--d-surface);
    transition:border-color .12s, background .12s;
  }

  .hr-employee-pager button:hover:not(:disabled) {
    border-color:var(--d-border-strong);
    background:var(--d-surface-hover);
  }

  /* Bọc cả danh sách thành một tấm bảng có viền ngoài */
  #hr-emp-list {
    border:1px solid var(--d-border-strong);
    border-top:none;
    border-radius:0 0 var(--radius) var(--radius);
    overflow:hidden;
    background:var(--d-surface);
    box-shadow:var(--d-e1);
  }

  #hr-emp-list .hr-emp-row:last-of-type {
    border-bottom:none;
  }

  /* Lịch sử duyệt, bảng phép và các danh sách Leave */
  .hr-leave-tools {
    grid-template-columns:2fr repeat(5,minmax(0,1fr));
  }

  .hr-leave-tools .lv-admin-search {
    grid-column:auto;
  }

  .lv-reviewed-list,
  #lv-hist-list,
  #lv-review-list {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
    gap:var(--s4);
  }

  .lv-reviewed-list .leave-request-card,
  #lv-hist-list .leave-request-card,
  #lv-review-list .review-card {
    margin:0;
  }

  .lv-admin-kpis {
    max-width:640px;
  }

  .lv-admin-pagination {
    max-width:420px;
    margin-left:auto;
  }

  .lv-overview-sheet {
    max-width:1080px;
    margin-inline:auto;
  }

  .lv-subtab-bar {
    width:100%;
    max-width:420px;
    justify-self:start;
    margin-right:auto;
  }

  /* Tổng quan và hàng đợi chấm công */
  .ov-top {
    display:grid;
    grid-template-columns:minmax(0,min(560px,55%)) minmax(0,1fr);
    gap:var(--s5);
    align-items:start;
  }

  .ov-top>.overview-hero {
    grid-column:1;
    margin:0;
  }

  .ov-top>.overview-award-wrap {
    grid-column:1;
    margin:0;
    padding:0;
  }

  .ov-top>.stats-grid {
    grid-column:2;
    grid-row:1 / span 2;
    margin:0;
  }

  .stats-grid {
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  }

  .approval-list {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(400px,1fr));
    gap:var(--s3);
  }

  .approval-item {
    border:1px solid var(--border);
    border-radius:var(--radius);
  }

  /* Hai cột form dadmin giữ chiều dài đọc vừa phải */
  #dadmin-app .tab-pane>div {
    width:100%;
    max-width:820px;
    margin-inline:auto;
  }
}

@media (min-width:1192px) {
  .hr-emp-row,
  .hr-emp-columns {
    gap:var(--s4);
    grid-template-columns:26px 34px minmax(180px,1.5fr) minmax(140px,1fr) minmax(170px,1.3fr) 180px;
  }

  .hr-emp-row {
    grid-template-areas:"chk ava name title org badges";
  }

  .hr-emp-row .hr-emp-title,
  .hr-emp-columns .hr-col-title {
    display:block;
  }

  .hr-emp-title-inline {
    display:none;
  }
}

@media (min-width:1024px) {
  /* Modal động */
  .modal-overlay {
    align-items:center;
    justify-content:center;
    padding:var(--s7);
    background:rgba(43,33,25,.42);
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
  }

  .modal-sheet {
    max-width:680px;
    max-height:min(84vh,880px);
    padding:var(--s5) 0;
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:var(--shadow-lg);
    animation:dDialogIn .2s cubic-bezier(.2,.8,.2,1);
  }

  .modal-handle {
    display:none;
  }

  .modal-title {
    padding:0 var(--s5) var(--s4);
    font-family:var(--d-serif);
    font-size:20px;
  }

  .modal-body {
    padding:0 var(--s5);
  }

  /* Tám overlay tĩnh */
  .d-overlay,
  #hr-emp-modal,
  #hr-approval-modal,
  .hr-adjust-modal {
    align-items:center;
    justify-content:center;
    padding:var(--s7);
    background:rgba(43,33,25,.42);
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
  }

  #hr-emp-modal .modal-inner,
  #hr-approval-modal .modal-inner,
  .hr-adjust-modal .modal-inner,
  .d-sheet {
    max-width:860px;
    max-height:min(86vh,920px);
    padding:var(--s5) var(--s6);
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:var(--shadow-lg);
  }

  #hr-emp-modal .modal-handle,
  #hr-approval-modal .modal-handle {
    display:none;
  }

  .lv-type-body {
    max-width:960px;
    padding:var(--s7) var(--s6);
  }

  .lv-proxy-sheet {
    position:static;
    width:100%;
    max-width:720px;
    margin:auto;
    border-radius:12px;
  }

  #lv-proxy-popup {
    display:flex;
    align-items:center;
    justify-content:center;
  }
}

@keyframes dDialogIn {
  from { opacity:0; transform:translateY(10px) scale(.985); }
  to { opacity:1; transform:none; }
}

@media (min-width:1024px) {
  :where(button,a,input,select,textarea,[tabindex]):focus-visible {
    outline:2px solid var(--primary);
    outline-offset:2px;
    box-shadow:0 0 0 4px var(--d-surface-sel);
  }

  /* app.css:621 đặt vòng focus TRẮNG cho avatar vì header xưa màu đỏ mận.
     Header nay trắng → vòng trắng trên nền trắng, người dùng bàn phím mất
     hoàn toàn chỉ báo. Selector trên dùng :where() nên đặc hiệu 0, thua
     .profile-avatar-trigger:focus-visible (0,2,0) — phải nhắm đủ mạnh. */
  .app-header .profile-avatar-trigger:focus-visible {
    outline:2px solid var(--primary);
    outline-offset:3px;
    box-shadow:0 0 0 5px var(--d-surface-sel);
  }

  /* app.css:123 dùng rgba(255,255,255,.35) — vô hình trên header trắng */
  .header-btn:active,
  #calendar-app .header-btn:active {
    background:var(--d-surface-active);
    border-color:var(--d-border-strong);
    transform:scale(.96);
  }

  #landing-screen :where(button,a,input,[tabindex]):focus-visible,
  #login-screen :where(button,a,input,[tabindex]):focus-visible {
    outline-color:var(--d-gold);
    box-shadow:0 0 0 4px rgba(176,137,76,.2);
  }

  #landing-screen .profile-avatar-trigger:focus-visible {
    outline:2px solid var(--d-gold);
    box-shadow:0 0 0 5px rgba(176,137,76,.2);
  }

  /* Ám đỏ mận trên MỌI hàng hover là quá ồn ở mật độ danh sách.
     Để dành --d-surface-sel cho lựa chọn thật. */
  .approval-item:hover,
  .org-row:hover,
  .leave-request-card:hover,
  .review-card:hover,
  .activity-item:hover {
    background:var(--d-surface-hover);
  }

  .d-status {
    order:2;
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:0 11px;
    border:1px solid var(--d-ok-bd);
    border-radius:var(--d-radius-pill);
    background:var(--d-ok-bg);
    color:var(--d-ok);
    font-size:var(--fs-xs);
    font-weight:600;
    white-space:nowrap;
  }

  .d-status::before {
    content:"";
    width:6px;
    height:6px;
    margin-right:7px;
    border-radius:50%;
    background:var(--d-ok);
  }

  /* ══ P6 — GOM VỀ MỘT NGÔN NGỮ ══════════════════════════════════════
     Bốn họ badge pastel rời rạc (app.css:522-525, 562-565, 823-826,
     1290-1295) nay dùng chung bộ --d-ok/warn/err/info/neutral. */
  .status-badge,
  .activity-status,
  .lv-badge {
    padding:3px 9px;
    border:1px solid transparent;
    border-radius:var(--radius-sm);
    font-size:11px;
    font-weight:600;
    letter-spacing:.01em;
  }

  .status-badge.AUTO_PASS,
  .status-badge.APPROVED,
  .activity-status.pass,
  .lv-badge.APPROVED {
    background:var(--d-ok-bg);
    border-color:var(--d-ok-bd);
    color:var(--d-ok);
  }

  .status-badge.PENDING_APPROVAL,
  .activity-status.pending,
  .lv-badge.PENDING {
    background:var(--d-warn-bg);
    border-color:var(--d-warn-bd);
    color:var(--d-warn);
  }

  .status-badge.REJECTED,
  .activity-status.reject,
  .lv-badge.REJECTED {
    background:var(--d-err-bg);
    border-color:var(--d-err-bd);
    color:var(--d-err);
  }

  .lv-badge.CANCEL_REQUESTED {
    background:var(--d-info-bg);
    border-color:var(--d-info-bd);
    color:var(--d-info);
  }

  .lv-badge.CANCELLED {
    background:var(--d-neutral-bg);
    border-color:var(--d-neutral-bd);
    color:var(--text-muted);
  }

  /* Thẻ chỉ số — bóng 6% một mình quá khẽ trên nền #f1f3f7, cần thêm viền */
  .stat-card,
  .setup-card,
  .oc-legend,
  .oc-dept {
    border:1px solid var(--border);
  }

  .stat-card:hover {
    border-color:var(--d-border-strong);
    box-shadow:var(--d-e2);
  }

  /* Tổ chức: vạch ngăn 8px màu nền → thẻ thật */
  .org-section {
    margin-bottom:var(--s4);
    border:1px solid var(--border);
    border-bottom:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--d-surface);
    box-shadow:var(--d-e1);
    overflow:hidden;
  }

  .org-section-head:hover {
    background:var(--d-surface-hover);
  }

  .org-section-count {
    background:var(--d-surface-sunken);
    border:1px solid var(--d-border-subtle);
  }

  /* Ô lọc: nền var(--bg) trên dải đã trắng → dùng mặt trắng + viền */
  .filter-select,
  .form-input,
  .combobox-input {
    background:var(--d-surface);
    border-color:var(--border);
  }

  .filter-select:hover,
  .form-input:hover,
  .combobox-input:hover {
    border-color:var(--d-border-strong);
  }

  .form-input:focus,
  .combobox-input:focus {
    border-color:var(--d-border-focus);
    box-shadow:0 0 0 3px var(--d-surface-sel);
  }

  /* KPI lịch sử duyệt — bỏ xám lạnh hardcode */
  .lv-admin-kpis {
    background:var(--border);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
  }

  .lv-admin-kpis > div { background:var(--d-surface); }
  .lv-admin-kpis span   { color:var(--text-muted); }
  .lv-admin-kpis strong { color:var(--text-primary); }

  /* Màn mờ modal: bản cũ là nâu ấm rgba(43,33,25) — lệch tông Tầng 2 */
  .modal-overlay,
  .d-overlay,
  #hr-emp-modal,
  #hr-approval-modal,
  .hr-adjust-modal {
    background:rgba(17,24,39,.44);
  }

  /* ⚠ NGOẠI LỆ CỐ Ý — KHÔNG trung tính hóa .lv-overview-*.
     Đây là bản mô phỏng tờ đơn phép giấy (Georgia, #fae8e6, #9f0042):
     người dùng in và chụp màn hình nó, nên nó phải giống tờ giấy thật.
     Chỉ đóng khung cho ra dáng tài liệu, không đụng màu bên trong. */
  .lv-overview-sheet {
    border:1px solid var(--d-border-strong);
    border-radius:2px;
    box-shadow:var(--d-e3);
  }
}

@media (min-width:1600px) {
  :root {
    --d-max:1440px;
  }
}

/* Bảng phép là bản mô phỏng tờ giấy — khi in thì bỏ khung và bóng đổ */
@media print {
  .lv-overview-sheet {
    border:0;
    box-shadow:none;
  }
}

/* Tăng tương phản khi hệ điều hành yêu cầu */
@media (min-width:1024px) and (prefers-contrast:more) {
  :root {
    --d-border-subtle:#c9d0d9;
    --border:#aab3bf;
    --d-border-strong:#7d8794;
    --text-muted:#4b5259;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   LỚP HIỆU ỨNG — CHỈ Tầng 1 (Login + Landing), chỉ ≥1024px.
   Bốn module làm việc tuyệt đối không đụng tới: người dùng nhìn chúng
   hàng chục lần mỗi ngày, chuyển động ở đó là gánh nặng chứ không phải
   điểm cộng. Toàn bộ khối này nằm TRƯỚC ô prefers-reduced-motion ở cuối
   file nên bị vô hiệu hóa sạch khi người dùng tắt hiệu ứng hệ thống.
═══════════════════════════════════════════════════════════════════════ */
@keyframes dMesh {
  0%   { transform:translate3d(0,0,0)        scale(1);    }
  50%  { transform:translate3d(2.5%,-2.2%,0) scale(1.09); }
  100% { transform:translate3d(-2.2%,2.5%,0) scale(1.04); }
}

@media (min-width:1024px) {
  /* ── Nghiêng 3D theo chuột. --mx/--my do desktop-fx.js ghi (0..1).
     Giá trị mặc định .5 = phẳng, nên không có JS thì vẫn hiển thị đúng. ── */
  .module-card,
  .landing-mini-btn {
    transform-style:preserve-3d;
    transform:
      perspective(760px)
      rotateX(calc((var(--my,.5) - .5) * -13deg))
      rotateY(calc((var(--mx,.5) - .5) * 16deg))
      translate3d(0,var(--d-lift,0),0)
      scale(var(--d-scale,1));
    transition:transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .28s, border-color .28s;
  }

  /* ⚠ Trong lúc rê chuột, transform PHẢI bám tức thì.
     Ở v4 tôi để transition:transform .28s chạy suốt: mỗi pointermove ghi
     --mx/--my mới thì trình duyệt lại nội suy 280ms tới giá trị đó, nên góc
     nghiêng luôn tụt lại phía sau và không bao giờ đạt tới — biên độ thực
     tế còn gần bằng 0. Đó là lý do "không thấy 3D".
     Giữ transition cho lúc rời chuột để thẻ trở về phẳng mượt. */
  .module-card.is-tilting,
  .landing-mini-btn.is-tilting {
    transition:box-shadow .28s, border-color .28s;
    --d-lift:-6px;
    --d-scale:1.02;
  }

  /* Bóng đổ lệch NGƯỢC hướng nghiêng — tín hiệu để mắt đọc ra khối 3D */
  .module-card.is-tilting {
    box-shadow:
      calc((var(--mx,.5) - .5) * -26px)
      calc((var(--my,.5) - .5) * -20px + 16px)
      34px -10px rgba(17,24,39,.26);
  }

  .landing-mini-btn.is-tilting {
    box-shadow:
      calc((var(--mx,.5) - .5) * -16px)
      calc((var(--my,.5) - .5) * -12px + 10px)
      24px -8px rgba(17,24,39,.22);
  }

  .module-card:active,
  .landing-mini-btn:active {
    --d-lift:-2px;
    --d-scale:1;
  }

  /* Vệt sáng chạy theo con trỏ, nằm dưới nội dung */
  .module-card::before,
  .landing-mini-btn::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    border-radius:inherit;
    background:radial-gradient(circle 220px at calc(var(--mx,.5) * 100%) calc(var(--my,.5) * 100%),
      rgba(255,255,255,.85), rgba(255,255,255,0) 62%);
    opacity:0;
    transition:opacity .28s;
    pointer-events:none;
  }

  .module-card:hover::before,
  .landing-mini-btn:hover::before {
    opacity:1;
  }

  /* Nâng nội dung lên trên vệt sáng. LOẠI TRỪ mũi tên: nó cần position
     absolute, mà quy tắc `> *` đứng sau nên sẽ đè mất (đặc hiệu bằng nhau,
     sau thắng) và biến right/bottom thành dịch chuyển tương đối — ở v4 nó
     đẩy mũi tên lùi trái 24px, lên 24px, rơi đúng lên dòng mô tả. */
  .module-card > *:not(.module-card-arrow),
  .landing-mini-btn > * {
    position:relative;
    z-index:1;
  }

  .module-card > .module-card-arrow {
    position:absolute;
    z-index:2;
    right:var(--s5);
    bottom:var(--s5);
  }

  /* ── Hiện lần lượt khi tải trang ── */
  #landing-screen .landing-hero  { animation:landingLift .6s .04s cubic-bezier(.16,1,.3,1) both; }
  #landing-screen .landing-user  { animation:landingLift .6s .10s cubic-bezier(.16,1,.3,1) both; }
  .module-card:nth-child(1)      { animation:landingLift .6s .16s cubic-bezier(.16,1,.3,1) both; }
  .module-card:nth-child(2)      { animation:landingLift .6s .22s cubic-bezier(.16,1,.3,1) both; }
  .landing-mini-btn:nth-child(1) { animation:landingLift .6s .28s cubic-bezier(.16,1,.3,1) both; }
  .landing-mini-btn:nth-child(2) { animation:landingLift .6s .33s cubic-bezier(.16,1,.3,1) both; }
  .landing-mini-btn:nth-child(3) { animation:landingLift .6s .38s cubic-bezier(.16,1,.3,1) both; }

  /* ── Login: mesh động phủ trên ảnh + thẻ kính mờ ── */
  #login-screen {
    position:fixed;
    overflow:hidden;
  }

  .login-hero {
    position:relative;
    overflow:hidden;
  }

  .login-hero::after {
    content:"";
    position:absolute;
    inset:-25%;
    z-index:0;
    background:
      radial-gradient(40% 46% at 26% 26%, rgba(255,255,255,.16), transparent 62%),
      radial-gradient(36% 42% at 74% 72%, rgba(15,118,110,.24), transparent 60%);
    filter:blur(26px);
    animation:dMesh 24s ease-in-out infinite alternate;
    will-change:transform;
    pointer-events:none;
  }

  .login-hero > * {
    position:relative;
    z-index:1;
  }

  .login-card {
    margin:clamp(var(--s6),4vw,var(--s8));
    padding:var(--s8) clamp(36px,4vw,64px);
    border:1px solid rgba(255,255,255,.9);
    border-radius:var(--d-radius-lg);
    background:rgba(255,255,255,.8);
    -webkit-backdrop-filter:blur(20px) saturate(1.3);
    backdrop-filter:blur(20px) saturate(1.3);
    box-shadow:var(--d-e4);
    align-self:center;
  }

  .lv-subtab-count {
    background:var(--d-warn-bg);
    color:var(--d-warn);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   CỔNG VÀO HR ENTERPRISE — Login + Landing, chỉ desktop.
   Hệ này thay thế lớp hiệu ứng thử nghiệm phía trên bằng bố cục tĩnh, rõ
   thứ bậc và ưu tiên khả năng đọc. Mobile tiếp tục dùng app.css nguyên bản.
═══════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px) {
  .d-front-only { display:block; }

  #login-screen,
  #landing-screen {
    font-family:var(--d-sans);
  }

  /* ── Login: brand story bên trái, một hành động duy nhất bên phải ── */
  #login-screen {
    display:grid;
    grid-template-columns:minmax(0,1fr) clamp(430px,38vw,560px);
    background:#f4f6f8;
  }

  #login-screen::before { display:none; }

  .login-hero {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    overflow:hidden;
    padding:clamp(44px,6vw,92px);
    text-align:left;
    background:
      linear-gradient(128deg,rgba(68,7,31,.96),rgba(117,10,51,.88)),
      url('../images/hr-hero.jpg') center/cover no-repeat;
  }

  .login-hero::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:
      linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px),
      linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
    background-size:72px 72px;
    mask-image:linear-gradient(135deg,rgba(0,0,0,.6),transparent 74%);
    pointer-events:none;
  }

  .login-hero::after { display:none; }

  .login-hero > * {
    position:relative;
    z-index:1;
  }

  .login-logo {
    width:184px;
    height:76px;
    margin:0 0 clamp(40px,6vh,64px);
    border:1px solid rgba(255,255,255,.78);
    border-radius:12px;
    background:#fff;
    box-shadow:0 16px 40px rgba(24,5,13,.18);
  }

  .login-logo img {
    width:152px;
    max-height:56px;
  }

  .login-kicker {
    margin-bottom:14px;
    color:#f0c86d;
    font-size:12px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
  }

  #login-screen .login-hero h2 {
    max-width:650px;
    margin:0;
    color:#fff;
    font-family:var(--d-sans);
    font-size:clamp(38px,4.2vw,62px);
    font-weight:650;
    line-height:1.08;
    letter-spacing:-.035em;
  }

  .login-hero > p {
    max-width:560px;
    margin:22px 0 0;
    color:rgba(255,255,255,.78);
    font-size:16px;
    line-height:1.7;
    text-align:left;
  }

  .login-benefits {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:min(100%,700px);
    margin-top:clamp(34px,6vh,64px);
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.18);
  }

  .login-benefits > div {
    display:grid;
    grid-template-columns:28px minmax(0,1fr);
    gap:3px 10px;
    padding-right:18px;
  }

  .login-benefits span {
    grid-row:1 / 3;
    color:#f0c86d;
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
  }

  .login-benefits strong {
    color:#fff;
    font-size:13px;
    font-weight:650;
  }

  .login-benefits small {
    color:rgba(255,255,255,.58);
    font-size:11px;
    line-height:1.45;
  }

  .login-card {
    display:flex;
    align-self:stretch;
    align-items:center;
    justify-content:center;
    margin:0;
    padding:clamp(28px,4vw,64px);
    border:0;
    border-radius:0;
    background:#f4f6f8;
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  .login-panel {
    display:block;
    width:100%;
    max-width:430px;
    padding:clamp(32px,4vw,48px);
    border:1px solid #e1e5ea;
    border-radius:18px;
    background:#fff;
    box-shadow:0 24px 64px rgba(17,24,39,.10);
  }

  .login-panel-mark {
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    margin-bottom:30px;
    border-radius:11px;
    background:#830b39;
    color:#fff;
    font-size:14px;
    font-weight:750;
    letter-spacing:.06em;
    box-shadow:0 10px 22px rgba(131,11,57,.2);
  }

  .login-panel-eyebrow {
    margin-bottom:10px;
    color:#830b39;
    font-size:11px;
    font-weight:750;
    letter-spacing:.12em;
  }

  #login-screen .login-card h3 {
    margin:0 0 10px;
    color:#111827;
    font-family:var(--d-sans);
    font-size:28px;
    font-weight:650;
    letter-spacing:-.025em;
    text-align:left;
  }

  .login-card-copy {
    max-width:none;
    margin:0 0 28px;
    color:#667085;
    font-size:14px;
    line-height:1.6;
    text-align:left;
  }

  .login-panel .btn-google {
    min-height:50px;
    margin:0;
    border:1px solid #cfd5dd;
    border-radius:10px;
    background:#fff;
    color:#28313f;
    font-size:14px;
    font-weight:650;
    box-shadow:0 1px 2px rgba(17,24,39,.04);
  }

  .login-panel .btn-google:hover {
    border-color:#aeb7c3;
    background:#f9fafb;
    box-shadow:0 8px 20px rgba(17,24,39,.08);
    transform:translateY(-1px);
  }

  .login-panel .btn-google:focus-visible {
    outline:3px solid rgba(224,176,56,.42);
    outline-offset:3px;
  }

  .login-security {
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid #edf0f3;
    color:#7a8491;
    font-size:11px;
    line-height:1.5;
  }

  .login-security svg {
    flex:0 0 auto;
    width:17px;
    height:17px;
    color:#830b39;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  /* ── Landing: workspace có phân cấp ứng dụng chính / công cụ ── */
  #landing-screen {
    display:grid;
    grid-template-columns:minmax(280px,420px) minmax(0,860px);
    grid-template-areas:
      "hero workspace"
      "hero cards"
      "hero toolshead"
      "hero tools";
    grid-template-rows:auto auto auto auto;
    align-content:center;
    align-items:stretch;
    justify-content:center;
    gap:14px clamp(24px,3.2vw,48px);
    overflow:hidden;
    padding:clamp(72px,8vh,108px) clamp(32px,5vw,76px) clamp(36px,5vh,64px);
    background:#f4f6f8;
    isolation:isolate;
  }

  #landing-screen::before {
    content:"";
    display:block;
    position:absolute;
    inset:0 auto 0 0;
    z-index:0;
    width:max(35.5%,calc((100% - 1328px)/2 + 444px));
    opacity:1;
    background:
      linear-gradient(150deg,rgba(71,7,31,.98),rgba(122,11,51,.94)),
      url('../images/hr-hero.jpg') center/cover no-repeat;
    filter:none;
    animation:none;
    pointer-events:none;
  }

  #landing-screen::after {
    content:"";
    display:block;
    position:absolute;
    inset:0 auto 0 0;
    z-index:0;
    width:max(35.5%,calc((100% - 1328px)/2 + 444px));
    height:100%;
    background:
      linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px),
      linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
    background-size:72px 72px;
    mask-image:linear-gradient(145deg,rgba(0,0,0,.55),transparent 78%);
    pointer-events:none;
  }

  .landing-hero {
    grid-area:hero;
    align-self:center;
    max-width:390px;
    margin:0;
    padding-right:clamp(8px,2vw,28px);
    color:#fff;
    animation:none;
  }

  .landing-logo {
    width:172px;
    height:72px;
    margin:0 0 clamp(38px,5vh,54px);
    padding:0;
    justify-content:center;
    border:1px solid rgba(255,255,255,.8);
    border-radius:11px;
    background:#fff;
    box-shadow:0 16px 38px rgba(27,5,14,.2);
  }

  .landing-logo img {
    width:143px;
    max-height:53px;
  }

  .landing-kicker {
    margin-bottom:13px;
    color:#f0c86d;
    font-size:11px;
    font-weight:750;
    letter-spacing:.16em;
  }

  #landing-screen .landing-hero h1 {
    margin:0;
    color:#fff;
    font-family:var(--d-sans);
    font-size:clamp(34px,3.2vw,48px);
    font-weight:650;
    line-height:1.12;
    letter-spacing:-.035em;
    text-shadow:none;
  }

  #landing-screen .landing-hero p {
    max-width:360px;
    margin:18px 0 0;
    color:rgba(255,255,255,.72);
    font-size:14px;
    line-height:1.7;
  }

  .landing-context {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:28px;
  }

  .landing-context span {
    padding:7px 10px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:rgba(255,255,255,.78);
    font-size:10px;
    font-weight:600;
    letter-spacing:.03em;
  }

  #landing-screen .landing-user {
    position:absolute;
    z-index:3;
    top:22px;
    right:clamp(32px,5vw,76px);
    width:auto;
    max-width:min(360px,42vw);
    margin:0;
    padding:6px 6px 6px 10px;
    gap:10px;
    border:1px solid #dfe4e9;
    border-radius:12px;
    background:#fff;
    box-shadow:0 6px 18px rgba(17,24,39,.07);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    animation:none;
  }

  .landing-user-avatar {
    width:34px;
    height:34px;
    border:1px solid #ead1dc;
    background:#f8eaf0;
    color:#760b34;
    font-size:14px;
    box-shadow:none;
  }

  .landing-user-name {
    color:#202938;
    font-size:12.5px;
    font-weight:650;
  }

  .landing-user-email {
    color:#7a8491;
    font-size:10.5px;
  }

  .landing-logout {
    padding:8px 10px;
    border:0;
    border-radius:8px;
    background:#f3f5f7;
    color:#5b6573;
    font-size:11px;
    font-weight:650;
    box-shadow:none;
  }

  .landing-logout:hover {
    border:0;
    background:#e9edf1;
    color:#760b34;
    box-shadow:none;
  }

  .landing-workspace-head {
    grid-area:workspace;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:4px;
    animation:none;
  }

  .landing-workspace-head span,
  .landing-tools-head > span,
  .module-card-label {
    color:#8a143e;
    font-size:10px;
    font-weight:750;
    letter-spacing:.12em;
  }

  #landing-screen .landing-workspace-head h2 {
    margin:5px 0 0;
    color:#182230;
    font-family:var(--d-sans);
    font-size:25px;
    font-weight:650;
    letter-spacing:-.025em;
  }

  .landing-workspace-head > p {
    margin:0 0 2px;
    color:#7a8491;
    font-size:12px;
    line-height:1.5;
    white-space:nowrap;
  }

  .landing-modules {
    grid-area:cards;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    max-width:none;
  }

  .module-card {
    position:relative;
    display:grid;
    grid-template-columns:48px minmax(0,1fr) 30px;
    align-items:center;
    gap:15px;
    min-height:132px;
    padding:22px;
    overflow:hidden;
    border:1px solid #dde2e8;
    border-radius:14px;
    background:#fff;
    box-shadow:0 5px 18px rgba(17,24,39,.055);
    transform:none;
    animation:none;
    transition:border-color .18s,box-shadow .18s,transform .18s;
  }

  .module-card::before {
    content:"";
    display:block;
    position:absolute;
    inset:0 auto 0 0;
    width:3px;
    border-radius:0;
    background:#8a143e;
    opacity:0;
    transition:opacity .18s;
  }

  .module-card::after { display:none; }

  .module-card:hover {
    border-color:#c9cfd7;
    box-shadow:0 12px 30px rgba(17,24,39,.09);
    transform:translateY(-2px);
  }

  .module-card:hover::before { opacity:1; }

  .module-card:active {
    box-shadow:0 5px 18px rgba(17,24,39,.06);
    transform:translateY(0);
  }

  .module-card-icon.module-checkin,
  .module-card-icon.module-leave {
    width:48px;
    height:48px;
    border-radius:11px;
    box-shadow:none;
  }

  .module-card-icon.module-checkin { background:#850c3a; }
  .module-card-icon.module-leave   { background:#0d766e; }

  .module-card-info { min-width:0; }

  .module-card-label {
    margin-bottom:7px;
    color:#89929e;
    font-size:9px;
  }

  .module-card-title {
    color:#1e2735;
    font-family:var(--d-sans);
    font-size:18px;
    font-weight:650;
  }

  .module-card-desc {
    max-width:none;
    margin-top:4px;
    color:#707a87;
    font-size:11.5px;
    line-height:1.45;
  }

  .module-card > .module-card-arrow {
    position:static;
    z-index:1;
    align-self:center;
    width:30px;
    height:30px;
    border-radius:8px;
    background:#f3f5f7;
    color:#697381;
  }

  .module-card:hover .module-card-arrow {
    background:#f8eaf0;
    color:#850c3a;
    transform:translateX(2px);
  }

  .landing-tools-head {
    grid-area:toolshead;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:8px;
  }

  .landing-tools-head small {
    color:#8a929c;
    font-size:10.5px;
  }

  .landing-mini-btns {
    grid-area:tools;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    max-width:none;
    margin:0;
    animation:none;
  }

  .landing-mini-btn {
    position:relative;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    min-height:70px;
    height:auto;
    padding:14px 15px;
    gap:11px;
    overflow:hidden;
    border:1px solid #e0e4e9;
    border-radius:12px;
    background:#fff;
    color:#354052;
    font-size:11.5px;
    font-weight:650;
    text-align:left;
    white-space:normal;
    box-shadow:none;
    transform:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    transition:border-color .18s,background .18s,box-shadow .18s;
  }

  .landing-mini-btn::before { display:none; }

  .landing-mini-btn::after {
    content:"→";
    margin-left:auto;
    color:#98a1ad;
    font-size:14px;
  }

  .landing-mini-btn svg {
    flex:0 0 auto;
    width:19px;
    height:19px;
    color:#850c3a;
  }

  .landing-mini-btn:hover {
    border-color:#cbd1d8;
    background:#fff;
    box-shadow:0 8px 20px rgba(17,24,39,.07);
    transform:none;
  }

  .landing-mini-btn:active {
    background:#f8f9fa;
    box-shadow:none;
    transform:none;
  }
}

@media (min-width:1024px) and (max-height:680px) {
  .login-hero { padding:38px clamp(44px,6vw,72px); }
  .login-logo { margin-bottom:28px; }
  .login-benefits { margin-top:30px; }
  .login-panel { padding:30px 36px; }
  .login-panel-mark { margin-bottom:22px; }

  #landing-screen {
    gap:10px clamp(22px,3vw,40px);
    padding-top:64px;
    padding-bottom:28px;
  }
  .landing-logo { margin-bottom:26px; }
  .landing-context { margin-top:20px; }
  .module-card { min-height:112px; padding:17px 19px; }
  .landing-mini-btn { min-height:58px; padding:11px 13px; }
}

@media (min-width:1024px) and (max-width:1191.98px) {
  #landing-screen::before,
  #landing-screen::after {
    width:calc(22.5% + 112.64px);
  }

  #landing-screen {
    grid-template-columns:minmax(260px,320px) minmax(0,1fr);
    gap:9px 32px;
    padding-right:clamp(32px,5vw,52px);
    padding-left:clamp(32px,5vw,52px);
  }

  .landing-hero {
    max-width:280px;
    padding-right:0;
  }

  .landing-logo {
    width:150px;
    height:64px;
    margin-bottom:24px;
  }

  .landing-logo img {
    width:124px;
    max-height:47px;
  }

  #landing-screen .landing-hero h1 {
    font-size:32px;
    line-height:1.12;
  }

  #landing-screen .landing-hero p {
    max-width:270px;
    margin-top:14px;
    font-size:12px;
    line-height:1.6;
  }

  .landing-context {
    gap:6px;
    margin-top:18px;
  }

  .landing-context span {
    padding:6px 8px;
    font-size:9px;
  }

  .landing-workspace-head > p,
  .landing-tools-head small {
    display:none;
  }

  #landing-screen .landing-workspace-head h2 {
    font-size:22px;
  }

  .landing-modules {
    grid-template-columns:1fr;
    gap:8px;
  }

  .module-card {
    grid-template-columns:42px minmax(0,1fr) 30px;
    min-height:90px;
    padding:14px 17px;
  }

  .module-card-icon.module-checkin,
  .module-card-icon.module-leave {
    width:42px;
    height:42px;
  }

  .module-card-label { margin-bottom:4px; }
  .module-card-desc { white-space:nowrap; }

  .landing-tools-head { margin-top:5px; }

  .landing-mini-btn {
    min-height:56px;
    padding:10px 11px;
    gap:8px;
    font-size:10.5px;
  }
}

/* Escape hatch chuẩn WCAG — !important ở đây là bắt buộc theo khuyến nghị
   của W3C và KHÔNG tính vào ngân sách cascade của desktop.
   Đặt CUỐI file để tắt sạch cả lớp hiệu ứng phía trên. */
@media (prefers-reduced-motion:reduce) {
  *,
  *::before,
  *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }

  /* Tắt transform tương tác; nền thương hiệu mới là lớp tĩnh nên vẫn giữ. */
  .module-card,
  .landing-mini-btn {
    transform:none !important;
  }

  .module-card::before,
  .landing-mini-btn::before {
    display:none !important;
  }
}