/*
 * PUBLIC SITE STYLE OVERRIDE - loaded once by the shared layout, after
 * the legacy stylee6b4.css bundle. Modern style, blue as the dominant
 * color: gradient headers/sidebar bars, rounded cards with soft blue
 * shadows, one amber accent for contrast (tags, hover). Smooth easing on
 * all hover/focus transitions; :focus-visible rings and prefers-reduced-
 * motion support included for accessibility; gradients used behind text
 * are kept dark enough for WCAG AA contrast (checked: white on
 * --hy-gradient-text ≈ 5:1). Responsive rules at the bottom.
 *
 * Font: Be Vietnam Pro, self-hosted in /fonts (not loaded from Google's
 * CDN) - this avoids a real bug found while building this: a Google-hosted
 * serif face silently broke Vietnamese double-diacritic letters (ấ, ố...),
 * and self-hosting sidesteps needing any outbound font request at all.
 *
 * To restyle: change the tokens in :root below - every rule after that
 * reads from them, nothing is hardcoded twice.
 */
@font-face {
    font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/fonts/be-vietnam-pro-400-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/fonts/be-vietnam-pro-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/fonts/be-vietnam-pro-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("/fonts/be-vietnam-pro-500-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("/fonts/be-vietnam-pro-500-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("/fonts/be-vietnam-pro-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("/fonts/be-vietnam-pro-600-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("/fonts/be-vietnam-pro-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("/fonts/be-vietnam-pro-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("/fonts/be-vietnam-pro-700-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("/fonts/be-vietnam-pro-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("/fonts/be-vietnam-pro-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Noto Serif (article body/titles) + Oswald (headlines/section labels) -
   matching baohungyen.vn's own font pairing, per client request. Both
   self-hosted (same reason as Be Vietnam Pro above): this dev environment
   can't reach fonts.gstatic.com from the browser, so a Google Fonts <link>
   silently never loads here. Each is one variable-weight file per Unicode
   subset (that's what Google actually served for every weight requested -
   not three separate static files), declared with a font-weight range so
   the browser can render any weight the CSS asks for from it. */
@font-face {
    font-family: "Noto Serif"; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url("/fonts/noto-serif-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: "Noto Serif"; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url("/fonts/noto-serif-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Noto Serif"; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url("/fonts/noto-serif-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Oswald"; font-style: normal; font-weight: 500 700; font-display: swap;
    src: url("/fonts/oswald-vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: "Oswald"; font-style: normal; font-weight: 500 700; font-display: swap;
    src: url("/fonts/oswald-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Oswald"; font-style: normal; font-weight: 500 700; font-display: swap;
    src: url("/fonts/oswald-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --hy-blue-dark: #063a7d;   /* gradient dark end - section headers, sidebar bars */
    --hy-blue: #0b5fc4;        /* primary blue - links, buttons, active states */
    --hy-blue-bright: #2f8ef0; /* gradient light end - the "eye-catching" lift */
    --hy-blue-tint: #eaf2fc;   /* pale blue wash - hover backgrounds, tab track */
    --hy-ink: #101c2e;         /* body text - near-navy-black, still reads "blue family" */
    --hy-paper: #eef3fa;       /* cool light-blue canvas, not a flat tech grey */
    --hy-surface: #ffffff;
    --hy-border: #dbe6f5;      /* soft blue-grey hairline for card borders */
    --hy-amber: #e8960c;       /* single warm accent, spent deliberately - see header comment */
    --hy-muted: #5c6b84;       /* cool grey-blue for meta/byline text */
    --hy-shadow: 0 4px 16px rgba(11, 95, 196, .14);
    --hy-shadow-hover: 0 14px 32px rgba(11, 95, 196, .24);
    --hy-radius: 14px;
    --hy-ease: cubic-bezier(.25, .8, .35, 1); /* smooth "premium" easing for hover/focus transitions */
    /* Two gradients, used deliberately for different jobs: -text is dark
       enough for white text to clear WCAG AA (4.5:1) at any point along it
       (checked: white-on-#0b5fc4 ≈ 5.1:1); -vivid adds the brighter blue
       for decoration only (buttons, glows) where no text sits on top. */
    --hy-gradient-text: linear-gradient(120deg, var(--hy-blue-dark), var(--hy-blue));
    --hy-gradient-vivid: linear-gradient(120deg, var(--hy-blue-dark), var(--hy-blue-bright));
    --hy-sans: "Be Vietnam Pro", "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif;
    /* Font pairing matches baohungyen.vn (checked live): Noto Serif for
       body copy/article titles, Oswald for headlines/section labels/nav.
       --hy-sans (above) still backs UI chrome (buttons, sidebar bars, tags)
       that isn't editorial content. */
    --hy-serif: "Noto Serif", Georgia, "Times New Roman", serif;
    --hy-display: "Oswald", "Arial Narrow", sans-serif;
    /* v4 aliases so nothing below falls back to an undefined token. */
    --hy-ink-soft: var(--hy-blue);
    --hy-gold: var(--hy-amber);
    --hy-rule: var(--hy-border);
}

/* Navigation uses the same blue gradient as the section headings. */
#menu6,
#menu6 > .navbar.navbar-default {
    background: var(--hy-gradient-text) !important;
    border-color: transparent;
}
#menu6 > .navbar.navbar-default {
    box-shadow: 0 4px 14px rgba(6, 58, 125, .16);
}
#menu6 .navbar-collapse,
#menu6 .intestine-collapse,
#menu6 .navbar-nav {
    background: transparent;
}
#menu6 .navbar-nav > li > a,
#menu6 .link-right > a {
    color: #fff !important;
    background: transparent;
}
#menu6 .navbar-nav > li:hover > a,
#menu6 .navbar-nav > li.active > a,
#menu6 .navbar-nav > li.open > a,
#menu6 .navbar-nav > li > a:focus-visible,
#menu6 .link-right > a:hover {
    background: rgba(255, 255, 255, .14) !important;
    color: #ffe082 !important;
}
#menu6 .dropdown-menu,
#menu6 .dropdown-menu2 {
    background: #fff;
    border-color: var(--hy-border);
    box-shadow: var(--hy-shadow);
}
#menu6 .dropdown-menu li > a,
#menu6 .dropdown-menu2 li > a {
    color: var(--hy-blue-dark);
}
#menu6 .dropdown-menu li:hover > a,
#menu6 .dropdown-menu li > a:focus-visible,
#menu6 .dropdown-menu2 li:hover > a {
    background: var(--hy-blue-tint) !important;
    color: var(--hy-blue-dark) !important;
}
@media (max-width: 768px) {
    #menu6 .navbar-collapse { background: var(--hy-blue-dark) !important; }
    #menu6 .navbar-toggle { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); }
    #menu6 .navbar-toggle .icon-bar { background: #fff; }
}

.visit-stats-card .body { font-family: var(--hy-sans); }
.visit-stats-total { display: grid; gap: 5px; text-align: center; padding: 8px 0 18px; }
.visit-stats-label { font-size: 14px; font-weight: 600; color: var(--hy-ink); }
.visit-stats-total strong { font-size: 30px; line-height: 1.3; color: var(--hy-blue); font-variant-numeric: tabular-nums; }
.visit-stats-caption { font-size: 12px; color: var(--hy-muted); }
.visit-stats-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid var(--hy-border); font-size: 13px; }
.visit-stats-row > span { display: flex; align-items: center; gap: 9px; }
.visit-stats-row strong { color: var(--hy-blue-dark); font-size: 17px; font-variant-numeric: tabular-nums; }
.visit-stats-row i { color: var(--hy-blue); width: 12px; }
.visit-stats-row .visit-stats-online-dot { width: 9px; height: 9px; border-radius: 50%; background: #169767; box-shadow: 0 0 0 3px #e6f6ef; }
.visit-stats-note { margin: 4px 0 0; font-size: 10px; line-height: 1.5; color: var(--hy-muted); }

/* Compact search popover; override the legacy input's 265px minimum width. */
#menu6 #div-search6 {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    max-width: calc(100vw - 28px);
    margin: 0;
    padding: 10px;
    border: 1px solid var(--hy-border);
    border-top: 3px solid var(--hy-blue);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(6, 58, 125, .22);
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease, visibility .18s ease;
}
#menu6 #div-search6.active { visibility: visible; pointer-events: auto; opacity: 1; z-index: 1000; }
#menu6 #div-search6 .search-form { margin: 0; padding: 0; }
#menu6 #div-search6 .input-group {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 4px;
    border: 1px solid #d5e2f3;
    border-radius: 8px;
    background: #f5f8fd;
}
#menu6 #div-search6 .input-group:focus-within { border-color: var(--hy-blue); box-shadow: 0 0 0 3px rgba(11, 95, 196, .12); }
#menu6 #div-search6 .input-group input {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    height: 38px !important;
    line-height: normal !important;
    padding: 0 10px;
    border: 0 !important;
    outline: 0;
    background: transparent;
    color: var(--hy-ink);
    font-family: var(--hy-sans);
    font-size: 14px;
    box-shadow: none;
}
#menu6 #div-search6 .input-group input::placeholder { color: #6b7d95; }
#menu6 #div-search6 .input-group button {
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 40px;
    width: 40px !important;
    height: 38px;
    border-radius: 6px;
    background: var(--hy-gradient-text) !important;
}
#menu6 #div-search6 .input-group button:hover { background: var(--hy-blue-dark) !important; }
#menu6 #div-search6 .input-group button img { width: 19px !important; height: 19px; object-fit: contain; filter: brightness(0) invert(1); }
#menu6 #div-search6 .input-group button:focus-visible { outline: 2px solid var(--hy-amber); outline-offset: 2px; }

/* Visible keyboard focus ring, scoped to the homepage content - required
   for accessibility, easy to miss when a design leans on hover alone. */
#module13 a:focus-visible,
#module13 button:focus-visible,
#module14 a:focus-visible,
#module14 button:focus-visible {
    outline: 2px solid var(--hy-blue-bright);
    outline-offset: 2px;
    border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
    #module13 *, #module14 * { animation: none !important; transition: none !important; }
}

/* ---------- Overall canvas ---------- */
#module13, #module14 {
    background-color: var(--hy-paper);
    /* baohungyen.vn's own <body> default is Noto Serif - matched here as
       the page-wide base; --hy-sans/--hy-display are opted into per element
       above for UI chrome and headlines/labels respectively. */
    font-family: var(--hy-serif);
    color: var(--hy-ink);
}
#module13 .container { box-shadow: none !important; }
#module13 { padding: 0px 0 30px; }
#module15, .col-right.col-12.col-md-3 { margin-top: 0 !important; }

/* ---------- Right-edge alignment fix ----------
   Measured live via Chrome DevTools Protocol (getBoundingClientRect on the
   real page): FeaturedNews's own card sits at a clean 127-967px inset from
   the column, but the "NGƯỜI PHÁT NGÔN" link-banner rows (#module36top,
   LinkBanner/Default.cshtml's #module12/.category-inner-item, floated
   .col-md-* with a bare .clearfix parent instead of .row) resolve to a
   narrower, differently-shifted box - exactly the right-edge gap the user
   circled in a screenshot. Rebuilding as CSS Grid (equal columns + explicit
   gap) sidesteps the legacy float/negative-margin math entirely and lines
   every banner row's outer edges up with FeaturedNews's (verified back to
   the same 127-967px box for the 1/2/3-column cases alike).

   NOTE: an earlier version of this fix also switched #module36 (the
   SubCategory two-panel-per-row wrapper) to display:grid for the same
   reason - reverted. That broke the pair itself: turning #module36 into a
   grid container also swallowed the plain `<div style="clear:both">`
   SubCategory emits between pairs into the grid's own auto-placement,
   which pushed each pair onto its own row instead of sharing one (found
   live: "TIN TỨC SỰ KIỆN"/"VB CHÍNH SÁCH MỚI" stacked instead of side by
   side). #module36top has no such pairing to protect, so it keeps the
   grid rebuild; #module36's own trailing banners get the lighter
   translateX nudge below instead, which only shifts their own rendered
   box, so it can't affect the surrounding float layout. #module36's panel
   pair itself is left at its original (float-based, correctly-pairing,
   ~6-22px off from a perfect edge match) position rather than risk
   breaking the pairing again for a smaller cosmetic gain. */
#module36top {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}
/* SubCategory's own trailing banners sit inside the untouched float/.row
   #module36 - nudged into alignment by a fixed, measured offset instead of
   restructuring their parent. Its panel-pair columns (measured live: 119-
   959px, an 8px-left shift off the hero's 127-967px box) get the same
   translateX nudge - pure compositing, no reflow, so it can't disturb the
   float pairing itself. */
#module36 > [id="module12"],
#module36 > .col-left { transform: translateX(8px); }

/* Count category columns only: banners and clearing divs can sit between pairs. */
#module36 > .col-left:nth-child(odd of .col-left) {
    padding-left: 0 !important;
    padding-right: 5px !important;
}
#module36 > .col-left:nth-child(even of .col-left) {
    padding-left: 5px !important;
    padding-right: 0 !important;
}

#module15 [id="module12"],
#module36top [id="module12"] {
    padding: 5px 1px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
#module15 [id="module12"] .clearfix,
#module36top [id="module12"] .clearfix { display: grid !important; gap: 12px !important; }
/* The legacy .clearfix:before/:after (content:" "; display:table) rule
   still fires here - as real grid children they'd occupy their own cells
   and shove every banner after them onto the wrong row/column (found live:
   a col-md-6 pair split into two separate rows instead of sitting side by
   side). Drop them from the grid's item list entirely. */
#module15 [id="module12"] .clearfix::before,
#module15 [id="module12"] .clearfix::after,
#module36top [id="module12"] .clearfix::before,
#module36top [id="module12"] .clearfix::after { content: none !important; display: none !important; }
#module15 [id="module12"]:has(.col-md-12) .clearfix,
#module36top [id="module12"]:has(.col-md-12) .clearfix { grid-template-columns: 1fr; }
#module15 [id="module12"]:has(.col-md-6) .clearfix,
#module36top [id="module12"]:has(.col-md-6) .clearfix { grid-template-columns: 1fr 1fr; }
#module15 [id="module12"]:has(.col-md-4) .clearfix,
#module36top [id="module12"]:has(.col-md-4) .clearfix { grid-template-columns: 1fr 1fr 1fr; }
#module15 [id="module12"] .category-inner-item,
#module36top [id="module12"] .category-inner-item {
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
    width: auto !important;
}
#module15 [id="module12"] .category-item-box,
#module36top [id="module12"] .category-item-box { margin: 0 !important; }

/* ================= News sections (frame-chung, used by SubCategory) =================
   A vivid blue gradient header on every section card - white bold sentence-
   case title (not the all-caps a generic template reaches for), soft
   blue-tinted shadow and rounded corners for a contemporary lift. */
.frame-chung.panel {
    background: var(--hy-surface);
    border: none;
    border-radius: var(--hy-radius);
    overflow: hidden;
    box-shadow: var(--hy-shadow);
    transition: box-shadow .3s var(--hy-ease), transform .3s var(--hy-ease);
    margin-bottom: 26px;
}
.frame-chung.panel:hover { box-shadow: var(--hy-shadow-hover); transform: translateY(-3px); }
.frame-chung > .panel-heading {
    position: relative;
    background: var(--hy-gradient-text);
    border: none;
    padding: 14px 20px;
}
/* Shared size for all homepage section headings, including sidebar widgets. */
#module13, #whole-page {
    --hy-section-title-size: 15px;
}
#whole-page .frame-chung > .panel-heading .panel-title,
#whole-page .frame-chung > .panel-heading .panel-title a,
#whole-page .block.border > .title a,
#whole-page .vertical-menu .block .title a,
#whole-page .ratings-card-header h2,
#module13 .frame-chung > .panel-heading .panel-title,
#module13 .frame-chung > .panel-heading .panel-title a,
#module13 .frame-chung > .panel-heading .tablinks,
#module13 .block.border > .title,
#module13 .block.border > .title a,
#module13 .vertical-menu .block .title,
#module13 .vertical-menu .block .title a,
#module13 .ratings-card-header h2 {
    font-size: var(--hy-section-title-size) !important;
}
.frame-chung > .panel-heading .panel-title,
.frame-chung > .panel-heading .panel-title a,
.frame-chung > .panel-heading .tablinks {
    /* Section headings: Oswald 500, uppercase. */
    font-family: var(--hy-display);
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, .82); /* stays >= 4.5:1 on --hy-gradient-text at this size */
    text-transform: uppercase;
    letter-spacing: .3px;
    transition: color .18s var(--hy-ease);
}
.frame-chung > .panel-heading .panel-title a:not(.tablinks) {
    color: #fff !important;
}
.frame-chung > .panel-heading .panel-title .tablinks {
    color: #fff !important;
    font-weight: 500 !important;
}
.frame-chung > .panel-heading .panel-title .tablinks.active {
    color: #ffe082 !important;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}
.frame-chung > .panel-body { padding: 18px 20px 10px; background: transparent; }
/* A Bootstrap .row nested directly inside this 20px-padded panel-body (e.g.
   the SỞ/BAN/NGÀNH unit list) only claws back 7.5px of that padding via its
   own negative margin, leaving a ~12px net inset each side - measured live
   at 139-954px against the rest of the page's shared 127-967px edge. Zero
   out its own margin/padding instead of fighting Bootstrap's gutter math. */
.frame-chung > .panel-body > .columns-widget.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}
.frame-chung > .panel-body > .columns-widget.row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Lead article within a section - bold headline, photo with a confident
   rounded corner and zoom-on-hover. */
.article-news-listType19 .common-img,
.category-item-box,
.tinnoibat-item .article-img {
    border-radius: 10px;
    overflow: hidden;
}
.article-news-listType19 .post-image,
.category-item-box img,
.category-inner-item img,
.tinnoibat-item .article-img img {
    transition: transform .4s ease;
}
.article-news-listType19 .common-img:hover img,
.category-item-box:hover img,
.tinnoibat-item .article-img:hover img {
    transform: scale(1.05);
}
.article-news-listType19 .content-type19 .article-title a {
    /* Matches baohungyen.vn's own .card-title: Noto Serif 600, 1rem, but
       sized up slightly since this is the lead (larger) article in the
       section, not a small card. */
    font-family: var(--hy-serif);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--hy-ink);
    transition: color .15s ease;
}
.article-news-small-listType19 .article-title a {
    font-family: var(--hy-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--hy-ink);
    transition: color .15s ease;
}
.article-news-listType19 .content-type19 .article-title a:hover,
.article-news-small-listType19 .article-title a:hover {
    color: var(--hy-blue);
}
.article-news-small-listType19 { border-bottom: 1px solid var(--hy-border); padding: 10px 0; }
.article-news-small-listType19:last-child { border-bottom: none; }

/* "Xem thêm »" - a filled pill button in the primary blue, not an arrow-
   suffixed link (the arrow glyph is a generic-template tell). */
.hasViewMore { text-align: left; margin: 14px 0 4px; }
.hasViewMore a {
    display: inline-block;
    /* Matches baohungyen.vn's own small nav/tag labels: Oswald 500, uppercase, 0.8rem. */
    font-family: var(--hy-display);
    font-size: 12.8px; font-weight: 500; color: #fff;
    text-transform: uppercase; letter-spacing: .3px;
    background: var(--hy-blue);
    padding: 7px 18px; border-radius: 999px;
    transition: background .2s var(--hy-ease), transform .2s var(--hy-ease), box-shadow .2s var(--hy-ease);
    box-shadow: 0 3px 10px rgba(11, 95, 196, .28);
}
.hasViewMore a:hover { background: var(--hy-blue-dark); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(11, 95, 196, .35); color: #fff; text-decoration: none; }

/* ================= Featured news hero (FeaturedNews widget) =================
   The one place spending real visual boldness: a bold white headline over a
   blue-toned scrim with an amber tag (the single warm accent, used here for
   real contrast against all the blue around it), plus a modern pill-
   segmented tab control for "Tin nổi bật / Tin mới nhất". */
.article-news-highlightType2 {
    border-radius: var(--hy-radius); overflow: hidden; box-shadow: var(--hy-shadow-hover);
    background: var(--hy-surface); border: none;
}
.top-left-highlightType2 { position: relative; }
.top-left-highlightType2 img { transition: transform .6s ease; }
.top-left-highlightType2 .box.item:hover img { transform: scale(1.04); }
.overlay-info {
    background: linear-gradient(165deg, #0d3a7a 0%, #0a2a5c 55%, #051733 100%);
    padding: 22px 26px 26px;
    position: relative;
    overflow: hidden;
}
/* One deliberate hover moment for this card: a brand-blue accent bar that
   grows across the top edge of the caption panel, paired with the existing
   image zoom - not a generic card-lift, tied to this hero specifically. */
.overlay-info::before {
    content: "";
    position: absolute; top: 0; left: 0; height: 3px; width: 30%;
    background: linear-gradient(90deg, var(--hy-blue-bright), transparent);
    transition: width .45s var(--hy-ease);
}
.top-left-highlightType2 .box.item:hover .overlay-info::before { width: 100%; }
.overlay-info .cat h3 {
    /* White serif headline against the dark overlay. */
    font-family: var(--hy-serif) !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
    color: #fff !important;
    letter-spacing: -.2px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .4) !important;
    transition: color .2s ease;
}
.top-left-highlightType2 .box.item:hover .cat h3 { color: var(--hy-blue-tint) !important; }
.overlay-info .cat-data {
    display: block;
    color: rgba(255, 255, 255, .72) !important;
    font-family: var(--hy-serif);
    font-size: 14.4px !important; /* baohungyen's .font09 / .font5 */
    line-height: 1.6 !important;
    margin-top: 10px !important;
}
/* Amber tag pill above the headline, in place of a corner ribbon - the
   single warm accent on this panel. */
.overlay-info .cat::before {
    content: "TIN NỔI BẬT";
    display: inline-block; background: var(--hy-amber); color: #1a1204;
    font-family: var(--hy-display); font-size: 12.8px; font-weight: 600; letter-spacing: .5px;
    padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;
    box-shadow: 0 4px 14px rgba(232, 150, 12, .35);
}

/* Segmented toggle - two adjacent buttons sharing one bordered bar (slight
   corner radius, not a full pill), joined edge-to-edge with a single
   divider between them, per client's own choice over the pill variant. */
.tinmoi-tabs {
    display: inline-flex; gap: 0;
    border: 1px solid var(--hy-border) !important;
    border-radius: 8px; overflow: hidden;
    background: var(--hy-surface);
    margin-bottom: 14px;
}
.tinmoi-tabs .tablinksa {
    border: none !important; border-radius: 0 !important; margin-bottom: 0 !important;
    padding: 9px 20px !important;
    font-family: var(--hy-sans); font-weight: 600; color: var(--hy-muted); background: var(--hy-paper);
    transition: color .2s var(--hy-ease), background .2s var(--hy-ease);
}
/* Divider between the two buttons - a right border on the first one only. */
.tinmoi-tabs .tablinksa:not(:last-child) { border-right: 1px solid var(--hy-border) !important; }
.tinmoi-tabs .tablinksa.active {
    color: #fff !important;
    background: var(--hy-gradient-text) !important;
}
.tinmoi-tabs .tablinksa:not(.active):hover { color: var(--hy-blue) !important; background: var(--hy-blue-tint); }
.tinmoi-item .tinmoi-dot { background: var(--hy-blue) !important; }
/* !important needed on both: the legacy theme's own
   ".article-news-highlightType2 .article-highlightType2-default
   .article-item .article-content a" rule (4 classes deep) outranks this
   2-class selector on specificity alone, regardless of source order -
   found live via computed-style inspection (it was silently winning with
   "RobotoBold", not matching .tinmoi-item's plain sans at all despite both
   being styled identically here). */
.tinmoi-item .tinmoi-title { font-family: var(--hy-serif) !important; font-size: 15px !important; font-weight: 600 !important; }
.tinmoi-item .tinmoi-title:hover { color: var(--hy-blue) !important; }
.tinnoibat-item .article-content a { font-family: var(--hy-serif) !important; font-size: 15px !important; font-weight: 600 !important; }
.tinnoibat-item .article-content a:hover { color: var(--hy-blue) !important; }

/* One continuous featured-news card; reset legacy floats and row gutters. */
#section9 {
    padding: 0;
    margin: 0 0 20px;
    border: 1px solid var(--hy-border);
    box-shadow: 0 8px 24px rgba(6, 58, 125, .12);
}
#section9 > .highlightType {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    margin: 0;
}
#section9 > .highlightType::before,
#section9 > .highlightType::after { content: none; display: none; }
#section9 .left-highlightType2,
#section9 .right-highlightType2 {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
    margin: 0;
    max-height: none;
}
#section9 .left-highlightType2 { background: #0a2a5c; }
#section9 .top-left-highlightType2,
#section9 #sync1 { margin: 0; }
#section9 #sync1 .box.item > a { display: block; text-decoration: none; }
#section9 #sync1 .box.item > a > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 0;
}
#section9 .overlay-info { padding: 18px 22px 20px; background: var(--hy-gradient-text); }
#section9 .overlay-info .cat::before { margin-bottom: 10px; padding: 3px 10px; font-size: 11px; }
#section9 .overlay-info .cat h3 { text-align: left !important; line-height: 1.45 !important; }
#section9 .overlay-info .cat-data { text-align: left !important; margin: 8px 0 0 !important; color: #e1ebfa !important; font-size: 13px !important; line-height: 1.6 !important; }
#section9 .right-highlightType2 { background: #fff; border-left: 1px solid var(--hy-border); }
#section9 .tinmoi-tabs {
    display: flex;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-bottom: 1px solid var(--hy-border) !important;
    border-radius: 0;
    background: #f1f6fd;
}
#section9 .tinmoi-tabs .tablinksa {
    flex: 1;
    text-align: center;
    padding: 14px 10px !important;
    font-size: var(--hy-section-title-size, 15px);
    line-height: 1.4;
    background: transparent;
}
#section9 .tinmoi-tabs .tablinksa.active { box-shadow: inset 0 -3px #ffe082; }
#section9 .tinmoi-panel { border: 0; border-radius: 0; padding: 4px 18px; margin: 0; background: transparent; }
#section9 .tinnoibat-item,
#section9 .tinmoi-item { padding: 13px 0; margin: 0 !important; border-bottom: 1px solid #e8eef6; }
#section9 .tinnoibat-item:last-child,
#section9 .tinmoi-item:last-child { border-bottom: 0; }
#section9 .tinnoibat-item .article-item { display: flex; align-items: center; gap: 12px; }
#section9 .tinnoibat-item .article-img { flex: 0 0 96px; width: 96px; margin: 0; border-radius: 8px; }
#section9 .tinnoibat-item .article-img img { display: block; width: 100%; height: 64px !important; object-fit: cover; }
#section9 .tinnoibat-item .article-content { flex: 1; width: auto; min-width: 0; }
#section9 .tinnoibat-item .article-content a,
#section9 .tinmoi-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    max-height: none;
    text-align: left;
    font-size: 14px !important;
    line-height: 1.5;
}
#section9 .tinnoibat-item:hover,
#section9 .tinmoi-item:hover { background: #f5f9ff; }
#section9 .tinmoi-time { font-size: 11px; color: var(--hy-muted); }
@media (min-width: 768px) {
    #section9 .left-highlightType2 { position: relative; min-height: 490px; }
    #section9 .top-left-highlightType2 { position: absolute; inset: 0; }
    #section9 #sync1,
    #section9 #sync1 .owl-stage-outer,
    #section9 #sync1 .owl-stage,
    #section9 #sync1 .owl-item,
    #section9 #sync1 .box.item { height: 100%; }
    #section9 #sync1 .box.item > a { display: flex; flex-direction: column; height: 100%; }
    #section9 #sync1 .box.item > a > img {
        flex: 1 1 0;
        min-height: 0;
        height: 0;
        aspect-ratio: auto;
    }
    #section9 .overlay-info { flex: 0 0 auto; }
}
@media (max-width: 767px) {
    #section9 > .highlightType { grid-template-columns: minmax(0, 1fr); }
    #section9 .right-highlightType2 { border-left: 0; }
    #section9 .overlay-info { padding: 16px 18px; }
    #section9 .tinmoi-panel { padding: 4px 14px; }
}

/* ================= Sidebar utility widgets (.block.border) =================
   Same gradient-header/rounded-card system as the news sections, so the
   sidebar and main column read as one consistent identity. */
.block.border {
    border: none !important;
    border-radius: var(--hy-radius) !important;
    overflow: hidden;
    box-shadow: var(--hy-shadow);
    margin: 0 0 20px 0 !important;
    transition: box-shadow .3s var(--hy-ease), transform .3s var(--hy-ease);
}
.block.border:hover { box-shadow: var(--hy-shadow-hover); transform: translateY(-2px); }
.block.border > .title,
.vertical-menu .block .title {
    position: static;
    background: var(--hy-gradient-text) !important;
    border: none !important;
    padding: 12px 16px !important;
    margin: 0;
}
.block.border > .title::after,
.vertical-menu .block .title::after,
.block.border > .title::before,
.vertical-menu .block .title::before {
    content: none;
}
.block.border > .title a,
.vertical-menu .block .title a {
    position: static;
    color: #fff !important;
    /* Matches baohungyen.vn's own section-label styling: Oswald, uppercase. */
    font-family: var(--hy-display);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 14.4px;
    letter-spacing: .3px;
    background-image: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.block.border > .body,
.vertical-menu .block .body {
    border-top: none !important;
    padding: 16px !important;
    background: var(--hy-surface);
}
/* DocMenu's own inline <style> uses a red diamond bullet before each item -
   swapped to the primary blue (needs !important to beat that equally-
   specific rule, since it's kept in that component's own file). */
.vertical-menu .TD-ul-module-menu-left > li.dropdown > dt > a:before {
    background: var(--hy-blue) !important; border-radius: 50% !important; transform: none !important;
    width: 6px !important; height: 6px !important;
}
.vertical-menu .TD-ul-module-menu-left > li.dropdown > dt > a {
    font-family: var(--hy-sans) !important; color: var(--hy-ink) !important; font-size: 14.4px;
}
.vertical-menu .TD-ul-module-menu-left a:hover { color: var(--hy-blue) !important; }
.vertical-menu .TD-ul-module-menu-left > li.dropdown { border-bottom: 1px solid var(--hy-border); padding: 7px 0; }
.vertical-menu .TD-ul-module-menu-left > li.dropdown:last-child { border-bottom: none; }

/* Số lượt truy cập - big stat number in the display face, like baohungyen's own headline numerals. */
.TD-div-module-thongke a { color: var(--hy-blue) !important; font-family: var(--hy-display); font-weight: 600; }
.current-online { color: var(--hy-muted); font-size: 12.8px; font-family: var(--hy-sans); }

/* Đánh giá người dùng */
.block.border .actions .btn.btn-primary {
    background: var(--hy-blue); border-color: var(--hy-blue); border-radius: 999px;
    font-family: var(--hy-sans); font-weight: 600; transition: background .15s ease;
}
.block.border .actions .btn.btn-primary:hover { background: var(--hy-blue-dark); border-color: var(--hy-blue-dark); }

/* ================= Sidebar link-banner strips (Column view) =================
   Each banner fills one row of the sidebar. */
.category-categoryImageType13 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-left: 0;
    margin-right: 0;
}
.category-categoryImageType13.clearfix::before,
.category-categoryImageType13.clearfix::after {
    content: none;
    display: none;
}
.category-categoryImageType13 .category-inner-item {
    width: 100%;
    float: none;
    padding: 0;
    margin-bottom: 0 !important;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--hy-shadow);
    transition: box-shadow .2s ease, transform .2s ease;
}
.category-categoryImageType13 .category-inner-item:hover {
    box-shadow: var(--hy-shadow-hover);
    transform: translateY(-2px);
}

/* ---------- Map widget (bare <a><img>, first item in the sidebar) ---------- */
.col-right.col-12.col-md-3 > a:first-child {
    display: block;
    border-radius: var(--hy-radius);
    overflow: hidden;
    box-shadow: var(--hy-shadow);
    margin-bottom: 20px;
    transition: box-shadow .2s ease, transform .2s ease;
}
.col-right.col-12.col-md-3 > a:first-child:hover { box-shadow: var(--hy-shadow-hover); transform: translateY(-2px); }
.col-right.col-12.col-md-3 > a:first-child img { display: block; }

/* ---------- Top link-banner row under FeaturedNews (Default view, 3-col) ---------- */
#module36top .category-item-box {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--hy-shadow);
    transition: box-shadow .2s ease, transform .2s ease;
}
#module36top .category-item-box:hover { box-shadow: var(--hy-shadow-hover); transform: translateY(-2px); }

/* ================= Union list (danh sách cổng thành viên / UnitList) ================= */
#module13 hr { border-top: 1px solid var(--hy-border); }
.PortalListHPG .frame-chung.panel { border-top: none !important; }
.PortalListHPG h3.panel-title {
    background: var(--hy-gradient-text) !important;
    box-shadow: 0 3px 10px rgba(11, 95, 196, .3);
    font-family: var(--hy-display) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: .3px !important;
}
.PortalListHPG .category-categoryType-tree2 {
    background: var(--hy-surface) !important;
    border-radius: 10px;
    box-shadow: var(--hy-shadow);
    transition: box-shadow .2s ease, transform .2s ease;
}
.PortalListHPG .category-categoryType-tree2:hover { box-shadow: var(--hy-shadow-hover); transform: translateY(-2px); }
.PortalListHPG .category-categoryType-tree2 h4.category-title {
    color: var(--hy-blue); position: relative; padding-left: 14px;
    font-family: var(--hy-display); font-weight: 500; text-transform: uppercase; font-size: 14.4px;
}
.PortalListHPG .category-categoryType-tree2 h4.category-title::before {
    content: ""; position: absolute; left: 0; top: 4px; width: 4px; height: 16px; border-radius: 2px;
    background: var(--hy-amber);
}
.PortalListHPG ul.navi-list li a { transition: color .15s ease; font-family: var(--hy-serif); font-size: 14.4px; }
.PortalListHPG ul.navi-list li a:hover { color: var(--hy-blue) !important; }
.PortalListHPG .btn-viewMore { color: var(--hy-blue) !important; font-weight: 600; font-family: var(--hy-sans); }

/* ================= Responsive ================= */
@media (max-width: 991px) {
    .overlay-info .cat h3 { font-size: 18px !important; }
    .frame-chung > .panel-heading { padding: 12px 16px; }
    .frame-chung > .panel-body { padding: 14px 16px 6px; }
}
@media (max-width: 767px) {
    #module13 { padding: 0px 0 30px; }
    /* Hover-only lifts read as stuck/sticky on touch - disable the
       transform, keep color/shadow transitions (still useful on :active). */
    .frame-chung.panel:hover, .block.border:hover,
    .category-categoryImageType13 .category-inner-item:hover,
    .col-right.col-12.col-md-3 > a:first-child:hover,
    #module36top .category-item-box:hover,
    .PortalListHPG .category-categoryType-tree2:hover {
        transform: none;
    }
    .tinmoi-tabs { display: flex; width: 100%; }
    .tinmoi-tabs .tablinksa { flex: 1 1 0; text-align: center; padding: 8px 10px !important; }
    .article-news-listType19 .content-type19 .article-title a { font-size: 15.5px; }
}
@media (max-width: 480px) {
    .category-categoryImageType13 { grid-template-columns: 1fr; }
}

/* Category and detail pages share the homepage palette and sidebar components. */
body:has(#whole-page) { background: var(--hy-paper); }
#whole-page { box-shadow: none !important; padding-top: 16px; padding-bottom: 30px; color: var(--hy-ink); font-family: var(--hy-serif); }
#whole-page > .table-list-news { margin-top: 0; }
#whole-page > .table-list-news > .col-left > .columns-widget { margin: 0; padding: 0 12px 18px; background: #fff; border: 1px solid var(--hy-border); border-radius: var(--hy-radius); box-shadow: var(--hy-shadow); }
#whole-page .breadcrumb { background: #f0f5fc; border: 1px solid var(--hy-border); border-radius: 8px; padding: 12px 14px; margin: 0; font-family: var(--hy-sans); font-size: 13px; line-height: 1.6; }
#whole-page .breadcrumb a { color: var(--hy-blue-dark); }
#whole-page .article-news-default { display: flex; gap: 18px; padding: 20px 0; margin: 0; border-bottom: 1px solid var(--hy-border); }
#whole-page .article-news-default::before, #whole-page .article-news-default::after { content: none; }
#whole-page .article-news-default > .article-img { flex: 0 0 30%; width: 30%; float: none; padding: 0 !important; margin: 0; }
#whole-page .article-news-default > .article-img img { width: 100% !important; height: auto !important; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; }
#whole-page .article-news-default > .article-right { flex: 1; min-width: 0; width: auto; float: none; }
#whole-page .article-news-default .article-title { font-family: var(--hy-serif); font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--hy-ink); text-align: left; }
#whole-page .article-news-default .article-title:hover { color: var(--hy-blue); }
#whole-page .article-news-default .article-info { margin: 8px 0; font: 12px/1.5 var(--hy-sans); color: var(--hy-muted); }
#whole-page .article-news-default .article-brief { font-size: 14px; line-height: 1.7; color: var(--hy-muted); text-align: left; }
#whole-page .article-news-default + hr { display: none; }
#whole-page .default-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 22px 0 4px; }
#whole-page .default-pagination a, #whole-page .default-pagination .current { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; margin: 0; border: 1px solid var(--hy-border); border-radius: 8px; font-family: var(--hy-sans); }
#whole-page .default-pagination .current, #whole-page .default-pagination a:hover { background: var(--hy-blue); color: #fff; border-color: var(--hy-blue); }
#whole-page #article25 > header { padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--hy-border); }
#whole-page #article25 .post-date { font: 12px/1.7 var(--hy-sans); color: var(--hy-muted); }
#whole-page #article25 h1.title-detail { font-family: var(--hy-serif); font-size: 26px !important; font-weight: 700; line-height: 1.45; color: var(--hy-blue-dark) !important; margin-bottom: 16px; text-align: left; }
#whole-page #article25 .common-brief { line-height: 1.75; color: var(--hy-ink); }
#whole-page #container { line-height: 1.8; overflow-wrap: anywhere; }
#whole-page #container iframe, #whole-page #container video { max-width: 100%; }
#whole-page .frame-tinlquan .panel-title { color: #fff; }
#whole-page a:focus-visible, #whole-page button:focus-visible { outline: 2px solid var(--hy-blue-bright); outline-offset: 3px; }
@media (max-width: 767px) {
    #whole-page > .table-list-news > .col-left > .columns-widget { padding: 0 4px 12px; }
    #whole-page .article-news-default { gap: 12px; padding: 16px 0; }
    #whole-page .article-news-default .article-title { font-size: 16px; }
    #whole-page #article25 h1.title-detail { font-size: 22px !important; }
    #whole-page .col-right { margin-top: 20px; }
}
@media print {
    body:has(#whole-page), #whole-page { background: #fff; }
    #whole-page > .table-list-news > .col-left > .columns-widget { box-shadow: none; border: 0; }
}

/* Public document library, matching the legacy full-width document listing. */
.public-documents > nav { margin-bottom: 16px; }
.public-documents .documents-filter { display: grid; grid-template-columns: 1fr 1fr 1.4fr auto; gap: 14px; align-items: end; font-family: var(--hy-sans); }
.public-documents .documents-filter label { display: block; font-size: 13px; color: var(--hy-blue-dark); margin-bottom: 6px; }
.public-documents .documents-filter .form-control { height: 40px; border-radius: 7px; border-color: var(--hy-border); font-size: 13px; }
.public-documents .documents-filter .btn { height: 40px; background: var(--hy-blue); border-radius: 7px; }
.public-documents .documents-count { margin: 20px 0 12px; font-size: 13px; color: var(--hy-muted); }
.public-documents .documents-table { min-width: 850px; font-size: 13px; line-height: 1.7; }
.public-documents .documents-table thead { color: #fff; background: var(--hy-gradient-text); }
.public-documents .documents-table td, .public-documents .documents-table th { padding: 12px; border-color: var(--hy-border); }
.public-documents .documents-table td:last-child { width: 40%; }
.public-documents .documents-table p { margin: 0 0 5px; }
.public-documents .documents-files { margin-top: 10px; padding: 8px 10px; border-radius: 7px; background: var(--hy-blue-tint); }
.public-documents .documents-files summary { color: var(--hy-blue-dark); cursor: pointer; font-weight: 600; }
.public-documents .documents-files ul { padding-left: 20px; margin: 8px 0 0; }
@media (max-width: 991px) { .public-documents .documents-filter { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .public-documents .documents-filter { grid-template-columns: 1fr; } }

/* Van ban du thao & QA public styles */
.public-duthao > nav, .public-duthao-detail > nav, .public-qa > nav, .public-qa-detail > nav { margin-bottom: 16px; }
.duthao-section-title { font-size: 17px; font-weight: 700; color: var(--hy-blue-dark); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; font-family: var(--hy-sans); }
.duthao-table { font-size: 13px; line-height: 1.6; }
.duthao-table thead { background: var(--hy-gradient-text); color: #fff; }
.duthao-table td, .duthao-table th { padding: 10px 12px; vertical-align: middle; border-color: var(--hy-border); }
.duthao-divider { margin: 26px 0; border: none; border-top: 1px dashed var(--hy-border); }
.duthao-header-card { background: #f8fafd; border: 1px solid var(--hy-border); border-radius: 8px; padding: 16px 20px; margin-bottom: 20px; }
.duthao-title { font-size: 19px; font-weight: 700; color: var(--hy-blue-dark); line-height: 1.45; margin: 0 0 10px; font-family: var(--hy-sans); }
.duthao-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--hy-muted); font-family: var(--hy-sans); }
.duthao-subheading { font-size: 15px; font-weight: 700; color: var(--hy-blue-dark); margin: 0 0 12px; font-family: var(--hy-sans); }
.duthao-files-box { background: #fbfcfd; border: 1px solid var(--hy-border); border-radius: 8px; padding: 14px 18px; margin-bottom: 20px; }
.duthao-files-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.duthao-files-list li { margin: 0; }
.duthao-pdf-box { margin-bottom: 24px; }
.duthao-pdf-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.duthao-pdf-frame { width: 100%; height: 650px; border: 1px solid var(--hy-border); border-radius: 8px; background: #525659; }
.duthao-feedback-box { background: #fafbfc; border: 1px solid var(--hy-border); border-radius: 8px; padding: 22px; margin-top: 24px; }
.duthao-feedback-header { margin-bottom: 18px; }
.duthao-feedback-form .form-group, .qa-feedback-form .form-group { margin-bottom: 16px; }
.duthao-feedback-form label, .qa-feedback-form label { font-size: 13px; font-weight: 600; color: var(--hy-blue-dark); margin-bottom: 5px; }
.duthao-feedback-form .form-control, .qa-feedback-form .form-control { border-radius: 6px; border-color: var(--hy-border); font-size: 13px; }
.duthao-captcha-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.duthao-captcha-img { height: 36px; border-radius: 4px; border: 1px solid #ccc; }
.duthao-captcha-input { width: 140px; text-transform: uppercase; font-weight: 700; letter-spacing: 2px; text-align: center; }
.duthao-form-actions { margin-top: 20px; }

/* ==========================================================================
   Q&A Page - Chuyên mục Hỏi đáp trực tuyến (chuyen-muc-hoi-dap.html)
   ========================================================================== */
.qa-category-page {
    width: 100%;
    padding: 4px 0 10px;
}

.qa-category-page .pathway-category {
    margin-bottom: 16px;
}

/* Header with Title and Ask Button */
.qa-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--hy-border);
    position: relative;
}

.qa-page-header::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 120px;
    height: 2px;
    background: var(--hy-blue);
}

.qa-header-title-wrap {
    flex: 1;
    min-width: 250px;
}

.qa-page-title {
    font-family: var(--hy-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--hy-blue-dark);
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.5px;
}

.qa-page-title i {
    color: var(--hy-blue);
    font-size: 22px;
}

.qa-page-subtitle {
    margin: 0;
    font-family: var(--hy-sans);
    font-size: 13.5px;
    color: var(--hy-muted);
}

.btn-qa-ask {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #0b5fc4, #063a7d);
    color: #fff !important;
    padding: 9px 18px;
    border-radius: 8px;
    font-family: var(--hy-sans);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(11, 95, 196, 0.22);
    transition: all 0.25s var(--hy-ease);
}

.btn-qa-ask:hover {
    background: linear-gradient(135deg, #2f8ef0, #0b5fc4);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(11, 95, 196, 0.35);
    color: #fff !important;
}

.btn-qa-ask i {
    font-size: 13px;
}

/* Filter Card */
.qa-filter-card {
    background: #f8fafd;
    border: 1px solid var(--hy-border);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 22px;
}

.qa-filter-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qa-filter-fields {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 14px;
}

.qa-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--hy-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--hy-blue-dark);
    margin-bottom: 6px;
}

.qa-label i {
    color: var(--hy-blue);
    font-size: 12px;
}

.qa-input, .qa-select {
    height: 38px;
    border-radius: 7px;
    border: 1px solid var(--hy-border);
    background-color: #fff;
    font-family: var(--hy-sans);
    font-size: 13px;
    padding: 6px 12px;
    color: var(--hy-ink);
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}

.qa-input:focus, .qa-select:focus {
    border-color: var(--hy-blue);
    box-shadow: 0 0 0 3px rgba(11, 95, 196, 0.15);
    outline: none;
}

.qa-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn-qa-search {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--hy-blue);
    color: #fff !important;
    border: none;
    padding: 8px 18px;
    border-radius: 7px;
    font-family: var(--hy-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s var(--hy-ease);
}

.btn-qa-search:hover {
    background: var(--hy-blue-dark);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(11, 95, 196, 0.2);
}

.btn-qa-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--hy-muted) !important;
    border: 1px solid var(--hy-border);
    padding: 8px 14px;
    border-radius: 7px;
    font-family: var(--hy-sans);
    font-size: 13px;
    text-decoration: none !important;
    transition: all 0.2s var(--hy-ease);
}

.btn-qa-reset:hover {
    background: #f1f5fa;
    color: var(--hy-ink) !important;
    border-color: #c0d1e8;
}

/* Filter Summary */
.qa-filter-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--hy-blue-tint);
    border: 1px solid #d4e4f7;
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 20px;
    font-family: var(--hy-sans);
    font-size: 13px;
    color: var(--hy-blue-dark);
}

.qa-clear-link {
    font-weight: 600;
    color: var(--hy-blue);
    text-decoration: underline;
}

.qa-clear-link:hover {
    color: var(--hy-blue-dark);
}

/* Q&A Cards */
.qa-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.qa-card {
    background: #ffffff;
    border: 1px solid var(--hy-border);
    border-radius: 10px;
    padding: 16px 20px;
    transition: all 0.25s var(--hy-ease);
    position: relative;
}

.qa-card:hover {
    border-color: #b5cde8;
    box-shadow: 0 6px 18px rgba(11, 95, 196, 0.09);
    transform: translateY(-2px);
}

.qa-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.qa-user-badge {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qa-avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e3eefc, #cbe0f9);
    color: var(--hy-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.qa-user-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.qa-user-name {
    font-family: var(--hy-sans);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--hy-blue-dark);
    text-decoration: none !important;
}

.qa-user-name:hover {
    color: var(--hy-blue);
}

.qa-post-date {
    font-family: var(--hy-sans);
    font-size: 12px;
    color: var(--hy-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.qa-post-date i {
    font-size: 11px;
}

.qa-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #eaf8ef;
    color: #1a7f37;
    border: 1px solid #c2ebd0;
    padding: 3px 10px;
    border-radius: 20px;
    font-family: var(--hy-sans);
    font-size: 12px;
    font-weight: 600;
}

.qa-status-pill i {
    font-size: 11px;
}

.qa-card-title {
    font-family: var(--hy-serif);
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 10px;
}

.qa-card-title a {
    color: var(--hy-ink);
    text-decoration: none !important;
    transition: color 0.2s;
}

.qa-card-title a:hover {
    color: var(--hy-blue);
}

.qa-card-body {
    font-family: var(--hy-sans);
    font-size: 13.5px;
    line-height: 1.7;
    color: #44546f;
    margin-bottom: 12px;
}

.qa-card-body p {
    margin: 0;
}

.qa-card-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top: 1px dashed var(--hy-border);
    padding-top: 10px;
}

.qa-view-detail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--hy-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--hy-blue);
    text-decoration: none !important;
    transition: all 0.2s var(--hy-ease);
}

.qa-view-detail i {
    font-size: 11px;
    transition: transform 0.2s var(--hy-ease);
}

.qa-view-detail:hover {
    color: var(--hy-blue-dark);
}

.qa-view-detail:hover i {
    transform: translateX(4px);
}

/* Empty State */
.qa-empty-state {
    text-align: center;
    padding: 36px 20px;
    background: #fbfcfd;
    border: 1px dashed var(--hy-border);
    border-radius: 10px;
}

.qa-empty-icon {
    font-size: 44px;
    color: #a4b7d0;
    margin-bottom: 12px;
}

.qa-empty-title {
    font-family: var(--hy-sans);
    font-size: 17px;
    font-weight: 700;
    color: var(--hy-blue-dark);
    margin: 0 0 8px;
}

.qa-empty-desc {
    font-family: var(--hy-sans);
    font-size: 13.5px;
    color: var(--hy-muted);
    max-width: 500px;
    margin: 0 auto 18px;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 767px) {
    .qa-filter-fields {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .qa-page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .btn-qa-ask {
        width: 100%;
        justify-content: center;
    }
    .qa-card {
        padding: 14px 16px;
    }
    .qa-card-title {
        font-size: 15.5px;
    }
}