@import "../../assets/css/breakpoints.css";

/* ---- Biến CSS ---- */
:root {
    --hb: var(--color-brand-blue);       /* Honda Blue local */
    --hr: var(--color-red-600);
    --hw: var(--color-white);
    --hg: var(--color-bg-secondary);
    --ht: var(--color-text-secondary);
    --hd: var(--color-text-primary);
    --hbr: var(--color-border);
    --tr: var(--transition-base);
    --sh1: var(--shadow-sm);
    --sh2: var(--shadow-md);
    --sh3: var(--shadow-lg);
    --r:  var(--radius-md);
    --rl: var(--radius-lg);
}

/* ---- Reset cục bộ ---- */
.hn-archive *, .hn-archive *::before, .hn-archive *::after { box-sizing: border-box; }
.hn-archive {
    font-family: var(--font-body);
    color: var(--hd);
    line-height: var(--leading-normal);
}

/* ==== HERO ==== */
.hn-hero {
    position: relative;
    min-height: 440px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--hb);
}
.hn-hero__bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .28;
}
.hn-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(0,47,108,.97) 0%, rgba(0,47,108,.78) 55%, rgba(228,0,43,.35) 100%);
}
.hn-hero--archive-category {
    background: #111;
}
.hn-hero--archive-category .hn-hero__bg {
    opacity: 1;
}
.hn-hero--archive-category .hn-hero__overlay {
    background: linear-gradient(90deg,
        rgba(0,0,0,.34) 0%,
        rgba(0,0,0,.3) 24%,
        rgba(0,0,0,.18) 48%,
        rgba(0,0,0,.08) 66%,
        rgba(0,0,0,0) 84%);
}
.hn-hero--archive-category .hn-btn-ghost {
    background: #fff;
    color: var(--hr) !important;
    border-color: #fff;
}
.hn-hero--archive-category .hn-btn-ghost:hover {
    background: #fff5f7;
    color: var(--hr) !important;
    border-color: #fff5f7;
}
/* Red/black gradient modifier — dùng cho /khuyen-mai/ */
.hn-hero--redbk { background: var(--hd, #1a1a1a); }
.hn-hero--redbk .hn-hero__overlay {
    background: linear-gradient(135deg, rgba(10,10,10,.98) 0%, rgba(30,0,8,.94) 52%, rgba(228,0,43,.82) 100%);
}
.hn-hero__body {
    position: relative; z-index: 2;
    padding: 96px 0 64px;
    width: 100%;
}
.hn-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--hr); color: #fff;
    font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase;
    padding: 6px 14px; border-radius: var(--radius-sm); margin-bottom: 20px;
}
.hn-hero__h1 {
    font-family: var(--font-heading);
    font-size: var(--text-display-lg);
    font-weight: var(--weight-extrabold);
    color: var(--color-text-inverse);
    line-height: var(--leading-tight);
    margin-bottom: 14px;
    letter-spacing: var(--tracking-tight);
}
.hn-hero__h1 em { color: var(--hr); font-style: normal; }
.hn-hero__sub {
    font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
    color: rgba(255,255,255,.84);
    max-width: 560px;
    line-height: var(--leading-loose);
    margin-bottom: 32px;
}
.hn-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==== BUTTONS ==== */
.hn-btn {
    display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; text-decoration: none;
    border-radius: var(--r); font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide); text-transform: uppercase; transition: var(--tr);
}
.hn-btn-red  { background: var(--hr); color: #fff !important; padding: 13px 26px; }
.hn-btn-red:hover  { background: var(--color-red-700); transform: translateY(-2px); box-shadow: var(--shadow-red); color:#fff!important; }
.hn-btn-ghost { background: transparent; color: #fff !important; padding: 12px 22px; border: 2px solid rgba(255,255,255,.6); }
.hn-btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color:#fff!important; }

/* ==== TRUST BAR ==== */
.hn-trust {
    background: var(--hb);
    border-top: 1px solid rgba(255,255,255,.1);
    padding: 14px 0;
}
.hn-trust__inner { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.hn-trust__item  { display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: rgba(255,255,255,.88); }
.hn-trust__item i { color: var(--hr); font-size: 15px; }

/* ==== BREADCRUMB ==== */
.hn-bre { background: var(--hg); border-bottom: 1px solid var(--hbr); padding: 12px 0; }
.hn-bre ol  { display: flex; flex-wrap: wrap; align-items: center; list-style: none; padding: 0; margin: 0; gap: 4px; }
.hn-bre a   { font-size: 12.5px; color: var(--hb); text-decoration: none; }
.hn-bre a:hover { text-decoration: underline; }
.hn-bre .sep { color: #ccc; font-size: 11px; }
.hn-bre .cur { font-size: 12.5px; color: var(--ht); font-weight: 500; }

/* ==== CATEGORY TABS ==== */
.hn-tabs {
    background: var(--color-bg-primary);
    border-bottom: 2px solid var(--hbr);
    position: sticky; top: 0; z-index: 50;
    box-shadow: var(--sh1);
}
.hn-tabs__inner {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge */
    gap: 0;
}
.hn-tabs__inner::-webkit-scrollbar { display: none; }

.hn-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 14px 18px;
    font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--hd);
    text-decoration: none; white-space: nowrap;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;          /* overlap container border */
    transition: color .2s, border-color .2s, background .2s;
    flex-shrink: 0;
}
.hn-tab svg { flex-shrink: 0; opacity: .7; transition: opacity .2s; }
.hn-tab:hover {
    color: var(--hb);
    background: rgba(0,47,108,.04);
}
.hn-tab:hover svg { opacity: 1; }
.hn-tab--active {
    color: var(--hr);
    border-bottom-color: var(--hr);
    font-weight: 700;
}
.hn-tab--active svg { opacity: 1; color: var(--hr); }

/* ==== FILTER BAR (legacy dropdowns) ==== */
.hn-filter {
    background: var(--color-bg-primary); border-bottom: 1px solid var(--hbr);
    padding: 16px 0; position: sticky; top: 0; z-index: 50;
    box-shadow: var(--sh1);
}
.hn-filter__inner { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.hn-filter__lbl   { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--hb); text-transform: uppercase; letter-spacing: var(--tracking-wide); white-space: nowrap; }
.hn-filter__sel {
    appearance: none;
    background: var(--hg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23444' d='M5 7L0 2h10z'/%3E%3C/svg%3E") no-repeat right 11px center;
    border: 1.5px solid var(--hbr); border-radius: var(--r);
    padding: 9px 32px 9px 12px; font-size: var(--text-sm); color: var(--hd);
    cursor: pointer; transition: var(--tr); min-width: 130px;
}
.hn-filter__sel:focus { outline: none; border-color: var(--hb); box-shadow: 0 0 0 3px rgba(0,47,108,.1); }
.hn-filter__cnt { margin-left: auto; font-size: var(--text-xs); color: var(--ht); white-space: nowrap; }
.hn-filter__cnt strong { color: var(--hb); }

/* ==== LAYOUT CHÍNH ==== */
.hn-main { background: var(--hg); padding: 48px 0 72px; }
/* Scoped to .hn-main to win over layout.css generic .hn-layout (280px 1fr) */
.hn-main .hn-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 28px; align-items: start;
}
@media (--bp-lt-lg) { .hn-main .hn-layout { grid-template-columns: 1fr; } }

/* ==== SECTION HEADING ==== */
.hn-sec-head {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 24px; padding-bottom: 16px;
    border-bottom: 2px solid var(--hbr);
}
.hn-sec-head::before {
    content: ''; width: 4px; height: 22px;
    background: var(--hr); border-radius: 2px; flex-shrink: 0;
}
.hn-sec-head h2 {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    color: var(--hd);
    letter-spacing: var(--tracking-tight);
    margin: 0;
}

/* ==== INTRO BLOCK ==== */
.hn-intro__panel {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .95fr);
    gap: 20px;
    background: linear-gradient(180deg, var(--color-bg-primary) 0%, #fffdfd 100%);
    border: 1px solid var(--hbr);
    border-radius: var(--radius-xl);
    box-shadow: var(--sh1);
    padding: clamp(20px, 2vw, 28px);
}
.hn-intro__copy p {
    margin: 0 0 12px;
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    color: var(--ht);
}
.hn-intro__copy p:last-child { margin-bottom: 0; }
.hn-intro__stats {
    display: grid;
    gap: 14px;
    align-content: start;
}
.hn-stat {
    background: linear-gradient(145deg, rgba(0,47,108,.04), rgba(228,0,43,.05));
    border: 1px solid rgba(0,47,108,.08);
    border-radius: 16px;
    padding: 18px 18px 16px;
}
.hn-stat--soft {
    background: linear-gradient(145deg, rgba(228,0,43,.045), rgba(255,255,255,.9));
}
.hn-stat__label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-extrabold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--ht);
    margin-bottom: 8px;
}
.hn-stat__value {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: var(--weight-extrabold);
    line-height: var(--leading-tight);
    color: var(--hd);
}

/* ==== RELATED LINKS ==== */
.hn-links-panel {
    background: var(--color-bg-primary);
    border: 1px solid var(--hbr);
    border-radius: var(--radius-xl);
    box-shadow: var(--sh1);
    padding: 18px;
}
.hn-links-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.hn-link-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-decoration: none;
    color: var(--hd);
    background: linear-gradient(180deg, var(--color-bg-primary) 0%, #fbfbfb 100%);
    border: 1px solid var(--hbr);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    min-height: 58px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.hn-link-pill:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh2);
    border-color: rgba(228,0,43,.25);
    color: var(--hb);
}
.hn-link-pill span:first-child {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1.45;
}
.hn-link-pill span:last-child {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(228,0,43,.08);
    color: var(--hr);
    font-size: 14px;
}

/* ==== GRID BÀI VIẾT ==== */
/* Scoped to .hn-main to win over layout.css generic .hn-grid (12-col) */
.hn-main .hn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (--bp-lt-sm)  { .hn-main .hn-grid { grid-template-columns: 1fr; } }
@media (--bp-sm) and (max-width: 991px) { .hn-main .hn-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- Card nổi bật (đầu tiên trang 1) ---- */
.hn-card-feat {
    background: var(--color-bg-primary); border-radius: var(--rl); overflow: hidden;
    box-shadow: var(--sh1); transition: var(--tr);
    position: relative; grid-column: span 3;
    display: grid; grid-template-columns: 1fr 1fr;
}
@media (--bp-lt-sm) { .hn-card-feat { grid-column: span 1; grid-template-columns: 1fr; } }
.hn-card-feat:hover { box-shadow: var(--sh2); transform: translateY(-3px); }
.hn-card-feat__img { position: relative; overflow: hidden; aspect-ratio: 16/9; }
.hn-card-feat__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.hn-card-feat:hover .hn-card-feat__img img { transform: scale(1.04); }
.hn-card-feat__body { padding: 32px 28px; display: flex; flex-direction: column; justify-content: center; }
@media (--bp-lt-sm) { .hn-card-feat__body { padding: 20px; } }

/* ---- Card thường ---- */
.hn-card {
    background: var(--color-bg-primary); border-radius: var(--rl); overflow: hidden;
    box-shadow: var(--sh1); transition: var(--tr);
    position: relative; display: flex; flex-direction: column;
}
.hn-card:hover { box-shadow: var(--sh2); transform: translateY(-4px); }
.hn-card__img { position: relative; overflow: hidden; aspect-ratio: 16/9; flex-shrink: 0; }
.hn-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.hn-card:hover .hn-card__img img { transform: scale(1.05); }

/* Badge danh mục */
.hn-badge {
    position: absolute; top: 12px; left: 12px; z-index: 1;
    background: var(--hr); color: #fff;
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    padding: 3px 9px; border-radius: 4px;
}
/* Badge color variants */
.hn-badge--blue   { background: #0055B3; }
.hn-badge--green  { background: #00875A; }
.hn-badge--orange { background: #C95F00; }
.hn-badge--purple { background: #6B21A8; }
.hn-badge--dark   { background: #333; }

.hn-card__body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.hn-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.hn-card__cat  { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--hr); text-transform: uppercase; letter-spacing: var(--tracking-wider); }
.hn-card__date { font-size: var(--text-xs); color: var(--ht); display: flex; align-items: center; gap: 4px; }
.hn-card__title {
    font-family: var(--font-heading);
    font-size: var(--text-h4); font-weight: var(--weight-bold); color: var(--hd); line-height: var(--leading-snug);
    margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    transition: color .2s;
}
.hn-card:hover .hn-card__title, .hn-card-feat:hover .hn-card__title { color: var(--hb); }
.hn-card__excerpt {
    font-size: var(--text-sm); color: var(--ht); line-height: var(--leading-normal);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 14px; flex: 1;
}
.hn-card__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hbr);
    position: relative; z-index: 2;
}
.hn-card__read { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-text-link)!important; text-transform: uppercase; letter-spacing: var(--tracking-wide); text-decoration: none; display: flex; align-items: center; gap: 5px; transition: gap .2s; }
.hn-card__read:hover { gap: 9px; }
.hn-card__uu-dai { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--hr)!important; text-decoration: none; display: flex; align-items: center; gap: 4px; }
.hn-card__uu-dai:hover { opacity: .8; }

/* Stretched link toàn card */
.hn-slink { position: absolute; inset: 0; z-index: 1; }

/* ==== FEATURED card title lớn hơn ==== */
.hn-feat-title { font-size: var(--text-h3)!important; -webkit-line-clamp: 3!important; }
.hn-feat-excerpt { -webkit-line-clamp: 3!important; }

/* ==== PAGINATION ==== */
.hn-pagi {
    margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--hbr);
    display: flex; justify-content: center;
}
.hn-pagi .pagination { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.hn-pagi .page-item .page-link {
    display: flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 10px;
    border: 1.5px solid var(--hbr); border-radius: var(--r);
    font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--hd); background: var(--color-bg-primary);
    text-decoration: none; transition: var(--tr);
}
.hn-pagi .page-item .page-link:hover { background: var(--hb); color: #fff; border-color: var(--hb); }
.hn-pagi .page-item.active .page-link { background: var(--hr); color: #fff; border-color: var(--hr); }

/* ==== EMPTY STATE ==== */
.hn-empty { text-align: center; padding: 80px 20px; }
.hn-empty i { font-size: 52px; color: #ddd; display: block; margin-bottom: 16px; }
.hn-empty h3 { font-family: var(--font-heading); font-size: var(--text-h3); color: var(--ht); margin-bottom: 8px; }
.hn-empty p  { font-size: var(--text-sm); color: var(--ht); }

/* ==== SIDEBAR ==== */
.hn-sidebar { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 20px; }
.hn-sbox { background: var(--color-bg-primary); border: 1px solid var(--hbr); border-radius: var(--rl); overflow: hidden; box-shadow: var(--sh1); }
.hn-sbox__head { background: var(--hb); padding: 14px 18px; display: flex; align-items: center; gap: 10px; }
.hn-sbox__head h3 { font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin: 0; color: #fff; }
.hn-sbox__head i  { font-size: 15px; color: var(--hr); }
.hn-sbox__body { padding: 18px; }

/* Form sidebar */
.hn-fg { margin-bottom: 12px; }
.hn-fg label { display: block; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--ht); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: 5px; }
.hn-fc {
    width: 100%; border: 1.5px solid var(--hbr); border-radius: var(--r);
    padding: 10px 12px; font-size: var(--text-sm); color: var(--hd);
    background: var(--hg); transition: var(--tr); appearance: none;
}
.hn-fc:focus { outline: none; border-color: var(--hb); background: #fff; box-shadow: 0 0 0 3px rgba(0,47,108,.1); }
.hn-fc::placeholder { color: #bbb; }
.hn-submit {
    width: 100%; background: var(--hr); color: #fff; border: none;
    border-radius: var(--r); padding: 13px; font-size: var(--text-xs); font-weight: var(--weight-bold);
    text-transform: uppercase; letter-spacing: var(--tracking-wide); cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    transition: var(--tr); text-decoration: none;
}
.hn-submit:hover { background: var(--color-red-700); transform: translateY(-1px); box-shadow: var(--shadow-red); color:#fff; }

/* Promo banner sidebar */
.hn-promo {
    background:
        linear-gradient(140deg, rgba(0,47,108,.82), rgba(0,74,173,.75)),
        url('/public/upload/07-ui-icons-logos/backgrounds/bg-mobile00002.jpg');
    background-size: cover;
    background-position: center;
    padding: 22px 18px; text-align: center; position: relative; overflow: hidden;
}
.hn-promo::before {
    content:''; position: absolute; top:-24px; right:-24px;
    width:80px; height:80px; background: rgba(255,255,255,.06); border-radius: 50%;
}
.hn-promo-tag {
    font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase;
    color: var(--hr); border: 1px solid rgba(228,0,43,.4); border-radius: 4px;
    padding: 3px 10px; display: inline-block; margin-bottom: 10px;
}
.hn-promo-title { font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--weight-extrabold); color: #fff; line-height: var(--leading-snug); margin-bottom: 6px; }
.hn-promo-sub   { font-size: var(--text-sm); color: rgba(255,255,255,.72); margin-bottom: 18px; line-height: var(--leading-normal); }
.hn-promo-cta {
    display: block; background: var(--hr); color: #fff!important;
    padding: 10px 16px; border-radius: var(--r);
    font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide);
    text-decoration: none; transition: var(--tr);
}
.hn-promo-cta:hover { background: var(--color-red-700); color:#fff!important; }

/* ==== SIDEBAR WIDGET EXTRAS ==== */

/* Header đỏ — widget Liên hệ */
.hn-sbox__head--red { background: var(--hr); }
.hn-sbox__head--red i { color: #fff; }

/* Widget 1: Danh mục list */
.hn-cat-list { list-style: none; padding: 0; margin: 0; }
.hn-cat-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 0; border-bottom: 1px solid var(--hbr);
    gap: 8px;
}
.hn-cat-item:last-child { border-bottom: none; }
.hn-cat-item__link {
    display: flex; align-items: center; gap: 7px;
    font-size: var(--text-sm); color: var(--hd); text-decoration: none;
    flex: 1; min-width: 0; transition: color .2s;
}
.hn-cat-item__link:hover { color: var(--hb); }
.hn-cat-item__link.is-active { color: var(--hr); font-weight: 700; }
.hn-cat-item__link svg { flex-shrink: 0; opacity: .55; }
.hn-cat-item__link.is-active svg { opacity: 1; color: var(--hr); }
.hn-cat-count {
    flex-shrink: 0;
    font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--ht);
    background: var(--hg); border: 1px solid var(--hbr);
    border-radius: 20px; padding: 2px 8px; min-width: 22px; text-align: center;
    transition: background .2s, color .2s;
}
.hn-cat-item__link.is-active ~ .hn-cat-count {
    background: var(--hr); color: #fff; border-color: var(--hr);
}

/* Widget 3: Nhận tin — dark box */
.hn-newsletter {
    background: linear-gradient(145deg, #111 0%, #1e0005 60%, #3a0010 100%);
    padding: 22px 18px; position: relative; overflow: hidden;
    border-radius: var(--rl);
}
.hn-newsletter::before {
    content: ''; position: absolute; top: -30px; right: -30px;
    width: 90px; height: 90px;
    background: rgba(228,0,43,.15); border-radius: 50%;
}
.hn-newsletter__tag {
    font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase;
    color: var(--hr); border: 1px solid rgba(228,0,43,.5); border-radius: 4px;
    padding: 3px 10px; display: inline-block; margin-bottom: 10px;
}
.hn-newsletter__title {
    font-family: var(--font-heading);
    font-size: var(--text-h4); font-weight: var(--weight-extrabold); color: #fff;
    line-height: var(--leading-snug); margin-bottom: 6px;
}
.hn-newsletter__sub {
    font-size: var(--text-sm); color: rgba(255,255,255,.65);
    margin-bottom: 16px; line-height: var(--leading-normal);
}
.hn-newsletter .hn-fc {
    background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2);
    color: #fff;
}
.hn-newsletter .hn-fc::placeholder { color: rgba(255,255,255,.4); }
.hn-newsletter .hn-fc:focus {
    background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.5);
    box-shadow: 0 0 0 3px rgba(228,0,43,.25);
}

/* Widget 4: Đặt lịch CTA */
.hn-dlbd { text-align: center; padding: 6px 0 2px; }
.hn-dlbd__icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(0,47,108,.08);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px; color: var(--hb);
}
.hn-dlbd__title { font-family: var(--font-heading); font-size: var(--text-h4); font-weight: var(--weight-extrabold); color: var(--hd); margin-bottom: 6px; }
.hn-dlbd__sub {
    font-size: var(--text-sm); color: var(--ht); line-height: var(--leading-normal); margin-bottom: 16px;
}
.hn-dlbd__cta {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    background: var(--hb); color: #fff !important;
    padding: 12px 18px; border-radius: var(--r);
    font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide);
    text-decoration: none; transition: var(--tr);
}
.hn-dlbd__cta:hover { background: #001f4d; transform: translateY(-2px); box-shadow: var(--sh2); color: #fff !important; }

/* ==== RESPONSIVE nhỏ ==== */
@media (--bp-lt-md) {
    .hn-hero { min-height: 320px; }
    .hn-hero__body { padding: 72px 0 48px; }
    .hn-sidebar { position: static; }
    .hn-intro__panel { grid-template-columns: 1fr; padding: 20px; }
    .hn-links-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .hn-hero__body { padding: 64px 0 40px; }
    .hn-hero__eyebrow { margin-bottom: 16px; }
    .hn-hero__sub {
        font-size: var(--text-sm);
        margin-bottom: 24px;
    }
    .hn-hero__ctas {
        gap: 10px;
    }
    .hn-btn {
        width: 100%;
        justify-content: center;
    }
    .hn-main {
        padding: 32px 0 56px;
    }
    .hn-main .hn-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .hn-card,
    .hn-card-feat {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        grid-column: 1 / -1;
    }
    .hn-card__body,
    .hn-card-feat__body {
        padding: 16px;
    }
    .hn-card__title,
    .hn-feat-title {
        font-size: 1.0625rem !important;
    }
    .hn-card__excerpt,
    .hn-feat-excerpt {
        -webkit-line-clamp: 3;
    }
    .hn-filter__cnt {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 991px) {
    .hn-main .hn-layout {
        grid-template-columns: 1fr;
    }

    .hn-sidebar {
        position: static;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .hn-sidebar > * ,
    .hn-sbox,
    .hn-sbox__body,
    .hn-sbox__head {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}

@media (--bp-lt-lg) {
    .hn-intro__panel { grid-template-columns: 1fr; }
    .hn-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}