/* =========================================================
   Trang chủ VNPT Đồng Tháp — giao diện mới
   ========================================================= */
:root {
    --blue: #0060af;
    --blue-2: #0089d0;
    --blue-dark: #00427a;
    --sky: #e8f3fc;
    --ink: #14213d;
    --muted: #5b6b82;
    --line: #e3e9f2;
    --bg: #f4f7fb;
    --card: #fff;
    --danger: #b42318;
    --r: 14px;
    --shadow: 0 10px 30px -12px rgba(16, 42, 84, .18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input { font-family: inherit; font-size: inherit; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---------- Header ---------- */
.nh-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.nh-bar { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.nh-brand { display: flex; align-items: center; gap: 12px; font-weight: 800; color: var(--blue); }
.nh-brand img { height: 40px; width: auto; }
.nh-brand small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.nh-nav { display: flex; align-items: center; gap: 26px; font-weight: 500; color: var(--muted); }
.nh-nav a:hover, .nh-nav a.on { color: var(--blue); }
.nh-nav .nh-pay { display: inline-flex; align-items: center; gap: 6px; }
.nh-nav .nh-pay img { width: 26px; height: auto; }
.nh-actions { display: flex; align-items: center; gap: 10px; }
.nh-hotline { display: flex; align-items: center; gap: 8px; background: var(--sky); color: var(--blue); padding: 8px 14px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.nh-menu-btn { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; color: var(--blue); cursor: pointer; }

/* ---------- Hero ---------- */
.nh-hero {
    background: radial-gradient(1200px 400px at 85% -10%, rgba(0, 137, 208, .35), transparent 60%),
                linear-gradient(135deg, var(--blue-dark), var(--blue) 55%, var(--blue-2));
    color: #fff; padding: 48px 0 120px;
}
.nh-hero h1 { font-size: 34px; line-height: 1.2; font-weight: 800; max-width: 620px; }
.nh-hero p { opacity: .88; margin-top: 10px; max-width: 560px; }
.nh-chips { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.nh-chip { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); padding: 6px 12px; border-radius: 999px; font-size: 13px; display: inline-flex; gap: 7px; align-items: center; }

/* ---------- Layout ---------- */
.nh-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; margin-top: -88px; position: relative; }
.nh-card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); border: 1px solid var(--line); }

/* ---------- Tabs ---------- */
.nh-tabs { display: flex; gap: 6px; background: var(--bg); padding: 5px; border-radius: 12px; width: max-content; max-width: 100%; margin-bottom: 22px; overflow-x: auto; }
.nh-tab { padding: 9px 16px; border-radius: 9px; font-weight: 600; color: var(--muted); font-size: 14px; display: flex; gap: 8px; align-items: center; border: 0; background: transparent; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.nh-tab:hover { color: var(--blue); }
.nh-tab.active { background: #fff; color: var(--blue); box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.nh-pane:not(.active) { display: none; } /* :not() tăng độ ưu tiên để thắng .nh-main { display:grid } */
.nh-pane.active { animation: nh-fade .25s ease; }
@keyframes nh-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Panel đăng nhập / tra cứu ---------- */
.nh-main { display: grid; grid-template-columns: 1.05fr 1fr; overflow: hidden; }
.nh-form-pane { padding: 32px; }
.nh-ttl { font-size: 22px; font-weight: 800; }
.nh-sub { color: var(--muted); font-size: 14px; margin: 4px 0 20px; }
.nh-form { display: flex; flex-direction: column; gap: 16px; }
.nh-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }

.nh-inp { position: relative; }
.nh-inp > i.lead { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.nh-inp input {
    width: 100%; height: 48px; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 14px 0 42px;
    background: #fff; color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
.nh-inp input::placeholder { color: #94a3b8; }
.nh-inp input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 96, 175, .12); }
.nh-inp input.input-validation-error { border-color: #e5484d; box-shadow: 0 0 0 4px rgba(229, 72, 77, .1); }
.nh-inp.has-eye input { padding-right: 48px; }
.nh-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: transparent; color: #94a3b8; cursor: pointer; border-radius: 8px; }
.nh-eye:hover { color: var(--blue); background: #f1f6fd; }
.field-validation-error, .nh-form .text-danger { color: var(--danger); font-size: 12px; margin-top: 5px; display: block; }
.validation-summary-errors ul { list-style: none; color: var(--danger); font-size: 13px; }

.nh-cap { display: flex; gap: 10px; align-items: center; }
.nh-cap .captcha-image { height: 48px; width: 130px; flex: none; object-fit: cover; border-radius: 10px; border: 1.5px solid var(--line); background: #eef3f9; }
.nh-cap .nh-inp { flex: 1; min-width: 0; }
.nh-refresh { width: 48px; height: 48px; flex: none; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; color: var(--blue); cursor: pointer; transition: border-color .2s, background .2s; }
.nh-refresh:hover { border-color: var(--blue); background: #f1f6fd; }
.nh-refresh.spin i { animation: nh-spin .6s linear; }
@keyframes nh-spin { to { transform: rotate(360deg); } }

.nh-alert { display: flex; gap: 10px; align-items: center; background: #fdecec; color: var(--danger); border: 1px solid #f8c9c6; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 500; }

.nh-btn {
    background: linear-gradient(135deg, var(--blue), var(--blue-2)); color: #fff; border: 0; height: 50px; padding: 0 28px;
    border-radius: 10px; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    box-shadow: 0 8px 18px -8px rgba(0, 96, 175, .7); cursor: pointer; transition: filter .2s, transform .1s;
}
.nh-btn:hover { filter: brightness(1.07); }
.nh-btn:active { transform: translateY(1px); }
.nh-btn.full { width: 100%; }
.nh-ghost { border: 1.5px solid var(--line); height: 44px; padding: 0 14px; border-radius: 10px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--blue); background: #fff; font-size: 14px; transition: border-color .2s, background .2s; }
.nh-ghost:hover { border-color: var(--blue); background: #f1f6fd; }
.nh-or { display: flex; align-items: center; gap: 12px; color: #94a3b8; font-size: 13px; }
.nh-or::before, .nh-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.nh-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nh-hint { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; }

/* Khối bên phải panel */
.nh-perk { background: linear-gradient(160deg, #f2f8fe, #e1eefa); padding: 32px; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.nh-perk h3 { font-size: 18px; margin-bottom: 6px; }
.nh-perk > p { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.nh-feat { display: flex; gap: 14px; padding: 11px 0; align-items: center; }
.nh-fi { flex: none; width: 42px; height: 42px; border-radius: 12px; background: #fff; color: var(--blue); display: grid; place-items: center; box-shadow: 0 4px 10px -4px rgba(0, 96, 175, .3); }
.nh-feat b { display: block; font-size: 14px; }
.nh-feat span { font-size: 13px; color: var(--muted); }
.nh-secure { margin-top: auto; padding-top: 18px; font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.nh-steps { list-style: none; }
.nh-steps li { display: flex; gap: 12px; padding: 9px 0; font-size: 14px; align-items: center; }
.nh-steps b { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--blue); display: grid; place-items: center; font-size: 13px; box-shadow: 0 4px 10px -4px rgba(0, 96, 175, .3); }

/* ---------- Cột phải ---------- */
.nh-side { display: flex; flex-direction: column; gap: 24px; }
.nh-box { padding: 22px; }
.nh-box h4 { font-size: 15px; margin-bottom: 14px; display: flex; gap: 8px; align-items: center; }
.nh-box h4 i { color: var(--blue); }
.nh-pay-card { background: linear-gradient(135deg, var(--blue-dark), var(--blue)); color: #fff; border: 0; }
.nh-pay-card h4 i { color: #fff; }
.nh-pay-card p { opacity: .85; font-size: 13px; margin-bottom: 14px; }
.nh-pay-card .nh-btn { background: #fff; color: var(--blue); box-shadow: none; width: 100%; }
.nh-svc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nh-svc a { border: 1px solid var(--line); border-radius: 12px; padding: 14px 8px; text-align: center; font-size: 13px; font-weight: 600; transition: border-color .2s, transform .2s, box-shadow .2s; }
.nh-svc a:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 6px 14px -8px rgba(0, 96, 175, .5); }
.nh-svc i { display: block; font-size: 20px; color: var(--blue); margin-bottom: 6px; }
.nh-help li { list-style: none; display: flex; gap: 12px; padding: 7px 0; font-size: 14px; align-items: center; }
.nh-help li i { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--sky); color: var(--blue); display: grid; place-items: center; font-size: 13px; }

/* ---------- Footer ---------- */
.nh-footer { margin-top: 48px; background: #0b2545; color: #b8c6db; font-size: 13px; padding: 24px 0; }
.nh-ft { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.nh-ft a:hover { color: #fff; }

.nh-top { position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--blue); color: #fff; box-shadow: var(--shadow); cursor: pointer; display: none; z-index: 40; }
.nh-top.show { display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .nh-grid { grid-template-columns: 1fr; }
    .nh-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 900px) {
    .nh-menu-btn { display: inline-grid; place-items: center; }
    .nh-nav { display: none; position: absolute; top: 68px; left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch; gap: 0; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
    .nh-nav.open { display: flex; }
    .nh-nav a { padding: 14px 20px; border-top: 1px solid var(--line); }
    .nh-hero { padding: 32px 0 110px; }
    .nh-hero h1 { font-size: 26px; }
    .nh-main { grid-template-columns: 1fr; }
    .nh-perk { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 576px) {
    .wrap { padding: 0 16px; }
    .nh-hotline span { display: none; }
    .nh-brand small { display: none; }
    .nh-form-pane, .nh-perk { padding: 22px; }
    .nh-alt { grid-template-columns: 1fr; }
    .nh-cap { flex-wrap: wrap; }
    .nh-cap .nh-inp { flex: 1 1 100%; }
    .nh-tabs { width: 100%; }
    .nh-tab { flex: 1; justify-content: center; }
}

/* ---------- Bổ sung theo mockup đăng nhập ---------- */
.nh-logo { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, var(--blue), var(--blue-2)); display: grid; place-items: center; color: #fff; font-size: 18px; flex: none; }
.nh-opts { display: flex; justify-content: space-between; align-items: center; font-size: 14px; gap: 10px; flex-wrap: wrap; }
.nh-form .nh-chk { display: flex; gap: 8px; align-items: center; color: var(--muted); font-weight: 500; font-size: 14px; margin: 0; cursor: pointer; }
.nh-chk input { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; }
.nh-link { color: var(--blue); font-weight: 600; }
.nh-link:hover { text-decoration: underline; }
.nh-num { list-style: none; }
.nh-num li { display: flex; gap: 12px; padding: 8px 0; font-size: 14px; align-items: center; }
.nh-num b { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--sky); color: var(--blue); display: grid; place-items: center; font-size: 13px; }
.nh-num a { color: var(--blue); font-weight: 600; }

/* ---------- Thông báo lỗi tra cứu ---------- */
#errorMsg { margin-top: 16px; }

/* ---------- Modal xem hóa đơn ---------- */
#invoiceContainer { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(6, 24, 44, .62); backdrop-filter: blur(5px); align-items: center; justify-content: center; padding: 20px; }
.invoice-modal-box { width: min(1180px, 100%); height: min(90vh, 860px); background: #fff; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45); animation: nh-modal .25s ease; }
@keyframes nh-modal { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.invoice-toolbar { min-height: 64px; padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: linear-gradient(180deg, #fff, #f7fbff); border-bottom: 1px solid var(--line); }
.toolbar-title { display: inline-flex; align-items: center; gap: 10px; color: var(--blue); font-weight: 800; font-size: 1.05rem; }
.toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn-tool { min-height: 40px; padding: 8px 14px; border: none; border-radius: 10px; cursor: pointer; color: #fff; font-size: .9rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: filter .2s, transform .1s; }
.btn-tool:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-print { background: #64748b; }
.btn-pdf { background: #dc2626; }
.btn-xml { background: #16a34a; }
.btn-close { background: #e2e8f0; color: #334155; min-width: 42px; justify-content: center; }
.invoice-viewer { flex: 1; background: #eef5fd; }
.invoice-viewer iframe { width: 100%; height: 100%; border: none; background: #fff; }
@media (max-width: 576px) {
    #invoiceContainer { padding: 0; }
    .invoice-modal-box { width: 100%; height: 100vh; border-radius: 0; }
    .invoice-toolbar { padding: 12px; flex-direction: column; align-items: flex-start; }
    .toolbar-actions { width: 100%; justify-content: space-between; }
    .btn-tool { flex: 1; justify-content: center; padding: 10px 8px; font-size: .82rem; }
    .btn-tool span { display: none; }
    .btn-close { flex: 0 0 auto; }
}

/* ---------- Logo VNPT ---------- */
.nh-logo-img { height: 48px; width: auto; flex: none; display: block; }

/* ---------- Nút phụ: "Tra cứu bằng mã" rộng hơn, không xuống dòng ---------- */
.nh-alt { grid-template-columns: 1.35fr 1fr; }
.nh-ghost { white-space: nowrap; }
.nh-ghost:focus { outline: none; }
.nh-ghost:focus-visible, .nh-btn:focus-visible, .nh-tab:focus-visible { outline: 3px solid rgba(0, 96, 175, .35); outline-offset: 2px; }

/* ---------- Banner động ---------- */
.nh-banner { background: #fff; }
.nh-banner .invoice-banner { max-width: 1200px; margin: 0 auto; padding: 14px 20px; }
.nh-banner .banner-slider { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); background: var(--sky); }
.nh-banner .banner-slider > div:not(:first-child) { display: none; } /* trước khi slick khởi tạo: chỉ hiện ảnh đầu */
.nh-banner .banner-slider.slick-initialized > div { display: block; }
.nh-banner .banner-slider img { width: 100%; height: 300px; object-fit: cover; display: block; }
.nh-banner .slick-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex !important; justify-content: center; gap: 8px; list-style: none; z-index: 3; }
.nh-banner .slick-dots li button { font-size: 0; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .6); cursor: pointer; transition: width .3s, background .3s; }
.nh-banner .slick-dots li.slick-active button { width: 28px; background: #fff; }
@media (max-width: 1024px) { .nh-banner .banner-slider img { height: 240px; } }
@media (max-width: 576px) {
    .nh-banner .invoice-banner { padding: 10px 16px; }
    .nh-banner .banner-slider img { height: 150px; }
    .nh-alt { grid-template-columns: 1fr; }
    .nh-logo-img { height: 40px; }
}

/* ---------- Bỏ hero: khung chính nằm ngay dưới banner ---------- */
.nh-grid { margin-top: 24px; }
.nh-banner { border-bottom: 1px solid var(--line); }
@media (max-width: 576px) { .nh-grid { margin-top: 16px; } }

/* =========================================================
   LIỀN MẠCH: một nền chung, cùng mép, khoảng cách đều 24px
   ========================================================= */
body { background: linear-gradient(180deg, #e6f0fb 0, #eef4fb 360px, var(--bg) 720px) no-repeat, var(--bg); }

/* Header: bỏ viền cứng, chỉ đổ bóng khi cuộn */
.nh-header { border-bottom: 0; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(160%) blur(10px); transition: box-shadow .25s; }
.nh-header.scrolled { box-shadow: 0 6px 20px -12px rgba(16, 42, 84, .35); }

/* Banner: không còn dải trắng riêng, nằm chung nền và thẳng mép với nội dung */
.nh-banner { background: transparent; border-bottom: 0; }
.nh-banner .invoice-banner { padding: 24px 20px 0; }
.nh-banner .banner-slider { border: 1px solid var(--line); }

/* Khoảng cách đều */
.nh-grid { margin-top: 24px; }
.nh-side { gap: 24px; }

/* Thẻ: cùng viền, cùng bóng, hiệu ứng nhẹ khi rê chuột ở cột phải */
.nh-card { border-color: #e1e9f3; }
.nh-side .nh-card { transition: transform .2s, box-shadow .2s; }
.nh-side .nh-card:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -16px rgba(16, 42, 84, .28); }

/* Footer cùng tông xanh, nối tiếp nội dung */
.nh-footer { margin-top: 40px; padding: 0; background: linear-gradient(135deg, var(--blue-dark), #00335f); color: #c9d7ea; font-size: 14px; }
.nh-ft-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; padding: 36px 20px 28px; }
.nh-ft-brand { display: flex; gap: 16px; align-items: flex-start; }
.nh-ft-brand img { height: 56px; width: auto; background: #fff; border-radius: 12px; padding: 6px 8px; flex: none; }
.nh-ft-brand b { color: #fff; font-size: 16px; display: block; margin-bottom: 4px; }
.nh-ft-brand p { font-size: 13px; opacity: .85; max-width: 340px; }
.nh-footer h5 { color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.nh-ft-grid > div > a { display: flex; gap: 8px; align-items: center; padding: 4px 0; opacity: .9; transition: opacity .2s, color .2s; }
.nh-ft-grid > div > a:hover { opacity: 1; color: #fff; }
.nh-ft-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: 14px 20px; font-size: 12px; opacity: .75; }

@media (max-width: 900px) { .nh-ft-grid { grid-template-columns: 1fr 1fr; } .nh-ft-brand { grid-column: 1 / -1; } }
@media (max-width: 576px) {
    .nh-banner .invoice-banner { padding: 16px 16px 0; }
    .nh-grid { margin-top: 16px; }
    .nh-side { gap: 16px; }
    .nh-ft-grid { grid-template-columns: 1fr; gap: 20px; padding: 28px 16px 20px; }
    .nh-ft-bottom { padding: 12px 16px; }
}

/* =========================================================
   CÂN ĐỐI: 2 cột cao bằng nhau, góc bo gọn, captcha đủ rộng
   ========================================================= */
/* Góc bo không bị nền con tràn ra */
.nh-card { overflow: hidden; }

/* Khung chính kéo dài bằng cột phải */
@media (min-width: 1025px) {
    .nh-grid { align-items: stretch; }
    .nh-grid > div:first-child { display: flex; flex-direction: column; }
    .nh-grid > div:first-child > .nh-card { flex: 1; display: flex; flex-direction: column; }
    .nh-grid > div:first-child .nh-pane.active { flex: 1; }
}

/* Cột form rộng hơn một chút; nội dung căn giữa theo chiều dọc */
.nh-main { grid-template-columns: 1.2fr 1fr; }
.nh-form-pane { display: flex; flex-direction: column; justify-content: center; }

/* Captcha: ảnh gọn lại, ô nhập đủ chỗ */
.nh-cap .captcha-image { width: 120px; }

/* Khối tiện ích: dàn đều theo chiều cao, không để trống một mảng */
.nh-perk { justify-content: center; gap: 4px; }
.nh-perk .nh-secure { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #c9dbef; }
.nh-feat { padding: 12px 0; }

@media (max-width: 900px) { .nh-main { grid-template-columns: 1fr; } }

/* =========================================================
   ANIMATION
   (fill-mode: backwards để sau khi chạy xong, hiệu ứng hover vẫn hoạt động)
   ========================================================= */
@keyframes nh-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes nh-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes nh-left { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes nh-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes nh-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes nh-shine { from { left: -60%; } to { left: 130%; } }
@keyframes nh-grad { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes nh-ring { 0% { box-shadow: 0 0 0 0 rgba(0, 96, 175, .35); } 100% { box-shadow: 0 0 0 10px rgba(0, 96, 175, 0); } }

/* --- Vào trang: hiện lần lượt --- */
.nh-header { animation: nh-in .5s ease backwards; }
.nh-banner .banner-slider { animation: nh-up .7s cubic-bezier(.2, .7, .2, 1) .05s backwards; }
.nh-grid > div:first-child > .nh-card { animation: nh-up .7s cubic-bezier(.2, .7, .2, 1) .15s backwards; }
.nh-side > .nh-card { animation: nh-up .6s cubic-bezier(.2, .7, .2, 1) backwards; }
.nh-side > .nh-card:nth-child(1) { animation-delay: .25s; }
.nh-side > .nh-card:nth-child(2) { animation-delay: .35s; }
.nh-side > .nh-card:nth-child(3) { animation-delay: .45s; }

/* Các mục tiện ích / hướng dẫn trượt vào lần lượt (chạy lại mỗi lần đổi tab) */
.nh-pane.active .nh-feat, .nh-pane.active .nh-steps li { animation: nh-left .5s ease backwards; }
.nh-pane.active .nh-feat:nth-of-type(1), .nh-pane.active .nh-steps li:nth-child(1) { animation-delay: .30s; }
.nh-pane.active .nh-feat:nth-of-type(2), .nh-pane.active .nh-steps li:nth-child(2) { animation-delay: .40s; }
.nh-pane.active .nh-feat:nth-of-type(3), .nh-pane.active .nh-steps li:nth-child(3) { animation-delay: .50s; }
.nh-pane.active .nh-feat:nth-of-type(4) { animation-delay: .60s; }

/* Ô dịch vụ bật lên lần lượt */
.nh-svc a { animation: nh-pop .45s ease backwards; }
.nh-svc a:nth-child(1) { animation-delay: .55s; }
.nh-svc a:nth-child(2) { animation-delay: .60s; }
.nh-svc a:nth-child(3) { animation-delay: .65s; }
.nh-svc a:nth-child(4) { animation-delay: .70s; }
.nh-svc a:nth-child(5) { animation-delay: .75s; }
.nh-svc a:nth-child(6) { animation-delay: .80s; }
.nh-svc a i { transition: transform .25s; }
.nh-svc a:hover i { transform: scale(1.18) translateY(-2px); }

/* --- Tương tác --- */
/* Nút chính: vệt sáng lướt qua khi rê chuột */
.nh-btn { position: relative; overflow: hidden; }
.nh-btn::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); pointer-events: none; }
.nh-btn:hover::after { animation: nh-shine .8s ease; }
.nh-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgba(0, 96, 175, .8); }
.nh-btn i { transition: transform .25s; }
.nh-btn:hover i { transform: translateX(3px); }

/* Ô nhập: icon đổi màu khi đang gõ */
.nh-inp > i.lead { transition: color .2s; }
.nh-inp:focus-within > i.lead { color: var(--blue); }

/* Tab: hiệu ứng mượt */
.nh-tab { transition: background .25s, color .25s, box-shadow .25s; }

/* Thông báo lỗi: rung nhẹ khi xuất hiện */
.nh-alert { animation: nh-shake .45s ease; }

/* Thẻ "Thanh toán nhanh": nền chuyển màu chậm */
.nh-pay-card { background: linear-gradient(120deg, var(--blue-dark), var(--blue), #0074c4, var(--blue-dark)); background-size: 300% 300%; animation: nh-up .6s cubic-bezier(.2, .7, .2, 1) .25s backwards, nh-grad 12s ease infinite; }

/* Số thứ tự hướng dẫn: nhịp sáng khi rê chuột */
.nh-num li:hover b, .nh-steps li:hover b { animation: nh-ring 1s ease-out; }

/* Icon tiện ích nhấc nhẹ khi rê chuột */
.nh-fi { transition: transform .25s, box-shadow .25s; }
.nh-feat:hover .nh-fi { transform: translateY(-3px); box-shadow: 0 10px 18px -8px rgba(0, 96, 175, .5); }

/* Logo */
.nh-logo-img { transition: transform .3s; }
.nh-brand:hover .nh-logo-img { transform: scale(1.06) rotate(-3deg); }

/* Nút về đầu trang */
.nh-top { transition: transform .25s, opacity .25s; }
.nh-top:hover { transform: translateY(-3px); }

.nh-btn:active { transform: translateY(1px); }

/* --- Footer: hiện dần khi cuộn tới (JS thêm class .in) --- */
.nh-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.nh-reveal.in { opacity: 1; transform: none; }

/* --- Tôn trọng thiết lập giảm chuyển động --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .nh-reveal { opacity: 1; transform: none; }
}

/* ---------- "Chưa có tài khoản?" nằm trong khối Hướng dẫn tra cứu ---------- */
.nh-noacc { margin-top: 18px; background: rgba(255, 255, 255, .75); border: 1px solid #d6e5f5; border-radius: 12px; padding: 16px 18px; animation: nh-up .5s ease .65s backwards; scroll-margin-top: 90px; }
.nh-noacc h4 { font-size: 15px; margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.nh-noacc h4 i { color: var(--blue); }
.nh-noacc .nh-num li { padding: 6px 0; }
.nh-noacc .nh-num b { background: var(--blue); color: #fff; }

/* Cột phải còn 2 thẻ: thẻ Dịch vụ giãn ra cho bằng chiều cao khung chính */
@media (min-width: 1025px) {
    .nh-side > #dich-vu { flex: 1; display: flex; flex-direction: column; }
    .nh-side > #dich-vu .nh-svc { flex: 1; grid-auto-rows: 1fr; }
    .nh-side > #dich-vu .nh-svc a { display: flex; flex-direction: column; align-items: center; justify-content: center; }
}

/* =========================================================
   CÂN ĐỐI LẦN 2: khối phải gọn lại, không còn khoảng trống
   ========================================================= */
/* Khối Tiện ích / Hướng dẫn: nội dung xếp từ trên, khoảng cách đều, không đẩy giãn */
.nh-perk { justify-content: flex-start; gap: 0; padding: 28px 28px 22px; }
.nh-perk h3 { margin-bottom: 2px; }
.nh-perk > p { margin-bottom: 8px; }
.nh-feat { padding: 8px 0; }
.nh-fi { width: 38px; height: 38px; border-radius: 10px; }
.nh-noacc { margin-top: 14px; padding: 14px 16px; }
.nh-noacc .nh-num li { padding: 4px 0; }
.nh-perk .nh-secure { margin-top: auto; padding-top: 14px; }
.nh-perk .nh-noacc + .nh-secure { margin-top: 14px; }

/* Cột form: xếp từ trên như cột bên cạnh để mép trên thẳng hàng */
.nh-form-pane { justify-content: flex-start; padding: 28px 32px; }
.nh-form { gap: 14px; }

/* Ô dịch vụ giãn vừa phải, icon to hơn để ô cao không bị trống */
@media (min-width: 1025px) {
    .nh-side > #dich-vu .nh-svc a { gap: 6px; }
    .nh-side > #dich-vu .nh-svc i { font-size: 24px; margin-bottom: 2px; }
}