/* =============================================================================
   Landing page9 — "Neo-Brutalism Pop"
   Viền mực dày, bóng đổ cứng, màu phẳng, sticker nghiêng, chuyển động nảy.
   Mọi class dùng tiền tố nb-, token màu đặt trên body.nb.
   ============================================================================= */

/* ---------- Token + nền tảng ---------- */
body.nb {
    --nb-bg: #fff7e6;
    --nb-ink: #111111;
    --nb-yellow: #ffd23f;
    --nb-pink: #ff6b9d;
    --nb-blue: #3a86ff;
    --nb-green: #06d6a0;
    --nb-purple: #8b5cf6;
    --nb-orange: #fb5607;
    --nb-white: #ffffff;
    --nb-muted: #3f3b35;
    --nb-soft: #6b665d;
    --nb-cream-ink: rgba(255, 247, 230, .78);

    --nb-bw: 3px;
    --nb-r: 18px;
    --nb-r-sm: 12px;
    --nb-sh-sm: 3px 3px 0 var(--nb-ink);
    --nb-sh: 6px 6px 0 var(--nb-ink);
    --nb-sh-lg: 10px 10px 0 var(--nb-ink);

    --nb-display: "Unbounded", "Lexend", system-ui, sans-serif;
    --nb-font: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --nb-pop: cubic-bezier(.34, 1.56, .64, 1);
    --nb-dots: radial-gradient(rgba(17, 17, 17, .17) 1.3px, transparent 1.7px);
    --nb-header-h: 74px;
    --nb-gutter: clamp(16px, 4vw, 32px);

    margin: 0;
    background: var(--nb-bg);
    color: var(--nb-ink);
    font-family: var(--nb-font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body.nb *,
body.nb *::before,
body.nb *::after { box-sizing: border-box; }

body.nb ::selection { background: var(--nb-yellow); color: var(--nb-ink); }

.nb-wrap {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--nb-gutter);
}

.nb-ic {
    display: inline-block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

.nb-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Màu phẳng: chỉ khai biến, thành phần tự dùng var(--tone) / var(--on-tone) */
.nb-tone--yellow { --tone: var(--nb-yellow); --on-tone: var(--nb-ink); }
.nb-tone--pink { --tone: var(--nb-pink); --on-tone: var(--nb-ink); }
.nb-tone--blue { --tone: var(--nb-blue); --on-tone: var(--nb-white); }
.nb-tone--green { --tone: var(--nb-green); --on-tone: var(--nb-ink); }
.nb-tone--purple { --tone: var(--nb-purple); --on-tone: var(--nb-white); }
.nb-tone--orange { --tone: var(--nb-orange); --on-tone: var(--nb-white); }
.nb-tone--white { --tone: var(--nb-white); --on-tone: var(--nb-ink); }
.nb-tone--ink { --tone: var(--nb-ink); --on-tone: var(--nb-white); }

/* Icon TikTok trên nền mực: hiệu ứng lệch màu */
.nb-tone--ink > .nb-ic {
    filter: drop-shadow(1.5px 1px 0 var(--nb-pink)) drop-shadow(-1.5px -1px 0 var(--nb-green));
}

/* ---------- Nút "ấn lún" ---------- */
.nb-btn {
    --btn-bg: var(--nb-white);
    --btn-fg: var(--nb-ink);
    --btn-sh: var(--nb-ink);
    --btn-off: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    padding: .9em 1.35em;
    font-family: var(--nb-display);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.25;
    letter-spacing: -.005em;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: var(--nb-r-sm);
    box-shadow: var(--btn-off) var(--btn-off) 0 var(--btn-sh);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease, background-color .2s ease;
}
.nb-btn:hover,
.nb-btn:focus { color: var(--btn-fg); text-decoration: none; }
.nb-btn:hover {
    transform: translate(calc(var(--btn-off) - 2px), calc(var(--btn-off) - 2px));
    box-shadow: 2px 2px 0 var(--btn-sh);
}
.nb-btn:active {
    transform: translate(var(--btn-off), var(--btn-off));
    box-shadow: 0 0 0 var(--btn-sh);
}
.nb-btn:focus-visible { outline: 3px dashed var(--nb-ink); outline-offset: 4px; }
.nb-btn .nb-ic { width: 1.15em; height: 1.15em; transition: transform .25s var(--nb-pop); }
.nb-btn:hover .nb-ic { transform: translateX(3px); }

.nb-btn--pink { --btn-bg: var(--nb-pink); }
.nb-btn--yellow { --btn-bg: var(--nb-yellow); }
.nb-btn--white { --btn-bg: var(--nb-white); }
.nb-btn--ink { --btn-bg: var(--nb-ink); --btn-fg: var(--nb-yellow); --btn-sh: var(--nb-pink); }
.nb-btn--sm { --btn-off: 3px; font-size: 13.5px; padding: .68em 1.05em; }
.nb-btn--sm:hover { box-shadow: 1px 1px 0 var(--btn-sh); transform: translate(2px, 2px); }
.nb-btn--lg { font-size: clamp(15px, 1.15vw, 17px); padding: 1em 1.5em; }

/* ---------- Tiêu đề section ---------- */
.nb-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
    padding: 7px 13px;
    font-family: var(--nb-display);
    font-weight: 700;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nb-yellow);
    background: var(--nb-ink);
    border-radius: 9px;
    rotate: -2deg;
}
.nb-kicker .nb-ic { width: 14px; height: 14px; }

.nb-h2 {
    margin: 0;
    text-wrap: balance;
    font-family: var(--nb-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 1rem + 2.7vw, 3.05rem);
    line-height: 1.17;
    letter-spacing: -.025em;
}

/* Khối "bút dạ" sau chữ nhấn */
.nb-hl {
    position: relative;
    z-index: 0;
    display: inline-block;
    padding: 0 .16em;
    white-space: nowrap;
}
.nb-hl::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: .2em 0 .02em;
    background: var(--tone, var(--nb-yellow));
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: .14em;
    box-shadow: 4px 4px 0 var(--nb-ink);
    transform: skew(-7deg) rotate(-1.4deg);
}
.nb-hl.nb-tone--yellow::before,
.nb-hl.nb-tone--blue::before { transform: skew(-7deg) rotate(1.2deg); }

.nb-section {
    position: relative;
    padding: clamp(68px, 9vw, 120px) 0;
    scroll-margin-top: calc(var(--nb-header-h) + 14px);
}

.nb-head { margin-bottom: clamp(36px, 5vw, 60px); }
.nb-head--split {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 20px 56px;
    align-items: end;
}
.nb-head--center { max-width: 760px; margin-inline: auto; text-align: center; }
.nb-head__lead {
    margin: 0;
    text-wrap: pretty;
    max-width: 34em;
    font-size: clamp(16px, 1.2vw, 18px);
    color: var(--nb-muted);
}
.nb-head--center .nb-head__lead { margin: 20px auto 0; }

/* Nền chấm bi: lớp giả nằm dưới nội dung nhờ isolation + z-index âm */
.nb-hero,
.nb-steps,
.nb-auth { isolation: isolate; }
.nb-hero::before,
.nb-steps::before,
.nb-auth::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image: var(--nb-dots);
    background-size: 22px 22px;
    pointer-events: none;
}

/* =============================================================================
   HEADER
   ============================================================================= */
.nb-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--nb-white);
    border-bottom: var(--nb-bw) solid var(--nb-ink);
    transition: box-shadow .25s ease;
}
.nb-header.is-scrolled { box-shadow: 0 5px 0 var(--nb-yellow); }

.nb-header__in {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: var(--nb-header-h);
}

.nb-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    max-width: 100%;
    padding: 5px 14px 5px 5px;
    font-family: var(--nb-display);
    font-weight: 800;
    font-size: 15px;
    line-height: 1.2;
    color: var(--nb-ink);
    background: var(--nb-yellow);
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: 12px;
    box-shadow: var(--nb-sh-sm);
    text-decoration: none;
    rotate: -2deg;
    transition: rotate .3s var(--nb-pop);
}
.nb-brand:hover,
.nb-brand:focus { color: var(--nb-ink); text-decoration: none; rotate: 0deg; }
.nb-brand:focus-visible { outline: 3px dashed var(--nb-ink); outline-offset: 4px; }
.nb-brand__star {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    background: var(--nb-pink);
    border: 2.5px solid var(--nb-ink);
    border-radius: 50%;
}
.nb-brand__star .nb-ic { width: 15px; height: 15px; animation: nb-spin 9s linear infinite; }
.nb-brand__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nb-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nb-nav__list {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nb-nav__link {
    display: inline-block;
    padding: 7px 14px;
    font-weight: 600;
    font-size: 15px;
    color: var(--nb-ink);
    text-decoration: none;
    border: 2.5px solid transparent;
    border-radius: 10px;
    transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.nb-nav__link:hover,
.nb-nav__link:focus-visible {
    color: var(--nb-ink);
    text-decoration: none;
    background: var(--nb-yellow);
    border-color: var(--nb-ink);
    box-shadow: var(--nb-sh-sm);
    transform: translate(-1px, -1px);
    outline: none;
}
.nb-nav__cta { display: flex; gap: 12px; }

.nb-burger,
.nb-header__quick { display: none; }

.nb-burger {
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    color: var(--nb-ink);
    background: var(--nb-white);
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: 12px;
    box-shadow: var(--nb-sh-sm);
    cursor: pointer;
    transition: transform .14s, box-shadow .14s, background-color .2s;
}
.nb-burger:active { transform: translate(3px, 3px); box-shadow: none; }
.nb-burger:focus-visible { outline: 3px dashed var(--nb-ink); outline-offset: 3px; }
.nb-burger .nb-ic { width: 24px; height: 24px; }
.nb-burger__close { display: none !important; }
.nb-header.is-open .nb-burger { background: var(--nb-yellow); }
.nb-header.is-open .nb-burger__open { display: none !important; }
.nb-header.is-open .nb-burger__close { display: inline-block !important; }

/* =============================================================================
   HERO
   ============================================================================= */
.nb-hero {
    position: relative;
    overflow: hidden;
    overflow: clip;
    padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 5vw, 64px);
}
.nb-hero::before {
    -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}

.nb-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: clamp(32px, 4vw, 56px);
    align-items: center;
}

.nb-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}
.nb-sticker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px 6px 11px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    background: var(--tone, var(--nb-white));
    border: 2.5px solid var(--nb-ink);
    border-radius: 999px;
    box-shadow: var(--nb-sh-sm);
    rotate: var(--r, 0deg);
}
.nb-sticker .nb-ic { width: 16px; height: 16px; }

.nb-hero__title {
    margin: 0 0 24px;
    font-family: var(--nb-display);
    font-weight: 800;
    font-size: clamp(2.3rem, .9rem + 4.1vw, 4.25rem);
    line-height: 1.17;
    letter-spacing: -.035em;
}
.nb-hero__domain {
    display: table;
    margin-bottom: 20px;
    padding: 6px 12px;
    font-size: clamp(12px, .95vw, 14px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nb-yellow);
    background: var(--nb-ink);
    border-radius: 8px;
    box-shadow: 3px 3px 0 var(--nb-pink);
    rotate: -1.5deg;
}
.nb-hero__line { display: block; }
.nb-hero__title .nb-hl { margin-top: .06em; }
.nb-hero__title .nb-hl::before { border-width: 4px; box-shadow: 6px 6px 0 var(--nb-ink); }

.nb-hero__lead {
    max-width: 34em;
    margin: 0 0 32px;
    font-size: clamp(16px, 1.2vw, 18px);
    color: var(--nb-muted);
}

.nb-hero__cta { display: flex; flex-wrap: wrap; gap: 16px 18px; margin-bottom: 34px; }

.nb-hero__plats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.nb-hero__plats-label { font-weight: 600; font-size: 14px; color: var(--nb-soft); }
.nb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nb-chip {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--on-tone, var(--nb-ink));
    background: var(--tone, var(--nb-white));
    border: 2.5px solid var(--nb-ink);
    border-radius: 11px;
    box-shadow: 2px 2px 0 var(--nb-ink);
    transition: transform .25s var(--nb-pop), box-shadow .2s;
}
.nb-chip:hover { transform: translate(-2px, -2px) rotate(-8deg); box-shadow: 4px 4px 0 var(--nb-ink); }
.nb-chip .nb-ic { width: 20px; height: 20px; }
.nb-chip--more {
    font-family: var(--nb-display);
    font-weight: 800;
    font-size: 13px;
    background: var(--nb-white);
}

/* ---------- Ảnh ghép thẻ mạng xã hội ---------- */
.nb-hero__art { position: relative; min-width: 0; }
.nb-collage {
    position: relative;
    width: 100%;
    max-width: 540px;
    aspect-ratio: 1 / 1.04;
    margin-inline: auto;
}
.nb-hero__note {
    margin: 10px 0 0;
    font-size: 12px;
    text-align: right;
    color: var(--nb-soft);
}

.nb-card {
    position: absolute;
    background: var(--nb-white);
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: var(--nb-r);
    box-shadow: var(--nb-sh);
    rotate: var(--r, 0deg);
    animation:
        nb-in .8s var(--nb-pop) var(--in, 0s) both,
        nb-bob 6.5s ease-in-out var(--d, 0s) infinite;
}

.nb-card--post { left: 0; top: 8%; width: 55%; z-index: 2; }
.nb-card--profile { right: 0; top: 0; width: 49%; z-index: 3; padding: 16px; background: var(--nb-yellow); }
.nb-card--video {
    right: 3%;
    bottom: 2%;
    width: 36%;
    aspect-ratio: 9 / 13;
    z-index: 2;
    overflow: hidden;
    background-color: var(--nb-purple);
    background-image: radial-gradient(rgba(255, 255, 255, .28) 1.3px, transparent 1.7px);
    background-size: 16px 16px;
}
.nb-card--chart { left: 5%; bottom: 0; width: 49%; z-index: 4; padding: 14px 16px 16px; background: var(--nb-green); }

.nb-ava {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    color: var(--nb-ink);
    background: var(--tone, var(--nb-white));
    border: 2.5px solid var(--nb-ink);
    border-radius: 50%;
}
.nb-ava svg { width: 80%; height: 80%; fill: currentColor; }
.nb-ava--lg { width: 52px; height: 52px; }

.nb-post__head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
.nb-post__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.nb-post__who b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-post__who small { font-size: 12px; color: var(--nb-soft); white-space: nowrap; }
.nb-post__more { margin-left: auto; font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.nb-post__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--nb-blue);
    border-block: var(--nb-bw) solid var(--nb-ink);
}
.nb-post__media svg { display: block; width: 100%; height: 100%; }
.nb-post__foot { display: flex; align-items: center; gap: 14px; padding: 10px 14px; }
.nb-react { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 14px; }
.nb-react .nb-ic { width: 18px; height: 18px; }
.nb-react--like .nb-ic { color: var(--nb-pink); animation: nb-beat 2.4s ease-in-out 1.2s infinite; }

.nb-bubble {
    position: absolute;
    bottom: 48px;
    left: -20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-family: var(--nb-display);
    font-weight: 800;
    font-size: 13px;
    line-height: 1.3;
    background: var(--nb-pink);
    border: 2.5px solid var(--nb-ink);
    border-radius: 999px;
    box-shadow: var(--nb-sh-sm);
    rotate: -8deg;
    animation: nb-pulse 2.4s ease-in-out infinite;
}
.nb-bubble .nb-ic { width: 14px; height: 14px; color: var(--nb-white); }

.nb-profile__top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.nb-profile__name { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.nb-profile__name b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-profile__name small { font-size: 12px; font-weight: 500; }
.nb-profile__stats {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px 12px;
    background: var(--nb-white);
    border: 2.5px solid var(--nb-ink);
    border-radius: 12px;
}
.nb-profile__num { display: flex; flex-direction: column; line-height: 1.2; }
.nb-profile__num b { font-family: var(--nb-display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.nb-profile__num small { font-size: 12px; font-weight: 600; color: var(--nb-soft); white-space: nowrap; }
.nb-up {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px 2px 5px;
    font-weight: 700;
    font-size: 12px;
    background: var(--nb-green);
    border: 2px solid var(--nb-ink);
    border-radius: 999px;
    white-space: nowrap;
}
.nb-up .nb-ic { width: 13px; height: 13px; }
.nb-follow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px;
    font-weight: 700;
    font-size: 14px;
    background: var(--nb-blue);
    border: 2.5px solid var(--nb-ink);
    border-radius: 11px;
    box-shadow: var(--nb-sh-sm);
}
.nb-follow .nb-ic { width: 16px; height: 16px; }

/* Nút trong hình minh hoạ bấm được (mở form đăng nhập) nên phản hồi như nút thật */
.nb-follow { transition: translate .15s ease, box-shadow .15s ease; }
.nb-follow:hover { translate: 2px 2px; box-shadow: 1px 1px 0 var(--nb-ink); }
.nb-react,
.nb-post__more { transition: color .15s ease; }
.nb-react:hover,
.nb-post__more:hover { color: var(--nb-pink); }
.nb-video__play { transition: scale .2s var(--nb-pop); }
.nb-video__play:hover { scale: 1.1; }
.nb-seal--cta { transition: scale .2s var(--nb-pop); }
.nb-seal--cta:hover { scale: 1.08; }

.nb-video__app {
    position: absolute;
    top: 10px;
    left: 10px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--nb-white);
    background: var(--nb-ink);
    border-radius: 10px;
}
.nb-video__app .nb-ic {
    width: 18px;
    height: 18px;
    filter: drop-shadow(1.5px 1px 0 var(--nb-pink)) drop-shadow(-1.5px -1px 0 var(--nb-green));
}
.nb-video__play {
    position: absolute;
    top: 44%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    translate: -50% -50%;
    background: var(--nb-yellow);
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: 50%;
    box-shadow: 4px 4px 0 var(--nb-ink);
}
.nb-video__play::after {
    content: "";
    position: absolute;
    inset: -10px;
    border: 3px solid var(--nb-white);
    border-radius: 50%;
    animation: nb-ring 2.2s ease-out infinite;
}
.nb-video__play .nb-ic { width: 28px; height: 28px; margin-left: 4px; }
.nb-video__views {
    position: absolute;
    left: 9px;
    right: 9px;
    bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 6px;
    font-weight: 700;
    font-size: 12.5px;
    white-space: nowrap;
    background: var(--nb-white);
    border: 2.5px solid var(--nb-ink);
    border-radius: 999px;
}
.nb-video__views .nb-ic { width: 15px; height: 15px; }
.nb-video__bar {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 9px;
    height: 7px;
    overflow: hidden;
    background: rgba(17, 17, 17, .35);
    border-radius: 99px;
}
.nb-video__bar i {
    display: block;
    width: 60%;
    height: 100%;
    background: var(--nb-yellow);
    border-radius: inherit;
    animation: nb-progress 7s linear infinite;
}

.nb-chart__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin-bottom: 12px; }
.nb-chart__head b { font-family: var(--nb-display); font-weight: 800; font-size: 15px; white-space: nowrap; }
.nb-chart__delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    font-weight: 800;
    font-size: 13px;
    background: var(--nb-white);
    border: 2.5px solid var(--nb-ink);
    border-radius: 999px;
}
.nb-chart__delta .nb-ic { width: 15px; height: 15px; }
.nb-chart__bars {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 88px;
    padding: 0 3px;
    border-bottom: var(--nb-bw) solid var(--nb-ink);
}
.nb-chart__bars i {
    flex: 1;
    height: var(--h);
    background: var(--nb-white);
    border: 2.5px solid var(--nb-ink);
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    transform-origin: 50% 100%;
    animation: nb-grow .9s var(--nb-pop) both;
}
.nb-chart__bars i:last-child { background: var(--nb-pink); }
.nb-chart__bars i:nth-child(1) { animation-delay: .9s; }
.nb-chart__bars i:nth-child(2) { animation-delay: .97s; }
.nb-chart__bars i:nth-child(3) { animation-delay: 1.04s; }
.nb-chart__bars i:nth-child(4) { animation-delay: 1.11s; }
.nb-chart__bars i:nth-child(5) { animation-delay: 1.18s; }
.nb-chart__bars i:nth-child(6) { animation-delay: 1.25s; }
.nb-chart__bars i:nth-child(7) { animation-delay: 1.32s; }

/* Hoạ tiết trang trí */
.nb-deco { position: absolute; pointer-events: none; overflow: visible; }
.nb-deco--spark1 {
    top: -7%;
    left: 22%;
    z-index: 5;
    width: 54px;
    fill: var(--nb-white);
    stroke: var(--nb-ink);
    stroke-width: 1.4;
    stroke-linejoin: round;
    animation: nb-twinkle 3.4s ease-in-out infinite;
}
.nb-deco--spark2 {
    top: 1%;
    left: -3%;
    z-index: 5;
    width: 30px;
    fill: var(--nb-pink);
    stroke: var(--nb-ink);
    stroke-width: 1.6;
    stroke-linejoin: round;
    animation: nb-twinkle 2.8s ease-in-out .8s infinite;
}
.nb-deco--squiggle {
    left: -7%;
    bottom: 31%;
    z-index: 1;
    width: 116px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.nb-deco--squiggle path:first-child { stroke: var(--nb-ink); stroke-width: 10; }
.nb-deco--squiggle path:last-child { stroke: var(--nb-orange); stroke-width: 4.5; }
.nb-deco--ring {
    top: -5%;
    right: -6%;
    z-index: 1;
    width: 74px;
    height: 74px;
    border: 3px dashed var(--nb-ink);
    border-radius: 50%;
    animation: nb-spin 16s linear infinite;
}

/* Tem răng cưa (starburst) */
.nb-seal {
    position: absolute;
    right: -4%;
    top: 42%;
    z-index: 6;
    display: grid;
    place-items: center;
    width: 108px;
    height: 108px;
    text-align: center;
    rotate: -12deg;
    /* Cắt khung: hình răng cưa đang xoay không làm phình vùng tràn (tránh cuộn ngang) */
    overflow: hidden;
    animation: nb-in .7s var(--nb-pop) .9s both;
}
.nb-seal svg {
    position: absolute;
    inset: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    overflow: visible;
    fill: var(--nb-orange);
    stroke: var(--nb-ink);
    stroke-width: 2.6;
    stroke-linejoin: round;
    filter: drop-shadow(4px 4px 0 var(--nb-ink));
    animation: nb-spin 22s linear infinite;
}
.nb-seal b {
    position: relative;
    font-family: var(--nb-display);
    font-weight: 800;
    font-size: 11px;
    line-height: 1.25;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--nb-ink);
}

/* =============================================================================
   DẢI CHỮ CHẠY BẮT CHÉO
   ============================================================================= */
.nb-bands {
    --nb-band-fs: clamp(16px, 1.9vw, 26px);
    --nb-band-h: calc(var(--nb-band-fs) * 1.3 + 26px);
    --nb-tilt: 3deg;
    position: relative;
    overflow: hidden;
    padding: 46px 0;
}
.nb-band {
    position: relative;
    width: calc(100% + 140px);
    margin-left: -70px;
    overflow: hidden;
    border-block: var(--nb-bw) solid var(--nb-ink);
}
.nb-band--yellow { z-index: 1; background: var(--nb-yellow); rotate: calc(var(--nb-tilt) * -1); }
.nb-band--pink {
    z-index: 2;
    margin-top: calc(var(--nb-band-h) * -1);
    background: var(--nb-pink);
    rotate: var(--nb-tilt);
    box-shadow: 0 6px 0 rgba(17, 17, 17, .9);
}
.nb-band__track {
    display: flex;
    width: max-content;
    animation: nb-marquee 40s linear infinite;
}
.nb-band__track--rev { animation-direction: reverse; animation-duration: 46s; }
.nb-band__group {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 26px;
    padding: 10px 13px;
    font-family: var(--nb-display);
    font-weight: 800;
    font-size: var(--nb-band-fs);
    line-height: 1.3;
}
.nb-band__word {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    white-space: nowrap;
    letter-spacing: -.01em;
}
.nb-band .nb-ic { width: .85em; height: .85em; }

/* =============================================================================
   TÍNH NĂNG
   ============================================================================= */
.nb-features { padding-top: clamp(48px, 6vw, 84px); }
.nb-feats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}
.nb-feats__cell { min-width: 0; }
.nb-feat {
    position: relative;
    height: 100%;
    padding: 26px 24px 28px;
    background: var(--tone);
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: var(--nb-r);
    box-shadow: var(--nb-sh);
    transition: transform .3s var(--nb-pop), box-shadow .3s var(--nb-pop);
}
.nb-feats__cell:nth-child(odd) .nb-feat:hover { transform: translate(-4px, -4px) rotate(-1.4deg); box-shadow: 10px 10px 0 var(--nb-ink); }
.nb-feats__cell:nth-child(even) .nb-feat:hover { transform: translate(-4px, -4px) rotate(1.4deg); box-shadow: 10px 10px 0 var(--nb-ink); }
.nb-feat__no {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 2px 10px;
    font-family: var(--nb-display);
    font-weight: 800;
    font-size: 13px;
    line-height: 1.5;
    background: var(--nb-white);
    border: 2.5px solid var(--nb-ink);
    border-radius: 999px;
}
.nb-feat__ic {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 22px;
    background: var(--nb-white);
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: 50%;
    box-shadow: var(--nb-sh-sm);
    transition: rotate .35s var(--nb-pop);
}
.nb-feat:hover .nb-feat__ic { rotate: -14deg; }
.nb-feat__ic .nb-ic { width: 28px; height: 28px; }
.nb-feat__title {
    margin: 0 0 10px;
    font-family: var(--nb-display);
    font-weight: 700;
    font-size: clamp(1.1rem, 1rem + .4vw, 1.28rem);
    line-height: 1.28;
    letter-spacing: -.015em;
}
.nb-feat p { margin: 0; font-size: 15.5px; line-height: 1.6; }

/* =============================================================================
   NỀN TẢNG — bảng sticker
   ============================================================================= */
.nb-plat { background: var(--nb-white); border-block: var(--nb-bw) solid var(--nb-ink); }
.nb-plat__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
}
.nb-plat__text { max-width: 30em; margin: 20px 0 30px; font-size: clamp(16px, 1.2vw, 17.5px); color: var(--nb-muted); }

.nb-sheet {
    position: relative;
    padding: clamp(44px, 4vw, 56px) clamp(16px, 3vw, 40px) clamp(30px, 3vw, 44px);
    background-color: var(--nb-bg);
    background-image: var(--nb-dots);
    background-size: 20px 20px;
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: 26px;
    box-shadow: var(--nb-sh-lg);
}
.nb-tape {
    position: absolute;
    top: -17px;
    left: 50%;
    padding: 6px 26px;
    font-family: var(--nb-display);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--nb-yellow);
    border-block: 2.5px solid var(--nb-ink);
    translate: -50% 0;
    rotate: -3deg;
    clip-path: polygon(0 0, 100% 0, 96% 25%, 100% 50%, 96% 75%, 100% 100%, 0 100%, 4% 75%, 0 50%, 4% 25%);
}
.nb-sheet__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nb-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 6px 6px;
    font-family: var(--nb-display);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    background: var(--nb-white);
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: 14px;
    box-shadow: 4px 4px 0 var(--nb-ink);
    rotate: var(--r, 0deg);
    transition: rotate .3s var(--nb-pop), scale .3s var(--nb-pop);
}
.nb-tag:hover { rotate: 0deg; scale: 1.07; }
.nb-tag__ic {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--on-tone, var(--nb-ink));
    background: var(--tone, var(--nb-white));
    border: 2.5px solid var(--nb-ink);
    border-radius: 10px;
}
.nb-tag__ic .nb-ic { width: 20px; height: 20px; }
.nb-tag--more { background: transparent; border-style: dashed; box-shadow: none; font-weight: 600; }
.nb-tag--more .nb-tag__ic { background: transparent; border-style: dashed; }

/* =============================================================================
   THỐNG KÊ
   ============================================================================= */
.nb-stats { padding-bottom: clamp(88px, 11vw, 150px); }
.nb-h2--center { margin-bottom: clamp(40px, 5vw, 64px); text-align: center; }
.nb-stats__kicker { text-align: center; }
.nb-stats__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 36px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.nb-stats__cell { min-width: 0; }
.nb-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(22px, 2.4vw, 32px);
    background: var(--tone);
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: 22px;
    box-shadow: var(--nb-sh-lg);
    rotate: -1.5deg;
}
.nb-stats__cell:nth-child(2) .nb-stat { rotate: 1.2deg; translate: 0 30px; }
.nb-stats__cell:nth-child(3) .nb-stat { rotate: -.8deg; }
.nb-stat__ic {
    position: absolute;
    top: 20px;
    right: 20px;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    background: var(--nb-white);
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: 50%;
}
.nb-stat__ic .nb-ic { width: 24px; height: 24px; }
.nb-stat__num {
    margin: 26px 0 14px;
    font-family: var(--nb-display);
    font-weight: 900;
    font-size: clamp(3rem, 1.6rem + 4.2vw, 5.4rem);
    line-height: 1;
    letter-spacing: -.045em;
    font-variant-numeric: tabular-nums;
}
.nb-stat__num small { margin-left: .04em; font-size: .52em; letter-spacing: -.02em; }
.nb-stat__label {
    align-self: flex-start;
    padding: 5px 12px;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tone);
    background: var(--nb-ink);
    border-radius: 8px;
}

/* =============================================================================
   QUY TRÌNH
   ============================================================================= */
.nb-steps { background: var(--nb-yellow); border-block: var(--nb-bw) solid var(--nb-ink); }
.nb-steps::before { opacity: .55; }
.nb-steps .nb-wrap { position: relative; }
.nb-steps .nb-head__lead { color: var(--nb-ink); }
.nb-steps__list {
    --gap: clamp(36px, 6vw, 88px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
    margin: 0;
    padding: 0;
    list-style: none;
}
.nb-step { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.nb-step__num {
    display: grid;
    place-items: center;
    width: 108px;
    height: 108px;
    margin: 0 auto 24px;
    font-family: var(--nb-display);
    font-weight: 900;
    font-size: 50px;
    line-height: 1;
    background: var(--tone);
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: 50%;
    box-shadow: var(--nb-sh);
    transition: rotate .4s var(--nb-pop);
}
.nb-step:hover .nb-step__num { rotate: -10deg; }
.nb-step__title {
    margin: 0 0 10px;
    font-family: var(--nb-display);
    font-weight: 800;
    font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem);
    line-height: 1.28;
}
.nb-step p { flex: 1 0 auto; max-width: 22em; margin: 0 auto 18px; font-size: 16px; }
.nb-step__tag {
    display: inline-block;
    padding: 4px 12px;
    font-weight: 700;
    font-size: 13px;
    background: var(--nb-white);
    border: 2.5px solid var(--nb-ink);
    border-radius: 999px;
    box-shadow: 2px 2px 0 var(--nb-ink);
    rotate: -3deg;
}
.nb-step__arrow {
    position: absolute;
    overflow: visible;
    fill: none;
    stroke: var(--nb-ink);
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.nb-step__arrow--h {
    top: 8px;
    left: calc(50% + 70px);
    width: calc(100% - 140px + var(--gap));
    height: auto;
    aspect-ratio: 200 / 64;
}
.nb-step:nth-child(2) .nb-step__arrow--h { scale: 1 -1; top: 22px; }
.nb-step__arrow--v { display: none; }
.js .nb-step__arrow path { stroke-dasharray: 1 1.2; stroke-dashoffset: 1.02; transition: stroke-dashoffset .9s ease .55s; }
.js .nb-step__arrow .nb-step__head { transition-duration: .3s; transition-delay: 1.4s; }
.js .nb-step.is-in .nb-step__arrow path { stroke-dashoffset: 0; }
.nb-steps__cta { margin-top: clamp(44px, 5vw, 64px); text-align: center; }
.nb-steps .nb-btn--ink { --btn-sh: var(--nb-white); }

/* =============================================================================
   ĐĂNG NHẬP / ĐĂNG KÝ
   ============================================================================= */
.nb-auth::before { opacity: .7; }
.nb-auth__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
}
.nb-auth__text { max-width: 30em; margin: 20px 0 28px; font-size: clamp(16px, 1.2vw, 17.5px); color: var(--nb-muted); }
.nb-checks { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.nb-checks li { display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 16.5px; line-height: 1.4; }
.nb-checks__ic {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    background: var(--tone);
    border: 2.5px solid var(--nb-ink);
    border-radius: 10px;
    box-shadow: 2px 2px 0 var(--nb-ink);
    rotate: -5deg;
}
.nb-checks li:nth-child(even) .nb-checks__ic { rotate: 5deg; }
.nb-checks__ic .nb-ic { width: 20px; height: 20px; }
.nb-auth__hint {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 22px;
    padding-right: 4%;
}
.nb-auth__hint span {
    padding: 5px 12px;
    font-family: var(--nb-display);
    font-weight: 700;
    font-size: 14px;
    background: var(--nb-pink);
    border: 2.5px solid var(--nb-ink);
    border-radius: 10px;
    box-shadow: 2px 2px 0 var(--nb-ink);
    rotate: -6deg;
}
.nb-auth__hint svg {
    width: 120px;
    margin-top: 10px;
    fill: none;
    stroke: var(--nb-ink);
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

/* Bọc form: tạo stacking context riêng để icon/popup z-index cao của login_box không đè header */
.nb-auth__form { position: relative; z-index: 1; min-width: 0; }
.nb-auth__form::after {
    content: "Miễn phí!";
    position: absolute;
    top: -16px;
    right: 22px;
    padding: 5px 13px;
    font-family: var(--nb-display);
    font-weight: 800;
    font-size: 13px;
    line-height: 1.3;
    background: var(--nb-green);
    border: 2.5px solid var(--nb-ink);
    border-radius: 999px;
    box-shadow: var(--nb-sh-sm);
    rotate: 7deg;
    pointer-events: none;
}

/* Reset khung cũ của login_box */
.nb-auth .box-cover { padding: 0; background: none; }
.nb-auth .box-cover .container { width: 100%; max-width: none; padding: 0; }
.nb-auth .box-cover .row { display: block; margin: 0; }
.nb-auth .box-cover .block-left { display: none; }
.nb-auth .box-cover .block-right { width: 100%; max-width: 100%; flex: none; padding: 0; }

/* Thẻ form brutal + dải màu đầu thẻ */
.nb-auth .box-cover .card {
    margin: 0;
    background: var(--nb-white);
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: 22px;
    box-shadow: var(--nb-sh-lg) !important;
    transition: none;
}
.nb-auth .box-cover .card::before {
    content: "";
    display: block;
    height: 46px;
    background: var(--nb-yellow);
    border-bottom: var(--nb-bw) solid var(--nb-ink);
    border-radius: 19px 19px 0 0;
}
.nb-auth .box-cover .card::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 18px;
    width: 15px;
    height: 15px;
    background: var(--nb-pink);
    border: 2.5px solid var(--nb-ink);
    border-radius: 50%;
    box-shadow:
        23px 0 0 -2.5px var(--nb-blue), 23px 0 0 0 var(--nb-ink),
        46px 0 0 -2.5px var(--nb-green), 46px 0 0 0 var(--nb-ink);
}
.nb-auth .box-cover .card-body { padding: 26px 30px 14px; }

.nb-auth .box-cover .auth-widget > .d-flex { gap: 16px; margin-bottom: 24px !important; }
.nb-auth .box-cover .img-fluid { max-width: 48%; max-height: 52px !important; object-fit: contain; }
.nb-auth .box-cover .img-fluid[src=""] { display: none; }
.nb-auth .box-cover h2 {
    margin: 0;
    padding: 0 .12em;
    font-family: var(--nb-display);
    font-weight: 800;
    font-size: clamp(1.35rem, 1rem + 1vw, 1.7rem);
    line-height: 1.25;
    color: var(--nb-ink);
    box-shadow: inset 0 -.36em 0 var(--nb-pink);
}

.nb-auth .box-cover .form-group { margin-bottom: 18px !important; }
.nb-auth .box-cover label,
.nb-auth .box-cover .font-weight-semibold {
    margin-bottom: 7px;
    font-family: var(--nb-font);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--nb-ink);
}
.nb-auth .box-cover .input-affix { transition: transform .15s ease; }
.nb-auth .box-cover .input-affix:focus-within { transform: translate(-2px, -2px); }
.nb-auth .box-cover .input-affix .prefix-icon { left: 15px; font-size: 15px; color: var(--nb-ink); }
.nb-auth .box-cover .input-affix .form-control:not(:first-child) {
    padding: 12px 14px 12px 42px;
    font-family: var(--nb-font);
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--nb-ink);
    background: var(--nb-white);
    border: 2.5px solid var(--nb-ink);
    border-radius: 12px;
    box-shadow: 0 0 0 var(--nb-ink);
    transition: box-shadow .15s ease, background-color .15s ease;
}
.nb-auth .box-cover .input-affix .form-control:not(:first-child):focus {
    outline: none;
    background: #fffdf2;
    box-shadow: 4px 4px 0 var(--nb-ink);
}
.nb-auth .box-cover .input-affix .form-control::placeholder { color: #8a857b; }

.nb-auth .box-cover a:not(.btn) {
    font-weight: 700;
    color: var(--nb-ink);
    text-decoration: underline;
    text-decoration-color: var(--nb-pink);
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}
.nb-auth .box-cover a:not(.btn):hover,
.nb-auth .box-cover a:not(.btn):focus { color: #c2185b; text-decoration-color: var(--nb-ink); }
.nb-auth .box-cover .font-size-14 { color: var(--nb-muted); }

.nb-auth .box-cover .btn.btn-primary {
    padding: 13px 22px;
    font-family: var(--nb-display);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    color: var(--nb-ink);
    background: var(--nb-pink);
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: 12px;
    box-shadow: 4px 4px 0 var(--nb-ink);
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease;
}
.nb-auth .box-cover .btn.btn-primary:hover { color: var(--nb-ink); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--nb-ink); }
.nb-auth .box-cover .btn.btn-primary:active { transform: translate(4px, 4px); box-shadow: none; }
.nb-auth .box-cover .btn.btn-primary:focus-visible { outline: 3px dashed var(--nb-ink); outline-offset: 3px; }
.nb-auth .box-cover #generate_email.btn {
    margin-top: 10px !important;
    padding: 7px 12px;
    font-size: 12.5px;
    background: var(--nb-yellow);
    border-width: 2.5px;
    box-shadow: 3px 3px 0 var(--nb-ink);
}

.nb-auth .box-cover .form-group.check-password {
    top: calc(100% + 6px);
    padding: 10px 14px;
    font-size: 14px;
    color: var(--nb-ink);
    background: var(--nb-white);
    border: 2.5px solid var(--nb-ink);
    border-radius: 12px;
    box-shadow: 4px 4px 0 var(--nb-ink);
}
.nb-auth .box-cover .form-group.check-password > div:first-child { font-weight: 700; }
.nb-auth .box-cover .form-group.re-check-password { font-weight: 600; font-size: 14px; color: #d4145a; }
.nb-auth .box-cover .term-agree input { accent-color: var(--nb-pink); }
.nb-auth .box-cover .area-captcha { max-width: 100%; overflow: hidden; }

/* Chọn ngôn ngữ — biến màu + viền brutal (menu bị JS đưa ra body nên scope theo body.nb) */
.nb .lang-picker,
.nb .lp-menu {
    --lp-bg: #ffffff;
    --lp-border: #111111;
    --lp-ink: #111111;
    --lp-ink-2: #111111;
    --lp-muted: #5c574e;
    --lp-hover: #fff7e6;
    --lp-primary: #c2185b;
    --lp-primary-soft: rgba(255, 107, 157, .22);
    font-family: var(--nb-font);
}
.nb-auth .lang-picker-row { margin-top: 4px; padding-top: 14px; border-top: 2.5px dashed rgba(17, 17, 17, .22); }
.nb .lang-picker .lp-btn { border-width: 2.5px; border-radius: 12px; box-shadow: var(--nb-sh-sm); }
.nb .lang-picker .lp-btn:hover { background: var(--nb-yellow); }
.nb .lp-menu { border-width: var(--nb-bw); border-radius: 16px; box-shadow: var(--nb-sh); }
.nb .lp-menu .lp-search { border-bottom-width: 2.5px; }

/* =============================================================================
   BẢNG GIÁ (price_table + DataTables)
   ============================================================================= */
.nb-prices { background: var(--nb-white); border-top: var(--nb-bw) solid var(--nb-ink); }
.nb-pricebox {
    overflow: hidden;
    background: var(--nb-white);
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: 22px;
    box-shadow: var(--nb-sh-lg);
}
.nb-pricebox__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: var(--nb-yellow);
    border-bottom: var(--nb-bw) solid var(--nb-ink);
}
.nb-pricebox__dots { display: flex; gap: 8px; }
.nb-pricebox__dots i { width: 14px; height: 14px; background: var(--nb-pink); border: 2.5px solid var(--nb-ink); border-radius: 50%; }
.nb-pricebox__dots i:nth-child(2) { background: var(--nb-blue); }
.nb-pricebox__dots i:nth-child(3) { background: var(--nb-green); }
.nb-pricebox__name {
    padding: 2px 12px;
    font-family: var(--nb-display);
    font-weight: 700;
    font-size: 12.5px;
    background: var(--nb-white);
    border: 2px solid var(--nb-ink);
    border-radius: 999px;
}
.nb-pricebox__scroll { overflow-x: auto; padding: clamp(14px, 3vw, 30px); -webkit-overflow-scrolling: touch; }

.nb-pricebox #label_table_prices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin: 0 0 18px !important;
}
.nb-pricebox #label_table_prices > span {
    margin-right: 0 !important;
    font-family: var(--nb-display);
    font-weight: 700;
    font-size: 15px !important;
}
.nb-pricebox #service-category-select {
    padding: 9px 40px 9px 14px;
    font-family: var(--nb-font);
    font-weight: 600;
    font-size: 15px;
    color: var(--nb-ink);
    background: var(--nb-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 15px;
    border: 2.5px solid var(--nb-ink);
    border-radius: 12px;
    box-shadow: var(--nb-sh-sm);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.nb-pricebox #service-category-select:focus { outline: none; box-shadow: 3px 3px 0 var(--nb-pink); }

.nb-pricebox .dataTables_wrapper { font-family: var(--nb-font); font-size: 15px; color: var(--nb-ink); }
.nb-pricebox .dataTables_wrapper .dataTables_length,
.nb-pricebox .dataTables_wrapper .dataTables_filter { margin-bottom: 14px; font-weight: 600; }
.nb-pricebox .dataTables_wrapper .dataTables_length select,
.nb-pricebox .dataTables_wrapper .dataTables_filter input {
    margin: 0 6px;
    padding: 7px 10px;
    font: inherit;
    font-weight: 600;
    color: var(--nb-ink);
    background: var(--nb-white);
    border: 2.5px solid var(--nb-ink);
    border-radius: 10px;
    box-shadow: 2px 2px 0 var(--nb-ink);
    outline: none;
}
.nb-pricebox .dataTables_wrapper .dataTables_filter input:focus { box-shadow: 3px 3px 0 var(--nb-pink); }

.nb-pricebox .dataTables_wrapper table.dataTable {
    width: 100% !important;
    margin: 6px 0 14px !important;
    border-collapse: separate !important;
    border-spacing: 0;
    border: 2.5px solid var(--nb-ink);
    border-radius: 14px;
}
.nb-pricebox .dataTables_wrapper table.dataTable thead th {
    padding: 13px 30px 13px 16px;
    font-family: var(--nb-display);
    font-weight: 700;
    font-size: 13.5px;
    text-align: left;
    color: var(--nb-ink);
    background: var(--nb-yellow);
    border: 0;
    border-bottom: 2.5px solid var(--nb-ink);
}
.nb-pricebox .dataTables_wrapper table.dataTable thead th + th { border-left: 2px solid var(--nb-ink); }
.nb-pricebox .dataTables_wrapper table.dataTable thead th:first-child { border-top-left-radius: 11px; }
.nb-pricebox .dataTables_wrapper table.dataTable thead th:last-child { border-top-right-radius: 11px; }
.nb-pricebox .dataTables_wrapper table.dataTable tbody td {
    padding: 12px 16px;
    vertical-align: middle;
    background: transparent;
    border: 0;
    border-top: 1.5px solid rgba(17, 17, 17, .14);
}
.nb-pricebox .dataTables_wrapper table.dataTable tbody td + td { border-left: 2px solid var(--nb-ink); }
.nb-pricebox .dataTables_wrapper table.dataTable tbody tr:first-child td { border-top: 0; }
.nb-pricebox .dataTables_wrapper table.dataTable tbody tr { background: var(--nb-white); }
.nb-pricebox .dataTables_wrapper table.dataTable tbody tr:nth-child(even) { background: var(--nb-bg); }
.nb-pricebox .dataTables_wrapper table.dataTable tbody tr:hover { background: #ffeaa6; }
.nb-pricebox .dataTables_wrapper table.dataTable tbody tr:last-child td:first-child { border-bottom-left-radius: 11px; }
.nb-pricebox .dataTables_wrapper table.dataTable tbody tr:last-child td:last-child { border-bottom-right-radius: 11px; }
.nb-pricebox .dataTables_wrapper table.dataTable tbody td:nth-child(2) {
    font-weight: 700 !important;
    color: var(--nb-ink) !important;
    white-space: nowrap;
}
.nb-pricebox .dataTables_wrapper .dataTables_info { padding-top: 12px; font-size: 14px; color: var(--nb-soft); }
.nb-pricebox .dataTables_wrapper .dataTables_paginate { padding-top: 8px; }
.nb-pricebox .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 40px;
    margin: 4px 0 4px 8px;
    padding: 6px 12px;
    font-weight: 700;
    color: var(--nb-ink) !important;
    background: var(--nb-white) !important;
    border: 2.5px solid var(--nb-ink) !important;
    border-radius: 10px;
    box-shadow: var(--nb-sh-sm);
    transition: transform .12s ease, box-shadow .12s ease;
}
.nb-pricebox .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: var(--nb-ink) !important;
    background: var(--nb-yellow) !important;
    box-shadow: 1px 1px 0 var(--nb-ink);
    transform: translate(2px, 2px);
}
.nb-pricebox .dataTables_wrapper .dataTables_paginate .paginate_button:active { box-shadow: none; transform: translate(3px, 3px); }
.nb-pricebox .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.nb-pricebox .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: var(--nb-ink) !important;
    background: var(--nb-pink) !important;
}
.nb-pricebox .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.nb-pricebox .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.nb-pricebox .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    opacity: .4;
    background: var(--nb-white) !important;
    box-shadow: none;
    transform: none;
    cursor: default;
}

/* =============================================================================
   HỎI ĐÁP
   ============================================================================= */
.nb-faq__grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: start;
}
.nb-faq__intro { position: sticky; top: calc(var(--nb-header-h) + 32px); }
.nb-faq__text { max-width: 26em; margin: 20px 0 28px; font-size: clamp(16px, 1.2vw, 17.5px); color: var(--nb-muted); }
.nb-faq__list { display: grid; gap: 16px; }

/* Khung chat minh hoạ dưới phần giới thiệu */
.nb-chat {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 340px;
    margin-top: 36px;
}
.nb-chat__msg {
    max-width: 88%;
    padding: 11px 15px;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.45;
    border: 2.5px solid var(--nb-ink);
    box-shadow: var(--nb-sh-sm);
}
.nb-chat__msg--me {
    align-self: flex-end;
    background: var(--nb-white);
    border-radius: 16px 16px 4px 16px;
    rotate: 1.5deg;
}
.nb-chat__msg--them {
    align-self: flex-start;
    background: var(--nb-green);
    border-radius: 16px 16px 16px 4px;
    rotate: -1.5deg;
}
.nb-chat__msg b {
    display: block;
    margin-bottom: 2px;
    font-family: var(--nb-display);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.nb-chat__typing {
    display: inline-flex;
    gap: 5px;
    align-self: flex-start;
    padding: 10px 14px;
    background: var(--nb-white);
    border: 2.5px solid var(--nb-ink);
    border-radius: 999px;
}
.nb-chat__typing i {
    width: 8px;
    height: 8px;
    background: var(--nb-ink);
    border-radius: 50%;
    animation: nb-typing 1.2s ease-in-out infinite;
}
.nb-chat__typing i:nth-child(2) { animation-delay: .15s; }
.nb-chat__typing i:nth-child(3) { animation-delay: .3s; }
.nb-qa {
    background: var(--nb-white);
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: 16px;
    box-shadow: 5px 5px 0 var(--nb-ink);
    transition: transform .2s ease, box-shadow .2s ease;
}
.nb-qa:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--nb-ink); }
.nb-qa summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px 16px 20px;
    font-family: var(--nb-display);
    font-weight: 700;
    font-size: clamp(15px, 1.1vw, 16.5px);
    line-height: 1.45;
    list-style: none;
    border-radius: 13px;
    cursor: pointer;
    transition: background-color .2s ease;
}
.nb-qa summary::-webkit-details-marker { display: none; }
.nb-qa summary::marker { content: ""; }
.nb-qa summary:focus-visible { outline: 3px dashed var(--nb-ink); outline-offset: 3px; }
.nb-qa[open] summary { background: var(--nb-yellow); border-bottom: var(--nb-bw) solid var(--nb-ink); border-radius: 13px 13px 0 0; }
.nb-qa__plus {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: var(--nb-pink);
    border: 2.5px solid var(--nb-ink);
    border-radius: 10px;
    box-shadow: 2px 2px 0 var(--nb-ink);
    transition: background-color .2s ease;
}
.nb-qa__plus .nb-ic { width: 20px; height: 20px; transition: rotate .35s var(--nb-pop); }
.nb-qa[open] .nb-qa__plus { background: var(--nb-white); }
.nb-qa[open] .nb-qa__plus .nb-ic { rotate: 135deg; }
.nb-qa__body { padding: 16px 20px 20px; }
.nb-qa__body p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--nb-muted); }
.nb-qa[open] .nb-qa__body { animation: nb-drop .35s var(--nb-pop); }

/* =============================================================================
   KÊU GỌI CUỐI TRANG
   ============================================================================= */
.nb-cta { padding-top: clamp(24px, 4vw, 48px); }
.nb-cta__box {
    position: relative;
    padding: clamp(56px, 7vw, 100px) clamp(20px, 5vw, 80px);
    text-align: center;
    background-color: var(--nb-pink);
    background-image: radial-gradient(rgba(17, 17, 17, .16) 1.3px, transparent 1.7px);
    background-size: 22px 22px;
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: 30px;
    box-shadow: 12px 12px 0 var(--nb-ink);
}
.nb-cta__title {
    max-width: 12em;
    margin: 0 auto 30px;
    font-family: var(--nb-display);
    font-weight: 900;
    font-size: clamp(2.2rem, .9rem + 5vw, 5rem);
    line-height: 1.16;
    letter-spacing: -.04em;
}
.nb-cta__accent {
    display: inline-block;
    margin-top: .1em;
    padding: 0 .2em .04em;
    white-space: nowrap;
    background: var(--nb-yellow);
    border: 4px solid var(--nb-ink);
    border-radius: .16em;
    box-shadow: 6px 6px 0 var(--nb-ink);
    rotate: -2deg;
}
.nb-cta__text { max-width: 32em; margin: 0 auto 34px; font-size: clamp(16px, 1.3vw, 19px); font-weight: 500; }
.nb-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 20px; }
.nb-cta .nb-btn--ink { --btn-sh: var(--nb-yellow); }
.nb-seal--cta { top: -40px; right: clamp(8px, 4vw, 56px); left: auto; width: 124px; height: 124px; rotate: 12deg; animation: none; }
.nb-seal--cta svg { fill: var(--nb-yellow); }
.nb-seal--cta b { font-size: 12.5px; }
.nb-deco--cta1 {
    top: 16%;
    left: 6%;
    width: 46px;
    fill: var(--nb-white);
    stroke: var(--nb-ink);
    stroke-width: 1.4;
    stroke-linejoin: round;
    animation: nb-twinkle 3.2s ease-in-out infinite;
}
.nb-deco--cta2 {
    right: 9%;
    bottom: 14%;
    width: 32px;
    fill: var(--nb-yellow);
    stroke: var(--nb-ink);
    stroke-width: 1.6;
    stroke-linejoin: round;
    animation: nb-twinkle 2.6s ease-in-out .6s infinite;
}

/* =============================================================================
   FOOTER
   ============================================================================= */
.nb-footer {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 7vw, 88px) 0 28px;
    color: var(--nb-bg);
    background: var(--nb-ink);
}
.nb-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr);
    gap: 40px 56px;
}
.nb-brand--foot { box-shadow: 3px 3px 0 var(--nb-pink); }
.nb-footer__about p { max-width: 30em; margin: 24px 0 0; font-size: 15.5px; color: var(--nb-cream-ink); }
.nb-footer__title {
    margin: 0 0 18px;
    font-family: var(--nb-display);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nb-yellow);
}
.nb-footer__plats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nb-footer__plats li { display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--nb-cream-ink); }
.nb-footer__plats .nb-ic { width: 17px; height: 17px; color: var(--nb-yellow); }
.nb-footer__links { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.nb-footer__links a {
    font-weight: 600;
    font-size: 15px;
    color: var(--nb-bg);
    text-decoration: none;
    text-decoration-color: var(--nb-pink);
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
}
.nb-footer__links a:hover,
.nb-footer__links a:focus-visible { color: var(--nb-yellow); text-decoration-line: underline; outline: none; }

/* Chữ domain cỡ lớn dạng viền — cỡ chữ co theo độ dài domain để không tràn */
.nb-footer__mark {
    margin: clamp(44px, 6vw, 72px) 0 0;
    overflow: hidden;
    font-family: var(--nb-display);
    font-weight: 900;
    font-size: min(9rem, calc((min(100vw, 1200px) - 2 * var(--nb-gutter)) / (var(--len, 12) * .8)));
    line-height: 1.12;
    letter-spacing: -.02em;
    text-align: center;
    white-space: nowrap;
    color: var(--nb-ink);
    -webkit-text-stroke: 3px var(--nb-yellow);
    paint-order: stroke fill;
    transition: color .35s ease;
    user-select: none;
}
.nb-footer__mark:hover { color: var(--nb-pink); }

.nb-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 24px;
    margin-top: 22px;
    padding-top: 22px;
    font-size: 14px;
    color: rgba(255, 247, 230, .66);
    border-top: 2px dashed rgba(255, 247, 230, .24);
}
.nb-footer__bottom p { margin: 0; }
.nb-footer__tag { display: inline-flex; align-items: center; gap: 7px; }
.nb-footer__tag .nb-ic { width: 15px; height: 15px; color: var(--nb-pink); }

/* Nút lên đầu trang — đặt bên trái, tránh widget liên hệ ở góc phải */
.nb-top {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 70;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    color: var(--nb-ink);
    background: var(--nb-yellow);
    border: var(--nb-bw) solid var(--nb-ink);
    border-radius: 14px;
    box-shadow: 4px 4px 0 var(--nb-ink);
    opacity: 0;
    translate: 0 18px;
    pointer-events: none;
    transition: opacity .25s ease, translate .35s var(--nb-pop), transform .14s ease, box-shadow .14s ease;
}
.nb-top.is-show { opacity: 1; translate: 0 0; pointer-events: auto; }
.nb-top:hover { color: var(--nb-ink); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--nb-ink); }
.nb-top:focus-visible { outline: 3px dashed var(--nb-ink); outline-offset: 3px; }
.nb-top .nb-ic { width: 24px; height: 24px; }

/* =============================================================================
   HIỆN DẦN KHI CUỘN
   ============================================================================= */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(34px) scale(.97);
    transition: opacity .55s ease, transform .75s var(--nb-pop);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* =============================================================================
   KEYFRAMES
   ============================================================================= */
@keyframes nb-in { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes nb-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes nb-spin { to { rotate: 360deg; } }
@keyframes nb-twinkle { 0%, 100% { scale: 1; rotate: 0deg; } 50% { scale: .72; rotate: 30deg; } }
@keyframes nb-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.1; } }
@keyframes nb-beat { 0%, 60%, 100% { scale: 1; } 15% { scale: 1.32; } 30% { scale: 1; } 45% { scale: 1.18; } }
@keyframes nb-grow { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes nb-progress { from { width: 6%; } to { width: 100%; } }
@keyframes nb-ring { 0% { opacity: .9; scale: .85; } 100% { opacity: 0; scale: 1.35; } }
@keyframes nb-drop { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
@keyframes nb-marquee { to { transform: translateX(-50%); } }
@keyframes nb-typing { 0%, 60%, 100% { translate: 0 0; opacity: .45; } 30% { translate: 0 -5px; opacity: 1; } }

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 1199.98px) {
    .nb-nav { gap: 14px; }
    .nb-nav__link { padding: 7px 10px; }
    .nb-seal { width: 100px; height: 100px; }
}

/* Cột ảnh ghép hẹp (992–1199px): kéo cao khung để các thẻ bớt chồng lên nhau */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .nb-collage { aspect-ratio: 1 / 1.24; }
    .nb-card--post { width: 60%; top: 6%; }
    .nb-card--profile { width: 54%; }
    .nb-card--chart { width: 54%; left: 2%; }
    .nb-card--video { width: 38%; right: 2%; }
    .nb-collage .nb-seal { top: 45%; }
}

@media (max-width: 991.98px) {
    body.nb { --nb-header-h: 66px; }

    /* Menu thu gọn: panel brutal thả xuống */
    .nb-burger { display: grid; margin-left: 10px; }
    .nb-header__quick { display: inline-flex; margin-left: auto; }
    .nb-nav {
        position: absolute;
        top: calc(100% + 12px);
        left: var(--nb-gutter);
        right: var(--nb-gutter);
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin: 0;
        padding: 12px;
        background: var(--nb-white);
        border: var(--nb-bw) solid var(--nb-ink);
        border-radius: 18px;
        box-shadow: var(--nb-sh);
    }
    .nb-header.is-open .nb-nav { display: flex; animation: nb-drop .3s var(--nb-pop); }
    .nb-nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
    .nb-nav__link {
        display: block;
        padding: 12px 14px;
        font-family: var(--nb-display);
        font-weight: 700;
        font-size: 16px;
    }
    .nb-nav__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 12px; border-top: 2.5px dashed rgba(17, 17, 17, .2); }
    .nb-nav__cta .nb-btn { width: 100%; font-size: 14.5px; padding: .85em 1em; }

    .nb-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .nb-hero__copy { max-width: 680px; }
    .nb-collage { max-width: 500px; }
    .nb-hero__note { text-align: center; }

    .nb-head--split { grid-template-columns: minmax(0, 1fr); }
    .nb-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .nb-plat__grid { grid-template-columns: minmax(0, 1fr); }
    .nb-stats__cell:nth-child(2) .nb-stat { translate: none; }
    .nb-stat__num { font-size: clamp(2.4rem, 6vw, 3.4rem); }
    .nb-stat__ic { width: 44px; height: 44px; top: 16px; right: 16px; }
    .nb-stat__ic .nb-ic { width: 20px; height: 20px; }
    .nb-auth__grid { grid-template-columns: minmax(0, 1fr); }
    .nb-auth__hint { display: none; }
    .nb-auth__form { max-width: 620px; width: 100%; }
    .nb-faq__grid { grid-template-columns: minmax(0, 1fr); }
    .nb-faq__intro { position: static; }
    .nb-chat { display: none; }
    .nb-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .nb-footer__about { grid-column: 1 / -1; }
    .nb-bands { --nb-tilt: 4deg; }
}

@media (max-width: 767.98px) {
    .nb-stats__list { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin-inline: auto; }
    .nb-stat__num { font-size: clamp(3rem, 14vw, 4.2rem); }
    .nb-stat,
    .nb-stats__cell:nth-child(2) .nb-stat,
    .nb-stats__cell:nth-child(3) .nb-stat { rotate: 0deg; }
    .nb-stats__cell:nth-child(odd) .nb-stat { rotate: -1deg; }
    .nb-stats__cell:nth-child(2) .nb-stat { rotate: 1deg; }

    .nb-steps__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .nb-step__arrow--h { display: none; }
    .nb-step__arrow--v { position: relative; display: block; width: 44px; height: 66px; margin: 14px auto 10px; }
    .nb-step__num { width: 92px; height: 92px; font-size: 42px; margin-bottom: 18px; }
}

@media (max-width: 639.98px) {
    .nb-header__quick { display: none; }
    .nb-burger { margin-left: auto; }
    .nb-brand { font-size: 14px; }

    .nb-hero__cta .nb-btn { flex: 1 1 100%; }
    .nb-hero__badges { gap: 10px; margin-bottom: 22px; }
    .nb-sticker { font-size: 13px; }

    /* Ảnh ghép gọn lại: chỉ giữ 2 thẻ */
    .nb-collage { aspect-ratio: auto; height: 380px; max-width: 420px; }
    .nb-card--video,
    .nb-card--chart,
    .nb-deco--squiggle,
    .nb-deco--ring { display: none; }
    .nb-card--post { top: 8px; left: 0; width: 66%; }
    .nb-card--profile { top: 150px; right: 0; width: 56%; padding: 13px; }
    .nb-react--share { display: none; }
    .nb-bubble { left: -6px; font-size: 12px; }
    .nb-hero__title { line-height: 1.22; }
    /* Chừa chỗ để bóng khối nhấn không đè dấu chữ ở dòng dưới (vd "ă" trong "tăng") */
    .nb-hero__line + .nb-hero__line { margin-top: .16em; }
    .nb-hero__title .nb-hl::before { box-shadow: 4px 4px 0 var(--nb-ink); }
    .nb-collage .nb-seal { top: auto; right: auto; bottom: 6px; left: 2%; width: 100px; height: 100px; }
    .nb-seal b,
    .nb-seal--cta b { font-size: 10px; }
    .nb-deco--spark1 { top: auto; bottom: 36%; left: auto; right: 4%; width: 40px; }
    .nb-deco--spark2 { top: auto; right: auto; left: 34%; bottom: 2%; }

    .nb-bands { --nb-tilt: 6deg; padding: 44px 0; }

    .nb-feats { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    /* Thẻ tính năng gọn: icon bên trái, chữ bên phải */
    .nb-feat {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        column-gap: 16px;
        align-items: start;
        padding: 20px 18px 22px;
    }
    .nb-feat__ic { grid-row: 1 / span 2; width: 52px; height: 52px; margin: 0; }
    .nb-feat__ic .nb-ic { width: 24px; height: 24px; }
    .nb-feat__title { align-self: center; min-height: 52px; display: flex; align-items: center; margin: 0 0 6px; padding-right: 44px; }
    .nb-feat p { grid-column: 2; font-size: 15px; }
    .nb-feat__no { top: 14px; right: 14px; font-size: 12px; }
    .nb-sheet__list { gap: 14px 10px; }
    .nb-tag { font-size: 13.5px; padding-right: 13px; }
    .nb-tag__ic { width: 34px; height: 34px; }

    .nb-auth .box-cover .card-body { padding: 22px 18px 10px; }
    .nb-auth .box-cover .card { box-shadow: var(--nb-sh) !important; }
    .nb-auth__form::after { right: 14px; }

    .nb-pricebox { box-shadow: var(--nb-sh); }

    .nb-cta__box { box-shadow: var(--nb-sh); border-radius: 24px; }
    .nb-cta__btns .nb-btn { flex: 1 1 100%; }
    .nb-deco--cta1 { top: auto; bottom: 14px; left: 14px; width: 28px; }
    .nb-deco--cta2 { display: none; }
    .nb-qa summary { font-size: 14.5px; padding: 14px 14px 14px 16px; }
    .nb-qa__body { padding: 14px 16px 18px; }
    .nb-checks li { font-size: 15.5px; }
    .nb-seal--cta { top: -54px; right: 4px; width: 102px; height: 102px; }
    .nb-cta__box { padding-top: 64px; }
    .nb-footer__mark { -webkit-text-stroke-width: 2px; }

    .nb-footer__grid { grid-template-columns: minmax(0, 1fr); }
    .nb-footer__bottom { flex-direction: column; }
}

@media (max-width: 400px) {
    .nb-auth .box-cover .area-captcha .g-recaptcha { transform: scale(.86); transform-origin: 0 0; }
    .nb-hero__plats-label { flex-basis: 100%; }
}

/* =============================================================================
   GIẢM CHUYỂN ĐỘNG
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    body.nb *,
    body.nb *::before,
    body.nb *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: .001ms !important;
        transition-delay: 0s !important;
    }
    .nb-band__track { animation: none !important; }
    .js [data-reveal] { opacity: 1; transform: none; }
    .js .nb-step__arrow path { stroke-dashoffset: 0; }
}