/* ================================================================
   HOMEPAGE.CSS  –  NineEdu LMS  |  IMAGE_02 spec
================================================================ */

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  --red:        #D32F2F;
  --red-hover:  #B71C1C;
  --gold:       #FFD54F;
  --mil-green:  #1A2E1A;
  --navy:       #0D1B2A;
  --navy-lt:    #12263A;
  --mb-blue:    #1757B2;
  --page-bg:    #F5F6F8;
  --card-bg:    #FFFFFF;
  --text:       #333333;
  --text-muted: #777777;
  --border:     #E5E5E5;
  --shadow-xs:  0 1px 3px rgba(16,24,40,.04), 0 1px 2px rgba(16,24,40,.06);
  --shadow-sm:  0 2px 8px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
  --shadow-md:  0 8px 24px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.06);
  --radius:     12px;
  --radius-sm:  8px;
}

/* ── RESET ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Segoe UI',system-ui,Arial,sans-serif;
  background:var(--page-bg);
  color:var(--text);
  font-size:15px;
  line-height:1.62;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }

/* ── CONTAINER – 1200px centered ────────────────────────────── */
/* Override Bootstrap container to always 1200px */
.container {
  max-width:1200px !important;
  padding-left:16px !important;
  padding-right:16px !important;
}

/* ================================================================
   HEADER
================================================================ */
.hp-header {
  background:#fffdf5;
  border-bottom:3px solid var(--red);
  padding:.6rem 0;
}
.hp-hd-inner { display:flex; align-items:center; gap:1rem; }
.hp-hd-logo  { height:64px; width:64px; object-fit:contain; flex-shrink:0; }
.hp-hd-brand { flex:1; min-width:0; }
.hp-hd-title {
  font-size:1.55rem; font-weight:900; color:var(--red);
  text-transform:uppercase; letter-spacing:.02em; line-height:1.15;
}
.hp-hd-sub { font-size:.72rem; color:#888; text-transform:uppercase; letter-spacing:.05em; margin-top:.15rem; }
.hp-hd-right { display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.hp-hd-date  { font-size:.78rem; color:#999; white-space:nowrap; }
.hp-search-form {
  display:flex; align-items:center;
  border:1px solid #ddd; border-radius:20px;
  overflow:hidden; background:#fff;
}
.hp-search-form input {
  border:none; outline:none;
  padding:.3rem .75rem; font-size:.8rem; width:150px; background:transparent;
}
.hp-search-form button {
  background:none; border:none;
  padding:.3rem .6rem; color:#999; cursor:pointer;
  font-size:.88rem; transition:color .15s;
}
.hp-search-form button:hover { color:var(--red); }

/* ================================================================
   NAVIGATION
================================================================ */
.hp-nav {
  background:var(--red);
  position:sticky; top:0; z-index:1030;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.hp-nav .navbar-nav { flex-wrap:nowrap; }
.hp-nav .nav-link {
  color:#fff !important; font-size:.78rem; font-weight:700;
  text-transform:uppercase; padding:.7rem .85rem;
  letter-spacing:.01em; white-space:nowrap;
  position:relative;
  transition:color .15s;
}
/* Underline gold trượt từ giữa ra khi hover */
.hp-nav .nav-link::after {
  content:''; position:absolute; left:50%; right:50%; bottom:4px;
  height:2px; background:var(--gold); border-radius:2px;
  transition:left .22s ease, right .22s ease;
}
.hp-nav .nav-link:hover { color:var(--gold) !important; }
.hp-nav .nav-link:hover::after,
.hp-nav .nav-link.active-page::after { left:.85rem; right:.85rem; }
.hp-nav .dropdown-menu {
  border:0; border-radius:0 0 var(--radius-sm) var(--radius-sm);
  box-shadow:var(--shadow-md); font-size:.83rem; min-width:220px;
}
.hp-nav .dropdown-item { padding:.5rem 1.1rem; }
.hp-nav .dropdown-item:hover { background:var(--page-bg); color:var(--red); }

/* ================================================================
   HEADER MOBILE  (logo + tên + nút ☰, sticky neo khi cuộn)
================================================================ */
.hp-header-mobile {
  background:#fffdf5;
  border-bottom:3px solid var(--red);
  padding:.5rem .75rem;
  display:flex; align-items:center; gap:.65rem;
  position:sticky; top:0; z-index:1031;
}
.hp-hdm-brand {
  flex:1; min-width:0;
  display:flex; align-items:center; gap:.5rem;
  text-decoration:none;
}
.hp-hdm-logo { height:42px; width:42px; object-fit:contain; flex-shrink:0; }
.hp-hdm-title {
  font-size:.84rem; font-weight:900; color:var(--red);
  text-transform:uppercase; letter-spacing:.01em; line-height:1.2;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hp-hdm-toggler {
  flex-shrink:0;
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  background:var(--red); color:#fff;
  border:none; border-radius:9px;
  font-size:1.45rem; line-height:1;
  box-shadow:0 2px 8px rgba(211,47,47,.3);
  transition:background .15s, box-shadow .15s;
}
.hp-hdm-toggler:hover,
.hp-hdm-toggler[aria-expanded="true"] {
  background:var(--red-hover);
  box-shadow:0 3px 12px rgba(183,28,28,.4);
}

/* Nav trên mobile: bỏ thanh đỏ riêng, chỉ là khu menu xổ xuống (sticky theo header) */
@media (max-width:991.98px) {
  .hp-nav {
    background:transparent;
    box-shadow:none;
    position:sticky; top:54px; z-index:1030;
  }
  .hp-nav > .container { padding:0; }
  .hp-nav .navbar-collapse {
    background:var(--red);
    border-bottom:3px solid var(--gold);
    box-shadow:0 8px 20px rgba(0,0,0,.25);
    padding:.4rem .9rem .6rem;
  }
  .hp-nav .navbar-nav { margin:0 !important; }
  .hp-nav .nav-link {
    padding:.6rem .5rem !important;
    border-left:3px solid transparent;
  }
  .hp-nav .nav-link::after { display:none; }   /* tắt underline trượt trên mobile */
  .hp-nav .nav-link:hover { border-left-color:var(--gold); }
  .hp-nav .nav-link.active-page { border-left-color:var(--gold); }
}

/* ================================================================
   TICKER
================================================================ */
.hp-ticker {
  background:#fff;
  border-top:1px solid #eaeaea;
  border-bottom:1px solid #eaeaea;
  padding:.3rem 0;
  font-size:.81rem; color:#555; overflow:hidden;
}
.hp-ticker-lbl {
  background:var(--red); color:#fff; padding:.08rem .65rem;
  border-radius:3px; font-size:.68rem; font-weight:900;
  letter-spacing:.05em; white-space:nowrap; flex-shrink:0;
}
.hp-ticker-text a { color:#333; }
.hp-ticker-sep { margin:0 1.2rem; color:#ccc; }
.hp-ticker-track { overflow:hidden; flex:1; }
.hp-ticker-text {
  display:inline-block; white-space:nowrap;
  animation:marquee 70s linear infinite;
}
.hp-ticker-text:hover { animation-play-state:paused; }
@keyframes marquee { from { margin-left:100%; } to { margin-left:-100%; } }
.hp-ticker-text a { color:#fff; }
.hp-ticker-text a:hover { text-decoration:underline; }
.hp-ticker-sep { margin:0 1.2rem; opacity:.4; }

/* ================================================================
   HERO  –  3 columns as rounded cards, gap-separated
================================================================ */
.hp-hero {
  background:var(--page-bg);
  border-bottom: 1px solid var(--border);
  padding: .85rem 0;
}

/* Row: gap between cards */
.hp-hero-row {
  display: flex;
  align-items: stretch;
  gap: .7rem;
  min-height: 280px;
}

/* ── Col trái ── */
.hp-hero-left {
  width: 24%;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #e8eaed;
  border-radius: 10px;
  padding: .85rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 5px rgba(0,0,0,.05);
}
.hp-hero-news-lbl {
  font-size:.68rem; font-weight:900; color:var(--red);
  text-transform:uppercase; letter-spacing:.06em;
  border-left:3px solid var(--red); padding-left:.4rem;
  display:block; margin-bottom:.55rem; flex-shrink:0;
}
.hp-hero-news-lbl i { margin-right:.25rem; }
.hp-hero-item {
  display:flex; gap:.35rem; padding:.34rem 0;
  border-bottom:1px dashed var(--border);
}
.hp-hero-item:last-child { border-bottom:none; }
.hp-hero-dot { color:var(--red); font-size:.48rem; margin-top:.46rem; flex-shrink:0; }
.hp-hero-title {
  font-size:.8rem; font-weight:600; color:var(--text); line-height:1.42;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; flex:1;
}
.hp-hero-title:hover { color:var(--red); }
.hp-hero-date { font-size:.66rem; color:var(--text-muted); margin-top:.06rem; }
/* "Xem tất cả" link ở cuối col trái */
.hp-hero-see-all {
  display:block; margin-top:auto; padding-top:.6rem;
  font-size:.72rem; font-weight:700; color:var(--red);
  border-top:1px solid var(--border); flex-shrink:0;
}
.hp-hero-see-all:hover { text-decoration:underline; }

/* ── Col giữa ── */
.hp-hero-center {
  flex: 1;
  background: #fff;
  border: 1px solid #e8eaed;
  border-radius: 10px;
  padding: .85rem .75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-shadow: 0 1px 5px rgba(0,0,0,.05);
  overflow: hidden;
}
.hp-carousel { display:block; }
.hp-carousel .carousel-item img,
.hp-carousel .slide-ph {
  width:100%; height:215px; object-fit:cover;
  border-radius:var(--radius); display:block;
}
.hp-carousel .slide-ph {
  background:linear-gradient(135deg,#8B0000,var(--red));
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.4); font-size:2.5rem;
}
.hp-carousel .carousel-caption {
  background:linear-gradient(transparent,rgba(0,0,0,.72));
  bottom:0; left:0; right:0; padding:2.5rem 1rem .85rem; text-align:left;
  border-radius:0 0 var(--radius) var(--radius);
}
.hp-carousel .carousel-caption h5 { font-size:.88rem; font-weight:700; margin:0; line-height:1.4; }
.hp-carousel .carousel-indicators [data-bs-target] {
  width:7px; height:7px; border-radius:50%; border:none; opacity:.4;
}
.hp-carousel .carousel-indicators .active { opacity:1; background:var(--gold); }
/* Announcement */
.hp-ann {
  display:flex; gap:.4rem; align-items:flex-start;
  background:#fff8e1; border-left:3px solid var(--gold);
  border-radius:var(--radius-sm); padding:.38rem .65rem;
  font-size:.78rem; color:#5a4200; margin-top:.4rem;
}
.hp-ann i { color:#d4960a; flex-shrink:0; margin-top:.15rem; }
.hp-ann a { color:#5a4200; font-weight:600; }
.hp-ann a:hover { color:var(--red); }

/* ── Col phải ── */
.hp-hero-right {
  width: 24%;
  flex-shrink: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  overflow-y: visible;
}
/* Mỗi widget trong col phải đã có border-radius riêng (hp-lw, hp-ql) */

/* Login widget */
.hp-lw {
  background:#fff; border:1px solid var(--border);
  border-top:3px solid var(--red); border-radius:var(--radius);
  margin-bottom:.42rem; overflow:hidden;
  box-shadow:var(--shadow-xs);
}
.hp-lw-hd {
  background:#fff; color:var(--red); font-size:.72rem;
  font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  padding:.45rem .85rem; display:flex; align-items:center; gap:.3rem;
  border-bottom:1px solid var(--border);
}
.hp-lw-hd i { color:var(--red); }
.hp-lw-body { padding:.6rem .8rem; }
.hp-lw-input {
  width:100%; padding:.32rem .55rem; font-size:.79rem;
  border:1px solid #e0e0e0; border-radius:var(--radius-sm);
  margin-bottom:.32rem; outline:none; color:var(--text);
  background:#fafafa; transition:border-color .15s, background .15s;
}
.hp-lw-input:focus { border-color:var(--red); background:#fff; box-shadow:0 0 0 2px rgba(211,47,47,.08); }
.hp-lw-btn {
  width:100%; border:none; padding:.38rem;
  font-size:.78rem; font-weight:800; border-radius:var(--radius-sm);
  cursor:pointer; transition:all .18s;
  text-transform:uppercase; letter-spacing:.04em;
  /* Đỏ giữ nguyên cho action button – đây là CTA quan trọng */
  background:var(--red); color:#fff;
  box-shadow:0 2px 6px rgba(211,47,47,.3);
}
.hp-lw-btn:hover { background:var(--red-hover); box-shadow:0 3px 10px rgba(183,28,28,.35); transform:translateY(-1px); }
.hp-lw-hint { font-size:.65rem; color:#aaa; text-align:center; margin-top:.28rem; font-style:italic; }
.hp-lw-mgmt { display:block; text-align:center; font-size:.68rem; color:var(--red); margin-top:.3rem; font-weight:600; }
.hp-lw-mgmt:hover { color:var(--red); text-decoration:underline; }
.hp-lw-alert {
  background:#fdecea; color:#b71c1c; border:1px solid #f5c6cb;
  border-radius:var(--radius-sm); padding:.28rem .45rem;
  font-size:.71rem; display:flex; gap:.25rem; margin-bottom:.3rem;
}
.hp-lw-welcome { font-size:.82rem; font-weight:600; color:var(--text); }
.hp-lw-actions { display:flex; gap:.3rem; margin-top:.38rem; }
.hp-lw-act { flex:1; text-align:center; padding:.3rem; font-size:.73rem; font-weight:700; border-radius:var(--radius-sm); }
.hp-lw-act-red { background:var(--red); color:#fff; box-shadow:0 2px 6px rgba(211,47,47,.25); }
.hp-lw-act-red:hover { background:var(--red-hover); color:#fff; }
.hp-lw-logout { width:100%; background:none; border:none; font-size:.68rem; color:#aaa; cursor:pointer; margin-top:.28rem; text-decoration:underline; display:block; text-align:center; }
.hp-lw-logout:hover { color:var(--red); }

/* Quick-link cards – white, icon accent only */
.hp-ql {
  display:flex; align-items:center; gap:.6rem;
  padding:.65rem .85rem; border-radius:var(--radius);
  margin-bottom:.38rem; text-decoration:none;
  background:#fff; border:1px solid #eaeaea;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  transition:box-shadow .18s, transform .12s, border-color .18s;
}
.hp-ql:hover { box-shadow:0 4px 14px rgba(0,0,0,.09); transform:translateY(-1px); border-color:#d5d5d5; }
.hp-ql-icon {
  width:36px; height:36px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; flex-shrink:0;
}
.hp-ql-red   .hp-ql-icon { background:#fde8e8; color:#D32F2F; }
.hp-ql-green .hp-ql-icon { background:#e6f4ea; color:#2e7d32; }
.hp-ql-navy  .hp-ql-icon { background:#e3edf9; color:#1565c0; }
.hp-ql-teal  .hp-ql-icon { background:#e0f4f7; color:#00838f; }
.hp-ql-darkgreen .hp-ql-icon { background:#e8f5e9; color:#2e7d32; }
.hp-ql-title {
  font-size:.79rem; font-weight:700; text-transform:uppercase;
  display:block; line-height:1.25; color:#2c2c2c;
}
.hp-ql-sub { font-size:.67rem; display:block; margin-top:.03rem; color:#999; }
.hp-ql:hover .hp-ql-title { color:var(--red); }

/* Quick-link NỔI BẬT (gradient màu chủ đề, chữ trắng) */
.hp-ql-feature {
  border:none; position:relative;
  padding:.8rem 1rem;
}
.hp-ql-feature .hp-ql-title { color:#fff; font-size:.85rem; }
.hp-ql-feature .hp-ql-sub   { color:rgba(255,255,255,.85); }
.hp-ql-feature .hp-ql-icon  { background:rgba(255,255,255,.22) !important; color:#fff !important; }
.hp-ql-feature:hover .hp-ql-title { color:#fff; }
.hp-ql-arrow {
  margin-left:auto; font-size:1.15rem; color:rgba(255,255,255,.85);
  flex-shrink:0; transition:transform .18s;
}
.hp-ql-feature:hover .hp-ql-arrow { transform:translateX(3px); color:#fff; }

.hp-ql-feature-red {
  background:linear-gradient(135deg,#D32F2F 0%,#B71C1C 100%);
  box-shadow:0 4px 14px rgba(211,47,47,.34);
}
.hp-ql-feature-red:hover { box-shadow:0 8px 22px rgba(211,47,47,.46); }
.hp-ql-feature-teal {
  background:linear-gradient(135deg,#00897b 0%,#00695c 100%);
  box-shadow:0 4px 14px rgba(0,137,123,.32);
}
.hp-ql-feature-teal:hover { box-shadow:0 8px 22px rgba(0,137,123,.44); }
.hp-ql-feature-green {
  background:linear-gradient(135deg,#2e7d32 0%,#1b5e20 100%);
  box-shadow:0 4px 14px rgba(46,125,50,.32);
}
.hp-ql-feature-green:hover { box-shadow:0 8px 22px rgba(46,125,50,.44); }
.hp-ql-feature-navy {
  background:linear-gradient(135deg,#1565c0 0%,#0d3d82 100%);
  box-shadow:0 4px 14px rgba(21,101,192,.32);
}
.hp-ql-feature-navy:hover { box-shadow:0 8px 22px rgba(21,101,192,.44); }

/* Comm banner C1/C2 in hero right */
.hp-comm-c-card {
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
  margin-bottom:.35rem; box-shadow:var(--shadow-xs);
  transition:box-shadow .15s;
}
.hp-comm-c-card:hover { box-shadow:var(--shadow-md); }
.hp-comm-c-card img { width:100%; max-height:200px; object-fit:cover; display:block; }
.hp-comm-c-body { padding:.5rem .75rem; display:flex; align-items:center; gap:.45rem; }
.hp-comm-c-label { font-size:.71rem; color:var(--text-muted); flex:1; }

/* ================================================================
   BANNER B  –  centered campaign card, max-width 880px
================================================================ */
.hp-banner-b {
  background:#F8FAFC;
  padding:.85rem 0 1rem;
}
/* The <div class="container"> wraps this — inner link centered at 880px */
.hp-banner-b-link {
  display:block;
  width:100%;
  height:84px;
  border-radius:8px;
  border:1px solid #E5E7EB;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  overflow:hidden;
  transition:box-shadow .15s, opacity .15s;
}
.hp-banner-b-link:hover { box-shadow:0 4px 14px rgba(0,0,0,.08); opacity:.96; }
.hp-banner-b-img {
  width:100%; height:100%;
  display:block;
  object-fit:cover; object-position:center;
}

/* ================================================================
   SECTION HEADER  (shared)
================================================================ */
.hp-sec-hd {
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:2px solid var(--red);
  padding-bottom:.4rem; margin-bottom:1rem;
}
.hp-sec-title {
  font-size:.88rem; font-weight:900; color:var(--red);
  text-transform:uppercase; letter-spacing:.04em;
  display:flex; align-items:center; gap:.35rem;
}
.hp-sec-more {
  font-size:.7rem; font-weight:700; color:var(--red);
  border:1.5px solid var(--red); padding:.18rem .65rem;
  border-radius:var(--radius-sm); transition:all .15s;
}
.hp-sec-more:hover { background:var(--red); color:#fff; }

/* ================================================================
   TIN TỨC – SỰ KIỆN  (ns = news section, modern card design)
================================================================ */
.ns-section { padding:2.25rem 0; background:var(--page-bg); }

.ns-heading {
  display:flex; align-items:center; gap:.55rem;
  border-bottom:2px solid var(--red);
  padding-bottom:.55rem; margin-bottom:1.1rem;
}
.ns-heading-bar { width:4px; height:18px; background:var(--red); border-radius:2px; flex-shrink:0; }
.ns-heading-title {
  font-size:.92rem; font-weight:900; color:var(--red);
  text-transform:uppercase; letter-spacing:.04em; margin:0; flex:1;
  display:flex; align-items:center; gap:.4rem;
}
.ns-more {
  font-size:.75rem; font-weight:700; color:var(--red);
  border:1.5px solid var(--red); padding:.2rem .7rem;
  border-radius:20px; text-decoration:none; white-space:nowrap;
  display:flex; align-items:center; gap:.25rem;
  transition:all .15s;
}
.ns-more:hover { background:var(--red); color:#fff; }

.ns-card {
  background:#fff; border-radius:10px;
  box-shadow:0 2px 14px rgba(0,0,0,.08);
  overflow:hidden; height:100%;
  display:flex; flex-direction:column;
  border-top:3px solid var(--red);
  transition:box-shadow .22s, transform .18s;
}
.ns-card:hover { box-shadow:0 8px 28px rgba(0,0,0,.14); transform:translateY(-4px); }
.ns-accent-red   { border-top-color:#D32F2F; }
.ns-accent-navy  { border-top-color:#1565c0; }
.ns-accent-green { border-top-color:#2e7d32; }

.ns-card-img-wrap {
  position:relative; display:block; overflow:hidden; flex-shrink:0;
  text-decoration:none;
}
.ns-card-img {
  width:100%; height:190px; object-fit:cover; display:block;
  background:#edf0f4; transition:transform .4s;
}
.ns-card:hover .ns-card-img { transform:scale(1.05); }
.ns-card-ph {
  width:100%; height:190px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; color:#555;
}
.ns-accent-red   .ns-card-ph { background:linear-gradient(135deg,#fde8e8 0%,#fbc4c4 100%); color:#c62828; }
.ns-accent-navy  .ns-card-ph { background:linear-gradient(135deg,#e3edf9 0%,#c8dcf5 100%); color:#1565c0; }
.ns-accent-green .ns-card-ph { background:linear-gradient(135deg,#e8f5e9 0%,#c8e6c9 100%); color:#2e7d32; }
.ns-card-ph i { font-size:2rem; opacity:.8; }
.ns-card-cat {
  position:absolute; top:10px; left:10px;
  background:rgba(0,0,0,.52); color:#fff;
  font-size:.62rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em;
  padding:.2rem .6rem; border-radius:4px; line-height:1.4;
  backdrop-filter:blur(4px);
}
.ns-card-body {
  padding:14px 16px 12px;
  display:flex; flex-direction:column; gap:8px; flex:1;
}
.ns-card-title {
  font-size:.9rem; font-weight:800; color:#1a1a1a; line-height:1.45;
  text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ns-card-title:hover { color:var(--red); }
.ns-card-summary {
  font-size:.78rem; color:#666; line-height:1.55; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ns-sub-list { display:flex; flex-direction:column; border-top:1px solid #f0f0f0; padding-top:6px; }
.ns-sub-item {
  display:flex; align-items:flex-start; gap:.3rem;
  padding:.28rem 0; border-bottom:1px dashed #ebebeb;
  text-decoration:none; color:#444; font-size:.78rem; line-height:1.4;
  transition:color .12s;
}
.ns-sub-item:last-child { border-bottom:none; }
.ns-sub-item i { color:var(--red); font-size:.6rem; margin-top:.3rem; flex-shrink:0; }
.ns-sub-item:hover { color:var(--red); }
.ns-card-date {
  font-size:.68rem; color:#aaa; margin-top:auto;
  display:flex; align-items:center; gap:.25rem;
}

/* ================================================================
   CONTENT + SIDEBAR  (Bootstrap col-lg-8 / col-lg-4)
================================================================ */
.hp-content-section { background:var(--page-bg); padding:2.25rem 0; }

.hp-cat-block {
  background:#fff;
  border:1px solid #e8eaed;
  border-left:3px solid #ccc;
  border-radius:0 var(--radius) var(--radius) 0;
  margin-bottom:1.1rem; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.055);
  transition:box-shadow .2s;
}
.hp-cat-block:hover { box-shadow:0 4px 16px rgba(0,0,0,.09); }

/* Accent colour variants */
.hp-cat-red    { --cat-c:#D32F2F; --cat-bg:#fff5f5; --cat-bd:#f5c0c0; }
.hp-cat-blue   { --cat-c:#1565c0; --cat-bg:#f0f5ff; --cat-bd:#bad3f5; }
.hp-cat-green  { --cat-c:#2e7d32; --cat-bg:#f1faf2; --cat-bd:#b2dfb4; }
.hp-cat-orange { --cat-c:#e65100; --cat-bg:#fff8f0; --cat-bd:#ffcc99; }
.hp-cat-teal   { --cat-c:#00838f; --cat-bg:#f0fafb; --cat-bd:#9ddce2; }
.hp-cat-purple { --cat-c:#6a1b9a; --cat-bg:#f8f0ff; --cat-bd:#d7b3f0; }

.hp-cat-red,.hp-cat-blue,.hp-cat-green,
.hp-cat-orange,.hp-cat-teal,.hp-cat-purple {
  border-left-color:var(--cat-c);
}

.hp-cat-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:.52rem .9rem;
  background:linear-gradient(90deg,var(--cat-bg,#fafafa) 0%,#fff 65%);
  border-bottom:1px solid var(--cat-bd,#eee);
}
.hp-cat-hd h3 {
  font-size:.8rem; font-weight:900; color:var(--cat-c,var(--red));
  text-transform:uppercase; letter-spacing:.04em; margin:0;
  display:flex; align-items:center; gap:.3rem;
}
.hp-cat-hd h3 i { font-size:.72rem; }
.hp-cat-more {
  font-size:.67rem; font-weight:700; color:var(--cat-c,var(--red));
  border:1.5px solid var(--cat-bd,#f5c0c0); padding:.13rem .55rem;
  border-radius:20px; transition:all .15s; white-space:nowrap;
  background:#fff;
}
.hp-cat-more:hover { background:var(--cat-c,var(--red)); color:#fff; border-color:var(--cat-c,var(--red)); }
.hp-art-row {
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.6rem .9rem; border-bottom:1px solid #f5f5f5;
  transition:background .12s;
  text-decoration:none;
}
.hp-art-row:last-child { border-bottom:none; }
.hp-art-row:hover { background:var(--cat-bg,#f8f8f8); }
.hp-art-thumb {
  width:84px; height:56px; object-fit:cover;
  border-radius:var(--radius-sm); flex-shrink:0;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.hp-art-thumb-ph {
  width:84px; height:56px;
  background:linear-gradient(135deg, var(--cat-bg,#f0f2f5) 0%, #fff 100%);
  border:1px solid var(--cat-bd,#e8eaed);
  border-radius:var(--radius-sm); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--cat-c,#bbb); font-size:1.15rem;
}
.hp-art-info { flex:1; min-width:0; }
.hp-art-title {
  font-size:.8rem; font-weight:600; color:#2c2c2c; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hp-art-row:hover .hp-art-title { color:var(--red); }
.hp-art-date { font-size:.66rem; color:#bbb; margin-top:.18rem; display:flex; align-items:center; gap:.22rem; }

/* ── SIDEBAR wrapper: sticky để lấp khoảng trống khi cuộn ──── */
.hp-sb-sticky {
  position:sticky; top:80px;
}

/* ── SIDEBAR widget: bài viết mới nhất (list số thứ tự) ────── */
.hp-sb-widget {
  background:#fff; border:1px solid #e8eaed;
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 1px 5px rgba(0,0,0,.05);
  margin-top:.9rem;
}
.hp-sb-widget-hd {
  background:linear-gradient(90deg,#fff5f5 0%,#fff 65%);
  border-bottom:2px solid var(--red);
  padding:.55rem .9rem;
  font-size:.78rem; font-weight:900; color:var(--red);
  text-transform:uppercase; letter-spacing:.04em;
  display:flex; align-items:center; gap:.35rem;
}
.hp-sb-widget-hd i { font-size:.78rem; }
.hp-sb-rank-item {
  display:flex; align-items:flex-start; gap:.55rem;
  padding:.6rem .9rem; border-bottom:1px solid #f5f5f5;
  text-decoration:none; transition:background .12s;
}
.hp-sb-rank-item:last-child { border-bottom:none; }
.hp-sb-rank-item:hover { background:#fafafa; }
.hp-sb-rank-num {
  width:22px; height:22px; border-radius:6px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:900; color:#fff;
  background:linear-gradient(135deg,#bbb,#999);
}
.hp-sb-rank-item:nth-child(1) .hp-sb-rank-num { background:linear-gradient(135deg,#D32F2F,#B71C1C); }
.hp-sb-rank-item:nth-child(2) .hp-sb-rank-num { background:linear-gradient(135deg,#e65100,#bf360c); }
.hp-sb-rank-item:nth-child(3) .hp-sb-rank-num { background:linear-gradient(135deg,#f9a825,#f57f17); }
.hp-sb-rank-body { flex:1; min-width:0; }
.hp-sb-rank-title {
  font-size:.78rem; font-weight:600; color:#2c2c2c; line-height:1.42;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hp-sb-rank-item:hover .hp-sb-rank-title { color:var(--red); }
.hp-sb-rank-date { font-size:.64rem; color:#bbb; margin-top:.2rem; display:flex; align-items:center; gap:.22rem; }

/* ── SIDEBAR CARDS nổi bật (gradient màu chủ đề, chữ trắng) ── */
.hp-sb-feature {
  border:none !important; border-left:none !important;
  color:#fff;
}
.hp-sb-feature .hp-sb-title { color:#fff; }
.hp-sb-feature .hp-sb-sub   { color:rgba(255,255,255,.82); }
.hp-sb-feature .hp-sb-icon  { background:rgba(255,255,255,.22) !important; color:#fff !important; }
.hp-sb-feature::after { color:rgba(255,255,255,.7); }
.hp-sb-feature:hover .hp-sb-title { color:#fff; }
.hp-sb-feature:hover::after { color:#fff; }

.hp-sb-feature-orange {
  background:linear-gradient(135deg,#ef6c00 0%,#e65100 100%) !important;
  box-shadow:0 4px 14px rgba(230,81,0,.32);
}
.hp-sb-feature-orange:hover { box-shadow:0 7px 20px rgba(230,81,0,.42); }
.hp-sb-feature-purple {
  background:linear-gradient(135deg,#7b1fa2 0%,#6a1b9a 100%) !important;
  box-shadow:0 4px 14px rgba(106,27,154,.32);
}
.hp-sb-feature-purple:hover { box-shadow:0 7px 20px rgba(106,27,154,.42); }

/* ── SIDEBAR CARDS  (60px–68px each) ──────────────────────── */
.hp-sb-card {
  display:flex; align-items:center; gap:.55rem;
  padding:10px 13px; border-radius:0 8px 8px 0;
  margin-bottom:8px; background:#fff;
  border:1px solid #e8eaed;
  border-left:3px solid #e0e0e0;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  min-height:58px; overflow:hidden;
  transition:box-shadow .18s, transform .12s, border-left-color .18s;
  text-decoration:none;
}
.hp-sb-card:hover {
  box-shadow:0 4px 14px rgba(0,0,0,.09);
  transform:translateX(2px);
}
/* Left accent per colour */
.hp-sb-card:has(.hp-sb-i-red)     { border-left-color:#D32F2F; }
.hp-sb-card:has(.hp-sb-i-crimson) { border-left-color:#c62828; }
.hp-sb-card:has(.hp-sb-i-green)   { border-left-color:#2e7d32; }
.hp-sb-card:has(.hp-sb-i-blue)    { border-left-color:#1565c0; }
.hp-sb-card:has(.hp-sb-i-teal)    { border-left-color:#00838f; }
.hp-sb-card:has(.hp-sb-i-navy)    { border-left-color:#1565c0; }

.hp-sb-icon {
  width:34px; height:34px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; flex-shrink:0;
}
.hp-sb-i-red     { background:#fde8e8; color:#D32F2F; }
.hp-sb-i-crimson { background:#fce4e4; color:#c62828; }
.hp-sb-i-green   { background:#e8f5e9; color:#2e7d32; }
.hp-sb-i-blue    { background:#e3edf9; color:#1565c0; }
.hp-sb-i-teal    { background:#e0f4f7; color:#00838f; }
.hp-sb-i-navy    { background:#e3edf9; color:#1565c0; }
.hp-sb-title { font-size:.79rem; font-weight:800; color:#2c2c2c; text-transform:uppercase; display:block; line-height:1.2; }
.hp-sb-sub   { font-size:.64rem; color:#aaa; display:block; margin-top:.04rem; }
.hp-sb-card:hover .hp-sb-title { color:var(--red); }
/* Arrow indicator on hover */
.hp-sb-card::after {
  content:'\F285'; font-family:'bootstrap-icons';
  font-size:.7rem; color:#ccc; margin-left:auto; flex-shrink:0;
  transition:color .15s, transform .15s;
}
.hp-sb-card:hover::after { color:var(--red); transform:translateX(2px); }

/* ================================================================
   STATISTICS  –  compact 80–90px total height
================================================================ */
.hp-stats-section {
  background:var(--page-bg);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:.85rem 0;
}
.hp-stat-col { text-align:center; }
.hp-stat-icon { font-size:1.25rem; color:var(--red); margin-bottom:.18rem; display:block; }
.hp-stat-num  { font-size:1.65rem; font-weight:900; color:#1a1a2e; line-height:1; }
.hp-stat-num sup { font-size:.85rem; }
.hp-stat-lbl  { font-size:.7rem; color:var(--text-muted); margin-top:.15rem; }

/* ================================================================
   PARTNER SECTION  –  6 logos per slide
================================================================ */
.hp-partner-section {
  background:#fff;
  border-top:2px solid #f0f0f0;
  padding:1rem 0 1.25rem;
}
.hp-partner-hd {
  display:flex; align-items:center; gap:.5rem;
  margin-bottom:.9rem;
}
.hp-partner-bar { width:3px; height:18px; background:var(--red); border-radius:2px; flex-shrink:0; }
.hp-partner-hd span, .hp-partner-hd {
  font-size:.72rem; font-weight:900; color:#555;
  text-transform:uppercase; letter-spacing:.09em;
}

/* Carousel wrapper */
.hp-partner-carousel-wrap { display:flex; align-items:center; gap:8px; }
.hp-partner-carousel { flex:1; min-width:0; }
.hp-partner-carousel .carousel-item { display:none; }
.hp-partner-carousel .carousel-item.active { display:block; }
.hp-partner-no-slide .carousel-inner { overflow:visible; }

/* Each slide: 6 logos in a row */
.hp-partner-slide {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
}

/* Individual logo card */
.hp-partner-card {
  background:#fff;
  border:1.5px solid #e8eaed;
  border-radius:12px;
  padding:1.1rem .85rem .7rem;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:.5rem;
  min-height:110px;
  text-decoration:none;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
  transition:box-shadow .2s, border-color .2s, transform .18s;
}
.hp-partner-card:hover {
  box-shadow:0 6px 22px rgba(0,0,0,.11);
  border-color:#bfc4cc;
  transform:translateY(-3px);
}
.hp-partner-card img {
  max-height:56px; max-width:120px;
  width:auto; height:auto;
  object-fit:contain;
  transition:opacity .2s;
}
.hp-partner-card:hover img { opacity:1; }
.hp-partner-name {
  font-size:.6rem; color:#aaa; text-align:center;
  line-height:1.3; font-weight:600; letter-spacing:.02em;
  text-transform:uppercase;
  max-width:100%;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* Fallback khi không có ảnh/Clearbit */
.hp-partner-initials {
  width:52px; height:52px; border-radius:10px;
  background:linear-gradient(135deg,#e8eaed,#d0d4da);
  color:#666; font-size:1.1rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  letter-spacing:.04em; text-transform:uppercase; flex-shrink:0;
}

/* Prev / Next buttons */
.hp-partner-prev,
.hp-partner-next {
  flex-shrink:0; width:28px; height:28px; border-radius:50%;
  background:#fff; border:1.5px solid #e0e0e0;
  box-shadow:0 1px 5px rgba(0,0,0,.07);
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; color:#999; cursor:pointer;
  transition:all .15s;
}
.hp-partner-prev:hover,
.hp-partner-next:hover { background:var(--red); color:#fff; border-color:var(--red); box-shadow:0 2px 8px rgba(211,47,47,.28); }

/* ================================================================
   AD BANNER SECTION – Banner đơn vị đồng hành (300×250)
================================================================ */
.hp-adban-section {
  background:#fff;
  border-top:2px solid #f0f0f0;
  padding:1rem 0 1.35rem;
}

/* Header */
.hp-adban-hd {
  display:flex; align-items:center; gap:.5rem;
  margin-bottom:.9rem;
}
.hp-adban-hd span {
  font-size:.72rem; font-weight:900; color:#555;
  text-transform:uppercase; letter-spacing:.09em;
  flex:1;
}
.hp-adban-cta-link {
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.72rem; font-weight:700; color:var(--red);
  text-decoration:none; border:1.5px solid #fbc8c8;
  border-radius:20px; padding:.22rem .75rem;
  transition:background .14s, border-color .14s;
}
.hp-adban-cta-link:hover { background:#fde8e8; border-color:var(--red); }

/* Carousel wrapper */
.hp-adban-carousel {
  position:relative; overflow:hidden;
  padding-bottom:2.2rem; /* space for dots */
}
.hp-adban-track {
  display:flex; gap:1rem;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
/* Each card takes exactly 1/3 of container minus gaps */
.hp-adban-track > .hp-adban-card {
  flex:0 0 calc(33.333% - .68rem);
  min-width:0;
}

/* Nav arrows */
.hp-adban-nav {
  position:absolute; top:50%; transform:translateY(-60%);
  width:36px; height:36px; border-radius:50%;
  background:#fff; border:1.5px solid #e5e7eb;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:5; font-size:1rem; color:#444;
  transition:box-shadow .15s, background .15s;
}
.hp-adban-nav:hover:not(:disabled) { background:#f8f8f8; box-shadow:0 4px 14px rgba(0,0,0,.18); }
.hp-adban-nav:disabled { opacity:.35; cursor:default; }
.hp-adban-nav--prev { left:-18px; }
.hp-adban-nav--next { right:-18px; }

/* Dots */
.hp-adban-dots {
  position:absolute; bottom:0; left:0; right:0;
  display:flex; justify-content:center; gap:.45rem;
}
.hp-adban-dot {
  width:7px; height:7px; border-radius:50%; border:none;
  background:#d1d5db; cursor:pointer; padding:0;
  transition:background .2s, width .2s;
}
.hp-adban-dot.active { background:var(--red); width:20px; border-radius:4px; }

/* ── Banner có ảnh ── */
.hp-adban-card--filled {
  display:block; position:relative;
  border-radius:14px; overflow:hidden;
  aspect-ratio:6/4;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
  text-decoration:none;
  transition:box-shadow .2s, transform .2s;
}
.hp-adban-card--filled:hover {
  box-shadow:0 10px 32px rgba(0,0,0,.16);
  transform:translateY(-4px);
}
.hp-adban-card--filled img {
  width:100%; height:100%; object-fit:cover;
  display:block; transition:transform .4s;
}
.hp-adban-card--filled:hover img { transform:scale(1.04); }

/* ── Banner logo thật (nền trắng, object-fit contain) ── */
.hp-adban-card--logo {
  display:flex; flex-direction:column;
  background:#fff; border-radius:12px;
  border:1.5px solid #e8eaed;
  box-shadow:0 2px 10px rgba(0,0,0,.07);
  overflow:hidden; text-decoration:none;
  transition:box-shadow .2s, transform .2s;
  min-height:180px;
}
.hp-adban-card--logo:hover {
  box-shadow:0 8px 28px rgba(0,0,0,.13);
  transform:translateY(-3px);
}
.hp-adban-logo-img {
  width:100%; flex:1;
  object-fit:contain; padding:1.5rem 2rem;
  min-height:130px; background:#fff;
}
.hp-adban-logo-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:.55rem .9rem;
  border-top:1px solid #f0f0f0;
  background:#fafafa;
}
.hp-adban-logo-name {
  font-size:.75rem; font-weight:700; color:#374151;
}
.hp-adban-logo-visit {
  font-size:.68rem; color:var(--red); font-weight:600;
  display:flex; align-items:center; gap:.2rem;
}

/* Overlay gradient + label */
.hp-adban-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 55%);
  display:flex; flex-direction:column;
  justify-content:flex-end; padding:.85rem 1rem;
  opacity:0; transition:opacity .2s;
}
.hp-adban-card--filled:hover .hp-adban-overlay { opacity:1; }
.hp-adban-label {
  font-size:.78rem; font-weight:800; color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
  line-height:1.3; margin-bottom:.22rem;
}
.hp-adban-visit {
  font-size:.68rem; color:rgba(255,255,255,.85);
  display:flex; align-items:center; gap:.22rem;
}

/* ── Slot trống – placeholder đẹp ── */
.hp-adban-card--empty {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  aspect-ratio:6/4;
  border-radius:14px;
  border:2px dashed #e0e0e0;
  background:linear-gradient(135deg,#fafafa 0%,#f5f5f5 100%);
  text-decoration:none;
  gap:.45rem;
  transition:border-color .18s, background .18s, transform .18s;
  padding:1.25rem;
}
.hp-adban-card--empty:hover {
  border-color:var(--red);
  background:linear-gradient(135deg,#fff8f8 0%,#fde8e8 100%);
  transform:translateY(-3px);
}
.hp-adban-empty-icon {
  width:48px; height:48px; border-radius:14px;
  background:#efefef; color:#bbb; font-size:1.4rem;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s, color .18s;
}
.hp-adban-card--empty:hover .hp-adban-empty-icon {
  background:#fde8e8; color:var(--red);
}
.hp-adban-empty-title {
  font-size:.8rem; font-weight:800; color:#aaa;
  transition:color .18s;
}
.hp-adban-card--empty:hover .hp-adban-empty-title { color:#555; }
.hp-adban-empty-sub {
  font-size:.68rem; color:#ccc;
  font-family:monospace; letter-spacing:.04em;
}
.hp-adban-empty-btn {
  margin-top:.25rem;
  display:inline-flex; align-items:center; gap:.28rem;
  font-size:.72rem; font-weight:700; color:var(--red);
  background:#fde8e8; border-radius:20px;
  padding:.28rem .85rem;
  opacity:0; transition:opacity .18s;
}
.hp-adban-card--empty:hover .hp-adban-empty-btn { opacity:1; }

/* ── Banner minh hoạ (demo slot) ── */
.hp-adban-card--demo {
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  aspect-ratio:6/4; border-radius:14px;
  text-decoration:none;
  background:linear-gradient(145deg, var(--g1), var(--g2));
  box-shadow:0 4px 18px rgba(0,0,0,.18);
  transition:box-shadow .2s, transform .2s;
}
.hp-adban-card--demo:hover {
  box-shadow:0 12px 36px rgba(0,0,0,.28);
  transform:translateY(-4px);
}

/* Vòng tròn trang trí nền */
.hp-adban-demo-bg {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 110% 110%, rgba(255,255,255,.12) 0%, transparent 60%);
}
.hp-adban-demo-circles::before,
.hp-adban-demo-circles::after {
  content:''; position:absolute; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.12);
  pointer-events:none;
}
.hp-adban-demo-circles::before {
  width:180px; height:180px;
  top:-60px; right:-60px;
}
.hp-adban-demo-circles::after {
  width:110px; height:110px;
  bottom:-30px; left:-30px;
}

/* Nội dung */
.hp-adban-demo-body {
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  height:100%; padding:1rem 1.1rem .9rem;
  gap:.45rem;
}
.hp-adban-demo-top {
  display:flex; align-items:flex-start;
  justify-content:space-between; gap:.5rem;
}
.hp-adban-demo-tag {
  display:inline-flex; align-items:center;
  background:rgba(255,255,255,.2); color:#fff;
  border:1px solid rgba(255,255,255,.3);
  border-radius:20px; padding:.18rem .65rem;
  font-size:.66rem; font-weight:800; letter-spacing:.04em;
  backdrop-filter:blur(4px);
}
.hp-adban-demo-icon { flex-shrink:0; line-height:0; }
.hp-adban-demo-icon svg { display:block; }

.hp-adban-demo-headline {
  font-size:.92rem; font-weight:900; color:#fff;
  line-height:1.3; letter-spacing:.01em;
  display:flex; flex-direction:column; gap:.08rem;
}
.hp-adban-demo-sub {
  font-size:.68rem; font-weight:600;
  color:rgba(255,255,255,.7); letter-spacing:.03em;
}

.hp-adban-demo-desc {
  font-size:.71rem; color:rgba(255,255,255,.8);
  line-height:1.6; flex:1;
}
.hp-adban-demo-desc > div::before {
  content:'·'; margin-right:.35rem;
  color:rgba(255,255,255,.5);
}

.hp-adban-demo-footer {
  display:flex; align-items:center;
  justify-content:space-between; gap:.5rem;
  padding-top:.5rem;
  border-top:1px solid rgba(255,255,255,.15);
}
.hp-adban-demo-cta {
  display:inline-flex; align-items:center; gap:.3rem;
  background:#fff; color:var(--g1);
  border-radius:8px; padding:.32rem .85rem;
  font-size:.73rem; font-weight:800;
  box-shadow:0 2px 10px rgba(0,0,0,.2);
  transition:box-shadow .15s, transform .15s;
}
.hp-adban-card--demo:hover .hp-adban-demo-cta {
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  transform:translateX(2px);
}
.hp-adban-demo-badge {
  font-size:.61rem; color:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.2);
  border-radius:10px; padding:.12rem .5rem;
  letter-spacing:.03em;
}

/* Logo trong demo slot (MB Bank, Viettel dùng Clearbit) */
.hp-adban-demo-logo {
  max-height:44px; max-width:90px; object-fit:contain;
  border-radius:8px; padding:4px 6px;
  background:rgba(255,255,255,.2);
  backdrop-filter:blur(4px);
  flex-shrink:0;
}

/* Responsive carousel */
@media(max-width:900px) {
  .hp-adban-track > .hp-adban-card { flex:0 0 calc(50% - .5rem); }
}
@media(max-width:600px) {
  .hp-adban-track > .hp-adban-card { flex:0 0 100%; }
  .hp-adban-nav--prev { left:-8px; }
  .hp-adban-nav--next { right:-8px; }
}

/* ================================================================
   FOOTER  –  compact (20% shorter)
================================================================ */
.hp-footer {
  background:linear-gradient(180deg,#0D1B2A 0%,#12263A 100%);
  color:rgba(255,255,255,.78);
  padding:1.65rem 0 .8rem;
}
.hp-ft-brand { display:flex; align-items:center; gap:.5rem; margin-bottom:.38rem; }
.hp-ft-brand img { height:30px; object-fit:contain; }
.hp-ft-brand-name { font-size:.88rem; font-weight:800; color:#fff; line-height:1.25; }
.hp-ft-sub  { font-size:.72rem; color:rgba(255,255,255,.45); margin-bottom:.55rem; line-height:1.5; }
.hp-ft-info { font-size:.73rem; color:rgba(255,255,255,.6); line-height:1.8; }
.hp-ft-info i { color:var(--gold); margin-right:.28rem; }
.hp-ft-col-hd {
  font-size:.76rem; font-weight:700; color:rgba(255,255,255,.88);
  text-transform:uppercase; letter-spacing:.05em;
  border-bottom:1px solid rgba(255,255,255,.1);
  padding-bottom:.28rem; margin-bottom:.55rem;
}
.hp-ft-link {
  display:block; font-size:.73rem;
  color:rgba(255,255,255,.52); padding:.11rem 0;
  transition:color .15s;
}
.hp-ft-link i { font-size:.58rem; margin-right:.22rem; }
.hp-ft-link:hover { color:var(--gold); }
.hp-social-btn {
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.1); color:rgba(255,255,255,.7);
  font-size:.88rem; display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.hp-social-btn:hover { background:var(--gold); color:#222; }
.hp-ft-divider { border-color:rgba(255,255,255,.08); margin:.9rem 0 .6rem; }
.hp-ft-copy { font-size:.68rem; color:rgba(255,255,255,.28); text-align:center; }

/* ================================================================
   RESPONSIVE
================================================================ */
/* Tablet 768–1199px */
@media (max-width:1199px) {
  .hp-banner-b-link { height:80px; max-width:720px; }
  .hp-news-card { max-height:290px; }
  .hp-news-card-img, .hp-news-card-ph { height:145px; }
}

/* Collapse hero cols on tablet/mobile */
@media (max-width:991px) {
  .hp-hero-row { flex-direction:column; min-height:unset; }
  .hp-hero-left {
    width:100%; max-height:none;
    border-right:none;
    padding:.85rem;
  }
  .hp-hero-center {
    width:100%; border-right:none;
    padding:.85rem;
  }
  .hp-hero-right { width:100%; padding:0; overflow-y:visible; }
  .hp-partner-grid { grid-template-columns:repeat(3,1fr); }
  .hp-news-section, .hp-content-section { padding:1rem 0; }
  .hp-news-grid { grid-template-columns:repeat(2,1fr); gap:16px; }
}

/* Mobile */
@media (max-width:767px) {
  .hp-hd-title  { font-size:1.15rem; }
  .hp-hd-date   { display:none; }
  .hp-search-form { display:none; }
  .hp-carousel .carousel-item img,
  .hp-carousel .slide-ph { height:200px; border-radius:var(--radius-sm); }
  .hp-partner-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .hp-stats-section { padding:.65rem 0; }
  .hp-stat-num  { font-size:1.5rem; }
  .hp-footer    { padding:1.2rem 0 .6rem; }
  /* Banner B: full width on mobile */
  .hp-banner-b-link { height:72px; max-width:100%; }
  .hp-banner-b { padding:.6rem 0 .75rem; }
  /* News: 1 col on mobile */
  .hp-news-grid { grid-template-columns:1fr; gap:12px; }
  .hp-news-card { max-height:none; }
  .hp-news-card-img, .hp-news-card-ph { height:140px; }
  .hp-news-card-body { padding:12px; gap:6px; }
  .hp-sb-card { padding:10px 12px; }
  .hp-partner-section { padding:.75rem 0 .85rem; }
}

@media (max-width:575px) {
  .hp-ql { padding:.58rem .7rem; }
  .hp-ql-title { font-size:.76rem; }
}

/* ================================================================
   POSITION C1 / C2  – sidebar banners below quick-links
================================================================ */
.hp-comm-banner { margin-bottom:.35rem; border-radius:var(--radius); overflow:hidden; display:block; }
.hp-comm-c-banner {
  display:block; border-radius:var(--radius);
  overflow:hidden; text-decoration:none;
  border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
  transition:box-shadow .15s, opacity .15s;
}
.hp-comm-c-banner:hover { box-shadow:var(--shadow-md); opacity:.94; }
.hp-comm-c-banner img {
  width:100%; display:block;
  max-height:120px; object-fit:cover;
}
.hp-comm-banner img { width:100%; border-radius:var(--radius); }

/* Ad rotator – fade transition between slides */
.hp-ad-rotator { position:relative; min-height:60px; }
.hp-ad-slide { display:none; animation:adFadeIn .5s ease; }
.hp-ad-slide.active { display:block; }
@keyframes adFadeIn { from{opacity:0} to{opacity:1} }

/* Dynamic content banner (no image – pure text/color) */
.hp-adban-dynamic {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; text-decoration:none;
  padding:.75rem 1rem; border-radius:10px;
  min-height:100px; gap:.35rem;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  transition:box-shadow .2s, transform .2s;
}
.hp-adban-dynamic:hover { box-shadow:0 4px 16px rgba(0,0,0,.28); transform:translateY(-1px); }
.hp-adban-dyn-logo { max-height:36px; max-width:80%; object-fit:contain; margin-bottom:.25rem; }
.hp-adban-dyn-headline { font-size:.85rem; font-weight:700; line-height:1.2; }
.hp-adban-dyn-body { font-size:.72rem; opacity:.88; margin:0; line-height:1.3; }
.hp-adban-dyn-cta {
  font-size:.72rem; font-weight:600; padding:.2rem .65rem;
  border:1.5px solid currentColor; border-radius:20px; margin-top:.15rem;
  opacity:.92;
}