/* ============================================================
   ezCloud Design System — token màu và kiểu chữ cho ezID
   Trích từ "UI màu sắc ezCloud" (_ds/colors_and_type.css).

   Đặt riêng một file để các trang chuyển dần sang bộ này mà không
   phải chép lại giá trị màu vào từng view. Trang nào chưa chuyển vẫn
   giữ nguyên bộ Vuexy cũ (#186FF4 / Public Sans) — xem DESIGN.md.

   Font nạp từ Google Fonts thay vì tự host: CspTrustedDomains của STS
   đã cho phép fonts.googleapis.com và fonts.gstatic.com, và bộ .ttf
   trong design system nặng 3,6 MB cho các nét phần lớn không dùng tới.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');

:root {
    /* ---------- Màu thương hiệu (lấy từ logo) ---------- */
    --ez-sky: #0087CF;          /* xanh trời — màu chính */
    --ez-blue: #1A7FC3;
    --ez-royal: #12388C;
    --ez-indigo: #2C327D;       /* chữ "Cloud", tiêu đề */
    --ez-gold: #FAD93A;

    --ez-sky-700: #006fa9;
    --ez-sky-600: #0087CF;
    --ez-sky-500: #1f9bdd;
    --ez-sky-300: #7ec7ec;
    --ez-sky-100: #d6edf9;
    --ez-sky-50: #eef7fc;

    --ez-indigo-700: #20256a;
    --ez-indigo-50: #ebecf5;

    --ez-gold-600: #f0c200;
    --ez-gold-100: #fef6cf;

    /* ---------- Trung tính (xám ngả xanh) ---------- */
    --ink-900: #0f172a;         /* chữ chính */
    --ink-700: #334155;         /* chữ phụ */
    --ink-500: #64748b;         /* chú thích */
    --ink-400: #94a3b8;         /* placeholder / mờ */
    --line-300: #cbd5e1;
    --line-200: #e2e8f0;        /* viền mặc định */
    --line-100: #eef2f7;
    --paper: #f6f8fb;           /* nền trang */
    --surface: #ffffff;         /* thẻ, phiếu */

    /* ---------- Trạng thái ---------- */
    --ok: #1f9d57;      --ok-bg: #e6f6ed;
    --warn: #e8920c;    --warn-bg: #fdf2dd;
    --danger: #e0413b;  --danger-bg: #fcebea;
    --info: #0087CF;    --info-bg: #e6f3fb;

    /* ---------- Kiểu chữ ---------- */
    --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* ---------- Bo góc và đổ bóng ---------- */
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-pill: 999px;
    --sh-xs: 0 1px 2px rgba(18, 56, 140, .06);
    --sh-sm: 0 1px 3px rgba(18, 56, 140, .08), 0 1px 2px rgba(18, 56, 140, .04);
    --sh-md: 0 4px 12px rgba(18, 56, 140, .10), 0 2px 4px rgba(18, 56, 140, .05);
    --sh-lg: 0 12px 28px rgba(18, 56, 140, .14), 0 4px 8px rgba(18, 56, 140, .06);
    --sh-xl: 0 24px 56px rgba(18, 56, 140, .18);
    /* Vòng sáng khi ô nhập được chọn */
    --ring: 0 0 0 3px rgba(0, 135, 207, .28);
}

/* Đánh dấu vùng đã chuyển sang bộ token mới. Chỉ những khối mang class này
   mới đổi giao diện, nên trang chưa chuyển không bị ảnh hưởng. */
.ez-ds {
    font-family: var(--font-sans);
    color: var(--ink-700);
}

.ez-ds h1, .ez-ds h2, .ez-ds h3, .ez-ds .ez-display {
    font-family: var(--font-display);
    color: var(--ink-900);
    letter-spacing: -.01em;
}

.ez-ds a { color: var(--ez-sky); text-decoration: none; }
.ez-ds a:hover { color: var(--ez-sky-700); text-decoration: underline; }

/* ============================================================
   Lớp thành phần dùng chung cho các trang đã chuyển sang bộ này.
   Đặt ở đây thay vì chép vào từng view: trang 2FA, Đổi mật khẩu,
   Passkeys và Lịch sử đăng nhập dùng chung đúng một bản.
   Tên lớp mang tiền tố ez- để không đụng Vuexy.
   ============================================================ */

.ez-page { font-family: var(--font-sans); color: var(--ink-700); width: 100%; max-width: 780px; min-width: 0; }

/* Tiêu đề trang, đặt ngoài thẻ */
.ez-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.ez-head-text { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.ez-head h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -.01em; color: var(--ink-900); }
.ez-head p { margin: 0; font-size: 13.5px; color: var(--ink-500); line-height: 1.6; }

/* Banner trạng thái / ghi chú */
.ez-banner { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--r-lg); margin-bottom: 18px; }
.ez-banner-icon { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; background: var(--surface); border-radius: var(--r-pill); }
.ez-banner-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ez-banner-title { font-size: 14px; font-weight: 600; }
.ez-banner-desc { font-size: 12.5px; opacity: .85; line-height: 1.5; }
.ez-banner-on { background: var(--ok-bg); border: 1px solid #bfe3cd; color: #166b3d; }
.ez-banner-off { background: var(--warn-bg); border: 1px solid #f0d49a; color: #8a5a06; }
.ez-banner-warn { background: var(--warn-bg); border: 1px solid #f0dcb4; color: #8a5807; align-items: flex-start; border-radius: var(--r-md); padding: 13px 16px; }
.ez-banner-danger { background: var(--danger-bg); border: 1px solid #f3c9c7; color: var(--danger); align-items: flex-start; border-radius: var(--r-md); padding: 13px 16px; }
.ez-banner-info { background: var(--info-bg); border: 1px solid var(--ez-sky-300); color: var(--ez-royal); align-items: flex-start; border-radius: var(--r-md); padding: 13px 16px; }
/* Mã khôi phục hiển thị dạng lưới ô chữ đơn cách */
.ez-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ez-code {
    display: block; padding: 9px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13.5px; letter-spacing: .5px; color: var(--ink-900);
    background: var(--paper); border: 1px solid var(--line-200); border-radius: var(--r-sm);
    user-select: all;
}
@media (max-width: 575.98px) { .ez-codes { grid-template-columns: minmax(0, 1fr); } }

/* Hộp gợi ý màu xanh nhạt */
.ez-note { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; background: var(--ez-sky-50); border-radius: var(--r-md); margin-bottom: 18px; }
.ez-note-text { font-size: 12.5px; color: var(--ez-royal); line-height: 1.55; }

/* Thẻ */
.ez-card { background: var(--surface); border: 1px solid var(--line-200); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; margin-bottom: 18px; }
.ez-card-pad { padding: 22px 24px; display: flex; flex-direction: column; gap: 18px; }
.ez-card-danger { border-color: #f3c9c7; box-shadow: none; }
.ez-card-accent { border-color: var(--ez-sky-300); box-shadow: var(--sh-md); }
.ez-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--line-200); }
.ez-card-head h2 { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink-900); }
.ez-card-sub { font-size: 12.5px; color: var(--ink-500); }

/* Dòng trong thẻ */
.ez-row { display: flex; align-items: center; gap: 14px; padding: 15px 20px; border-bottom: 1px solid var(--line-100); transition: background .15s cubic-bezier(.2,.7,.3,1); }
.ez-row:last-child { border-bottom: none; }
.ez-row-hover:hover { background: var(--ez-sky-50); }
.ez-row-top { align-items: flex-start; }
.ez-row-icon { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; background: var(--ez-sky-50); border-radius: var(--r-md); color: var(--ez-sky); }
.ez-row-icon-round { border-radius: var(--r-pill); width: 36px; height: 36px; }
.ez-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.ez-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ez-row-title { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.ez-row-desc { font-size: 12.5px; color: var(--ink-500); line-height: 1.55; margin: 0; }
.ez-row-aside { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; flex-shrink: 0; text-align: right; }

/* Nhãn trạng thái */
.ez-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; white-space: nowrap; }
.ez-pill-on { background: var(--ok-bg); color: #166b3d; }
.ez-pill-warn { background: var(--warn-bg); color: #8a5807; }
.ez-pill-danger { background: var(--danger-bg); color: var(--danger); }
.ez-pill-muted { background: var(--paper); color: var(--ink-500); }

/* Nút */
.ez-btn { max-width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; border-radius: var(--r-md); cursor: pointer; white-space: nowrap; text-decoration: none; transition: all .18s cubic-bezier(.2,.7,.3,1); }
.ez-btn:hover { text-decoration: none; }
.ez-btn-lg { height: 40px; padding: 0 20px; font-size: 14px; font-weight: 600; }
.ez-btn-sm { height: 34px; padding: 0 16px; font-size: 13px; }
.ez-btn-primary { background: var(--ez-sky); color: #fff !important; border: 1px solid var(--ez-sky); box-shadow: var(--sh-sm); }
.ez-btn-primary:hover { background: var(--ez-sky-700); border-color: var(--ez-sky-700); color: #fff !important; }
.ez-btn-primary:disabled { opacity: .6; cursor: default; }
.ez-btn-plain { background: var(--surface); color: var(--ink-700) !important; border: 1px solid var(--line-300); }
.ez-btn-plain:hover { background: var(--ez-sky-50); border-color: var(--ez-sky); color: var(--ez-sky) !important; }
.ez-btn-ghost-danger { background: transparent; color: var(--danger) !important; border: 1px solid transparent; }
.ez-btn-ghost-danger:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger) !important; }
.ez-btn-danger { background: transparent; color: var(--danger) !important; border: 1px solid var(--danger); }
.ez-btn-danger:hover { background: var(--danger-bg); color: var(--danger) !important; }
/* Nút nguy hiểm nền đặc, dùng cho thao tác xác nhận cuối cùng */
.ez-btn-danger-solid { background: var(--danger); color: #fff !important; border: 1px solid var(--danger); box-shadow: var(--sh-sm); }
.ez-btn-danger-solid:hover { background: #b91c1c; border-color: #b91c1c; color: #fff !important; }
/* Nút chỉ có biểu tượng, dùng cho thao tác xóa trong danh sách */
.ez-btn-icon { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; padding: 0; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--ink-400); cursor: pointer; transition: all .18s cubic-bezier(.2,.7,.3,1); }
.ez-btn-icon:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

/* Trường nhập */
.ez-field { display: flex; flex-direction: column; gap: 6px; max-width: 440px; }
.ez-label { font-size: 13px; font-weight: 600; color: var(--ink-900); }
.ez-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ez-hint { font-size: 12px; color: var(--ink-500); }
.ez-error { font-size: 12px; color: var(--danger); }
.ez-input { width: 100%; padding: 9px 13px; font-family: var(--font-sans); font-size: 14px; color: var(--ink-900); background: var(--surface); border: 1px solid var(--line-300); border-radius: var(--r-md); outline: none; transition: all .18s cubic-bezier(.2,.7,.3,1); }
.ez-input::placeholder { color: var(--ink-400); }
.ez-input:focus { border-color: var(--ez-sky); box-shadow: 0 0 0 3px rgba(0, 135, 207, .18); }
/* Ô nhập có nút hiện/ẩn mật khẩu: viền nằm ở vỏ ngoài để hai nửa không bị hở */
.ez-input-wrap { display: flex; align-items: stretch; border: 1px solid var(--line-300); border-radius: var(--r-md); background: var(--surface); overflow: hidden; transition: all .18s cubic-bezier(.2,.7,.3,1); }
.ez-input-wrap:focus-within { border-color: var(--ez-sky); box-shadow: 0 0 0 3px rgba(0, 135, 207, .18); }
.ez-input-wrap.is-invalid { border-color: var(--danger); }
.ez-input-wrap .ez-input { border: none; border-radius: 0; box-shadow: none; background: transparent; }
.ez-input-wrap .ez-input:focus { box-shadow: none; }
.ez-input-eye { width: 40px; flex-shrink: 0; display: grid; place-items: center; background: transparent; border: none; color: var(--ink-400); cursor: pointer; transition: color .15s cubic-bezier(.2,.7,.3,1); }
.ez-input-eye:hover { color: var(--ez-sky); }

/* Nhóm nút lọc */
.ez-seg { display: inline-flex; align-items: center; border: 1px solid var(--line-300); border-radius: var(--r-md); overflow: hidden; height: 38px; background: var(--surface); }
.ez-seg button { height: 100%; padding: 0 14px; background: transparent; color: var(--ink-700); font-family: var(--font-sans); font-size: 13px; font-weight: 500; border: none; border-right: 1px solid var(--line-200); cursor: pointer; transition: all .18s cubic-bezier(.2,.7,.3,1); white-space: nowrap; }
.ez-seg button:last-child { border-right: none; }
.ez-seg button:hover { background: var(--ez-sky-50); color: var(--ez-sky); }
.ez-seg button.is-active { background: var(--ez-sky-50); color: var(--ez-sky); font-weight: 600; }

/* Tiêu đề nhóm trong danh sách */
.ez-group-head { padding: 10px 20px 8px; background: var(--paper); border-bottom: 1px solid var(--line-200); }
.ez-group-head span { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }

/* Trạng thái rỗng */
.ez-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 20px; text-align: center; }
.ez-empty-icon { width: 44px; height: 44px; display: grid; place-items: center; background: var(--ez-sky-50); border-radius: var(--r-pill); }
.ez-empty-title { font-size: 13.5px; font-weight: 600; color: var(--ink-900); }
.ez-empty-desc { font-size: 12.5px; color: var(--ink-500); max-width: 340px; line-height: 1.55; }

/* Chữ đơn cách, dùng cho giờ và địa chỉ IP */
/* Liên kết quay về trang chủ của partial Common/BackToHome */
.ez-page .back-home { font-size: 13px; font-weight: 500; color: var(--ez-sky) !important; text-decoration: none; }
.ez-page .back-home:hover { text-decoration: underline; }

.ez-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Hộp _ValidationSummary dùng chung của khung, vẽ lại cho khớp bộ này */
.ez-page .alert { padding: 11px 14px; border-radius: var(--r-md); font-size: 12.5px; line-height: 1.5; margin-bottom: 18px; }
.ez-page .alert-danger { background: var(--danger-bg); border: 1px solid #f3c9c7; color: var(--danger); }
.ez-page .alert-success { background: var(--ok-bg); border: 1px solid #bfe3cd; color: #166b3d; }
.ez-page .alert-warning { background: var(--warn-bg); border: 1px solid #f0dcb4; color: #8a5807; }
.ez-page .alert-info { background: var(--info-bg); border: 1px solid var(--ez-sky-300); color: var(--ez-royal); }
.ez-page .alert ul { margin: 0; padding-left: 18px; }

.ez-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line-200); font-size: 12.5px; color: var(--ink-400); }

@media (max-width: 575.98px) {
    .ez-row { flex-wrap: wrap; }
    .ez-row-aside { align-items: flex-start; text-align: left; width: 100%; padding-left: 50px; }
}

/* Lưới hai cột cho các thẻ biểu mẫu */
.ez-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; padding: 18px 22px; }
.ez-grid-2 .ez-field { max-width: none; }
.ez-grid-full { grid-column: 1 / -1; }
@media (max-width: 767.98px) {
    .ez-grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Ô hiển thị giá trị không sửa được */
.ez-readonly {
    display: flex; align-items: center; width: 100%;
    padding: 9px 13px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px;
    color: var(--ink-700); background: var(--paper);
    border: 1px solid var(--line-200); border-radius: var(--r-md);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ez-readonly:focus { outline: none; box-shadow: none; }

/* Ảnh đại diện tròn trên trang tài khoản */
.ez-avatar {
    width: 84px; height: 84px; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--ez-indigo-50); color: var(--ez-indigo);
    border-radius: var(--r-pill); border: 1px solid var(--line-200);
    object-fit: cover;
}

/* Liên kết trong vùng đã chuyển: theme đặt a{color:#114a9f!important} nên
   phải ghi đè có đánh dấu mới về đúng xanh ezCloud. */
.ez-page a:not(.ez-btn):not(.ez-btn-icon) { color: var(--ez-sky) !important; text-decoration: none; }
.ez-page a:not(.ez-btn):not(.ez-btn-icon):hover { color: var(--ez-sky-700) !important; text-decoration: underline; }

/* Không để khối nào giữ bề rộng tối thiểu lớn hơn màn hình */
.content-body { min-width: 0; }
.ez-card, .ez-row, .ez-grid-2, .ez-head { min-width: 0; }
.ez-field { min-width: 0; }
.ez-input, .ez-readonly, .pk-select { max-width: 100%; }

/* Màn hình hẹp: thu gọn khoảng đệm và cho tiêu đề xuống dòng */
@media (max-width: 575.98px) {
    .ez-page { max-width: 100%; }
    .ez-head { flex-direction: column; align-items: stretch; gap: 12px; }
    .ez-head h1 { font-size: 21px; }
    .ez-head-text { max-width: none; }
    .ez-card-head { padding: 14px 16px; }
    .ez-card-pad { padding: 18px 16px; gap: 16px; }
    .ez-row { padding: 14px 16px; }
    .ez-grid-2 { padding: 16px; }
    .ez-banner { padding: 12px 14px; flex-wrap: wrap; }
    .ez-note { padding: 12px 14px; }
    .ez-seg { width: 100%; }
    .ez-seg button { flex: 1; padding: 0 8px; }
    .ez-field { max-width: none; }

}

/* Nút trải hết chiều ngang cho dễ bấm trên máy cầm tay. Dùng mốc 768px chứ
   không phải 576px: điện thoại màn lớn báo bề rộng trên 576px nên mốc cũ
   không chạm tới, nút vẫn ôm sát chữ và nhìn như mất phần đệm.
   flex: 1 0 auto để nút không bị co hẹp hơn bề rộng chữ khi nằm chung hàng với
   phần tử khác - .ez-btn có white-space: nowrap nên co là chữ tràn ra ngoài. */
@media (max-width: 767.98px) {
    .ez-btn { width: 100%; flex: 1 0 auto; }
    .ez-btn-icon { width: 34px; flex: 0 0 auto; }
}

/* Bỏ hai hình trang trí của theme Vuexy trên các trang xác thực.
   .auth-inner:before là một ảnh 244x243 đặt ở top:-54px, left:-46px mà KHÔNG có
   z-index, nên nó vẽ đè lên trên thẻ đăng nhập và hiện ra thành một ô vuông mờ
   ngay cạnh logo. (Người anh em của nó, :after ở góc dưới phải, có z-index: -1
   nên nằm dưới thẻ và không ai thấy - chênh lệch này là thiếu sót của theme.)
   Cả hai vốn đã display:none dưới 576px, nên lỗi chỉ hiện trên màn rộng.
   Bộ thiết kế ezID có nền riêng (gradient + Frame.svg) nên không cần chúng. */
.auth-wrapper.auth-basic .auth-inner:before,
.auth-wrapper.auth-basic .auth-inner:after {
    /* Phải có !important: authentication.css của theme được nạp trong THÂN trang
       (_Layout dòng 537), còn file này nạp ở head (dòng 160). Hai luật cùng độ ưu
       tiên chọn lọc thì cái nạp sau thắng, nên nếu không có !important thì luật
       dưới đây không có tác dụng gì. */
    display: none !important;
}