/* Hai Phong public statistics portal. Identity: classic institutional portal, refined typography and purposeful density.

 * Loaded after module styles. Keep compatibility tokens for legacy modules. */

:root {

    /* Warm Editorial Palette Foundation Tokens */
    --hp-bg-page: #F7F5F0;
    --hp-text-body: #1F2A37;
    --hp-surface-card: #FFFFFF;
    --hp-accent-phuong: #C8553D;
    --hp-brand-navy: var(--hp-blue-primary, #0079B6);
    --hp-brand-deep: #07263E;
    --hp-hairline: #E5E7EB;


    /* Modern E-Government Portal Tokens (mst.gov.vn Design System) */

    --gov-primary: var(--hp-blue-primary, #0079B6);        /* Gov Primary Blue */

    --gov-navy: var(--hp-blue-active, #00699D);           /* Gov Deep Navy */

    --gov-tint: #F0F5FA;           /* Gov Light Tint */

    --gov-red: #DA251D;            /* National Red (Accent) */

    --gov-gold: #D97706;           /* Gold / Amber */

    --gov-bg-page: #F4F6F9;        /* Body Background */

    --gov-surface: #FFFFFF;        /* Surface White */

    --gov-text-main: #111827;      /* Text Primary (14.5:1) */

    --gov-text-sub: #1F2937;       /* Text Secondary / Sapo */

    --gov-text-muted: #374151;     /* Text Muted / Date */

    --gov-border: #CBD5E1;         /* Border Hairline */

    --gov-divider: #E2E8F0;        /* Divider Line */

    --gov-font: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;



    /* Theme Tokens Aliases */

    --hp-primary: var(--gov-primary);

    --hp-deep: #111827;

    --hp-accent: var(--gov-red);

    --hp-paper: var(--gov-bg-page);

    --hp-surface: var(--gov-surface);

    --hp-ink: #111827;

    --hp-muted: #374151;

    --hp-border: var(--gov-border);

    --hp-border-subtle: var(--gov-divider);

    --hp-tint: var(--gov-tint);

    --hp-up: #15803D;

    --hp-down: var(--gov-red);

    --hp-radius-sm: 2px;

    --hp-radius-md: 2px;

    --hp-shadow-card: 0 1px 3px rgba(15, 23, 42, 0.05);

    --hp-shadow-dropdown: 0 8px 20px rgba(var(--hp-blue-highlight-rgb, 0, 145, 216), 0.12);

    --hp-font: var(--gov-font);



    /* Legacy compatibility tokens */

    --vtb-primary: var(--gov-primary); --vtb-primary-dark: var(--gov-navy); --vtb-primary-light: var(--gov-tint);

    --vtb-accent: var(--hp-accent-phuong); --vtb-accent-hover: #B71C1C; --vtb-secondary: var(--gov-primary);

    --vtb-bg-body: var(--hp-bg-page); --vtb-bg-surface: var(--gov-surface); --vtb-border: var(--gov-border); --vtb-divider: var(--gov-divider);

    --vtb-text-main: var(--hp-text-body); --vtb-text-muted: var(--gov-text-sub); --vtb-font-sans: var(--gov-font);

    --vtb-up: var(--hp-up); --vtb-down: var(--hp-down); --vtb-border-light: var(--gov-border);

    --stat-navy: #111827; --stat-blue: var(--gov-primary); --stat-bg: var(--gov-bg-page); --stat-border: var(--gov-border);

    --brand-navy-dark: #111827; --brand-royal-blue: var(--gov-primary); --bg-surface-white: #fff;

    --bg-page-neutral: var(--gov-bg-page); --text-primary-black: #111827; --text-secondary-slate: #1F2937;

}

body {
    background-color: var(--hp-bg-page);
    color: var(--hp-text-body);
}

html { scroll-padding-top: 24px; }

body.hp-editorial {
    margin: 0;
    color: var(--hp-text-body);
    background-color: var(--hp-bg-page);
    background: var(--hp-bg-page);
    font: 400 15px/1.6 var(--hp-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hp-editorial *, .hp-editorial *::before, .hp-editorial *::after { box-sizing: border-box; }

.hp-editorial [hidden] { display: none !important; }

.hp-editorial .container { width: 100%; max-width: 1240px; padding-right: 24px; padding-left: 24px; }

.hp-editorial .container .container { max-width: none; padding: 0; }

.hp-intro-grid::before, .hp-intro-grid::after, .hp-utility-inner::before, .hp-utility-inner::after,

.hp-editorial .stat-brand-wrap::before, .hp-editorial .stat-brand-wrap::after,

.hp-publications-layout::before, .hp-publications-layout::after, .hp-two-columns::before, .hp-two-columns::after,

.stat-dissemination-row::before, .stat-dissemination-row::after, .stat-footer-row::before, .stat-footer-row::after { display: none; }

.hp-editorial main { min-height: 50dvh; }

.hp-editorial a { color: var(--hp-blue-link, #005781); text-decoration: none !important; transition: color 0.15s ease; }

.hp-editorial a:hover, .hp-editorial a:focus { color: var(--hp-blue-link, #005781); text-decoration: none !important; }

.hp-editorial a:focus-visible, .hp-editorial button:focus-visible, .hp-editorial input:focus-visible,

.hp-editorial select:focus-visible, .hp-editorial textarea:focus-visible, .hp-editorial summary:focus-visible { outline: 2px solid var(--hp-primary); outline-offset: 2px; }

.hp-editorial button, .hp-editorial input, .hp-editorial select, .hp-editorial textarea { font-family: inherit; }

.hp-editorial button, .hp-editorial summary { cursor: pointer; }

.hp-editorial p { margin: 0 0 16px; text-wrap: pretty; }

.hp-editorial h1, .hp-editorial h2, .hp-editorial h3, .hp-editorial h4 { color: var(--hp-deep); font-family: var(--hp-font); font-weight: 700; line-height: 1.35; text-wrap: balance; }

.hp-editorial h1 { font-size: 30px; letter-spacing: -0.01em; }

.hp-editorial h2 { font-size: 22px; letter-spacing: -0.01em; }

.hp-editorial h3 { font-size: 17px; }

.hp-editorial img { max-width: 100%; height: auto; }

.hp-editorial .tabular-nums, .hp-editorial .vtb-num, .hp-editorial .table td { font-variant-numeric: tabular-nums; }

.hp-skip-link { position: fixed; z-index: 9999; top: -120px; left: 16px; padding: 10px 18px; background: #fff; border: 2px solid var(--hp-primary); border-radius: 3px; font-weight: 600; font-size: 13px; opacity: 0; pointer-events: none; transition: top 0.2s ease, opacity 0.2s ease; }

.hp-skip-link:focus { transform: translateY(0); }



/* Masthead and topbar */

.hp-editorial .stat-topbar { background: #FFFFFF; color: var(--hp-muted); font-size: 12.5px; border-bottom: 1px solid var(--hp-border-subtle); }

.hp-utility-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 38px; }

.hp-portal-label { font-weight: 600; color: var(--hp-deep); display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0.2px; font-size: 12px; }

.hp-portal-label::before { content: ""; display: inline-block; width: 4px; height: 13px; background: var(--hp-accent); border-radius: 1px; }

.hp-topbar-date { font-size: 12px; color: var(--hp-muted); display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; }

.hp-topbar-date .fa { color: var(--hp-primary); }

.hp-editorial .stat-topbar-right, .hp-editorial .gov-accessibility-tools { display: flex; align-items: center; gap: 10px; }

.hp-editorial .stat-topbar-right a { color: var(--hp-blue-link, #005781); font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }

.hp-editorial .stat-topbar-right a:hover { color: var(--hp-primary); text-decoration: none; }

.hp-editorial .gov-accessibility-tools { gap: 3px; border: 0; background: transparent; padding: 0; }

.hp-editorial .a-label { margin-right: 4px; font-size: 11.5px; font-weight: 500; }

.hp-editorial .btn-font-size { border: 1px solid var(--hp-border); border-radius: 3px; background: #fff; min-width: 26px; min-height: 26px; padding: 2px 5px; color: var(--hp-ink); font-size: 11px; font-weight: 600; line-height: 1; transition: all 0.15s ease; }

.hp-editorial .btn-font-size:hover { background: var(--hp-tint); border-color: var(--hp-primary); color: var(--hp-primary); }

.hp-editorial .btn-font-size.active { background: var(--hp-primary); border-color: var(--hp-primary); color: #fff; text-decoration: none; }

.hp-editorial .stat-topbar .socials, .hp-editorial .stat-topbar ul { display: flex; align-items: center; gap: 14px; margin: 0; padding: 0; list-style: none; }



/* Brand Header */

.hp-editorial .stat-brand-header { background: #FFFFFF; border: 0; border-bottom: 1px solid var(--hp-border-subtle); }

.hp-editorial .stat-brand-wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 14px; padding-bottom: 14px; }

.hp-editorial .stat-brand-identity { display: flex; align-items: center; gap: 16px; color: var(--hp-primary); text-decoration: none; min-width: 0; }

.hp-editorial .main-logo { width: 68px; height: 68px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.06)); }

.hp-editorial .stat-brand-titles .sub-title { font-size: 12px; font-weight: 700; color: var(--hp-muted); margin-bottom: 2px; letter-spacing: 0.6px; text-transform: uppercase; }

.hp-editorial .stat-brand-titles .main-title { font-size: clamp(19px, 2.2vw, 24px); font-weight: 800; line-height: 1.3; color: var(--hp-primary); letter-spacing: -0.01em; }

.hp-editorial .stat-brand-titles .city-title { font-size: 11.5px; font-weight: 600; color: #64748B; margin-top: 3px; letter-spacing: 0.8px; text-transform: uppercase; }

.hp-contact { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--hp-tint); border: 1px solid var(--hp-border); border-radius: 4px; text-decoration: none; flex-shrink: 0; transition: all 0.2s ease; }

.hp-contact:hover { background: #E2E8F0; border-color: var(--hp-primary); text-decoration: none; }

.hp-contact-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--hp-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }

.hp-contact-text { display: flex; flex-direction: column; text-align: left; }

.hp-contact-text span { color: var(--hp-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }

.hp-contact-text strong { color: var(--hp-primary); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }



/* Navbar and Dropdowns */

header.hp-header { position: relative !important; z-index: 1050 !important; }
.hp-editorial .stat-navbar { border: 0; border-top: 1px solid var(--hp-blue-highlight, #0091D8); border-bottom: none !important; background: var(--hp-primary); position: relative; z-index: 1050 !important; min-height: 48px; box-shadow: 0 2px 4px rgba(var(--hp-blue-highlight-rgb, 0, 145, 216), 0.1); }

.hp-editorial #menusite { width: 100%; }

.hp-editorial #menusite .navbar { margin: 0; min-height: 0; border: 0; background: transparent; }

.hp-editorial #menusite .navbar-header, .hp-editorial #menusite .navbar-nav::before, .hp-editorial #menusite .navbar-nav::after { display: none; }

.hp-editorial #menusite .navbar-collapse { display: block; padding: 0; border: 0; overflow: visible; }

.hp-editorial #menusite > ul, .hp-editorial #menusite .navbar-nav { display: flex; justify-content: flex-start; gap: 4px; flex-wrap: nowrap; width: 100%; list-style: none; margin: 0; padding: 0; float: none; }

.hp-editorial #menusite .navbar-nav > li { float: none; position: relative; background: transparent; border: 0; }

.hp-editorial #menusite .navbar-nav > li > a { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 12px 16px; color: #FFFFFF; font-size: 13.5px; font-weight: 600; text-transform: none; white-space: nowrap; border: 0; background: transparent; transition: background 0.15s ease, color 0.15s ease; border-radius: 2px 2px 0 0; }

.hp-editorial #menusite .navbar-nav > li:first-child > a { padding-left: 12px; }

.hp-editorial #menusite .navbar-nav > li.active > a, .hp-editorial #menusite .navbar-nav > li > a:hover { color: #FFFFFF; background: var(--hp-blue-active, #00699D); box-shadow: inset 0 -3px #FFFFFF; text-decoration: none; }

.hp-editorial #menusite ul ul { display: none; position: absolute; top: 100%; left: 0; min-width: 250px; padding: 6px 0; background: #FFFFFF; border: 1px solid var(--hp-border); border-radius: 4px; box-shadow: var(--hp-shadow-dropdown); list-style: none; z-index: 1060 !important; }

.hp-editorial #menusite li:hover > ul, .hp-editorial #menusite li:focus-within > ul, .hp-editorial #menusite li.hp-submenu-open > ul { display: block; visibility: visible; opacity: 1; transform: none; transition: none; }

.hp-editorial #menusite li.hp-submenu-dismissed > ul { display: none !important; }

.hp-editorial #menusite ul ul ul { top: 0; left: 100%; margin-left: 1px; }

.hp-editorial #menusite .dropdown-submenu { display: block; position: relative; }

.hp-editorial #menusite ul ul a { display: block; padding: 10px 18px; font-size: 13.5px; font-weight: 500; color: var(--hp-ink); white-space: normal; background: #FFFFFF; line-height: 1.4; transition: all 0.12s ease; border-left: 3px solid transparent; }

.hp-editorial #menusite ul ul a:hover { background: var(--hp-tint); color: var(--hp-primary); border-left-color: var(--hp-primary); text-decoration: none; }

.hp-menu-toggle, .hp-mobile-navigation { display: none; }

.hp-mobile-navigation ul { padding: 0; margin: 0; list-style: none; }

.hp-mobile-navigation a { display: block; padding: 12px 0; font-size: 15px; min-height: 44px; color: var(--hp-ink); font-weight: 600; }

.hp-mobile-navigation ul ul { display: block; position: static; float: none; min-width: 0; width: auto; height: auto; visibility: visible; opacity: 1; transform: none; background: transparent; box-shadow: none; padding: 0 0 0 20px; border: 0; border-left: 2px solid var(--hp-border); }

.hp-mobile-navigation ul ul a { font-weight: 400; font-size: 14px; color: var(--hp-muted); }

.hp-mobile-navigation .expand { display: none; }



/* Breadcrumbs */

.hp-editorial .third-nav { background: #FFFFFF; padding: 10px 0; border-bottom: 1px solid var(--hp-border-subtle); font-size: 13px; }

.hp-editorial .breadcrumbs { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; list-style: none; padding: 0; }

.hp-editorial .breadcrumbs li a { color: var(--hp-primary); font-weight: 500; }

.hp-editorial .breadcrumbs li a:hover { text-decoration: none !important; color: var(--hp-accent); }

.hp-editorial .breadcrumbs li::after { content: "/"; margin-left: 6px; color: var(--hp-muted); font-size: 11px; }

.hp-editorial .breadcrumbs li:last-child::after { display: none; }

.hp-editorial .breadcrumbs li:last-child { color: var(--hp-muted); font-weight: 600; }

.hp-editorial .section-body { padding: 28px 0 48px; }

.hp-editorial .section-body:has(> .container > .row > div:empty) { padding: 0; }



/* Compact search band retains the familiar blue institutional identity. */

.hp-intro { background: var(--hp-deep); color: #fff; }

.hp-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 48px; padding-block: 22px; align-items: center; }

.hp-editorial .hp-intro h1 { font: 700 24px/1.4 var(--hp-font); color: #fff; margin: 0 0 5px; }

.hp-editorial .hp-intro-description { color: #c9dce9; font-size: 14px; margin: 0; }

.hp-search-area { min-width: 0; }

.hp-search-form { position: relative; margin: 0; }

.hp-search-control { display: flex; align-items: center; border: 1px solid #fff; background: #fff; border-radius: 2px; padding: 4px; gap: 10px; min-height: 50px; }

.hp-search-control > .fa { margin-left: 12px; color: var(--hp-muted); font-size: 16px; }

.hp-editorial #stat-search-input { border: 0; background: #fff; color: var(--hp-ink); min-width: 0; flex: 1; padding: 8px 0; font-size: 14px; height: auto; box-shadow: none; }

.hp-editorial #stat-search-input::placeholder { color: var(--hp-muted); opacity: 1; }

.hp-editorial .btn-search, .hp-editorial .hp-button { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 44px; border: 1px solid var(--hp-primary); border-radius: 2px; background: var(--hp-primary); color: #fff; padding: 10px 20px; font-size: 13px; font-weight: 700; white-space: nowrap; text-decoration: none; }

.hp-editorial .btn-search { background: var(--hp-accent); border-color: var(--hp-accent); min-height: 42px; padding: 8px 24px; }

.hp-editorial .btn-search:hover { background: #921c22; border-color: #921c22; }

.hp-editorial .hp-button:hover { background: var(--hp-deep); color: #fff; }

.hp-editorial .stat-hero-quicklinks { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 9px; font-size: 12px; color: #c9dce9; }

.hp-editorial .stat-hero-quicklinks a { color: #fff; text-decoration: none; }

.hp-editorial .stat-hero-quicklinks a:hover { text-decoration: none !important; }



/* Homepage sections and data */

.hp-section { padding: 20px 0; }

.hp-section-heading { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--hp-border); }

.hp-editorial .hp-section-heading h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--hp-primary); }

.hp-text-link { font-size: 12px; font-weight: 400; text-decoration: none; }

.hp-text-link span { color: var(--hp-accent); margin-left: 8px; }

.hp-editorial .hp-section-description { font-size: 13px; color: var(--hp-muted); margin: -4px 0 24px; }

.hp-data-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }

.hp-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--hp-border); background: #fff; }

.hp-kpi { padding: 16px 20px; border-right: 1px solid var(--hp-border); border-bottom: 1px solid var(--hp-border); min-width: 0; }

.hp-kpi:nth-child(even) { border-right: 0; }

.hp-kpi:nth-last-child(-n+2) { border-bottom: 0; }

.hp-editorial .hp-kpi h3 { min-height: 36px; margin: 0 0 2px; font: 700 13px/1.45 var(--hp-font); text-wrap: initial; }

.hp-kpi-code { color: var(--hp-muted); font-size: 11px; }

.hp-kpi-value { color: var(--hp-primary); font-size: 32px; font-weight: 700; line-height: 1.25; margin: 8px 0; overflow-wrap: anywhere; }

.hp-editorial .hp-kpi-period { font-size: 12px; margin: 0 0 3px; color: var(--hp-muted); }

.hp-editorial .hp-kpi-note { font-size: 11px; margin: 0; color: var(--hp-muted); line-height: 1.6; }

.hp-chart-panel { margin: 0; padding: 18px 20px; border: 1px solid var(--hp-border); background: #fff; min-width: 0; }

.hp-chart-heading { display: flex; align-items: baseline; gap: 20px; justify-content: space-between; }

.hp-editorial .hp-chart-heading h3 { font-size: 18px; font-weight: 700; margin: 0; }

.hp-chart-unit { font-size: 12px; color: var(--hp-muted); }

.hp-chart-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--hp-border); margin: 16px 0 20px; flex-wrap: wrap; }

.hp-chart-tabs button { padding: 10px 0 12px; border: 0; background: transparent; font-size: 12px; min-height: 44px; color: var(--hp-muted); border-bottom: 2px solid transparent; }

.hp-chart-tabs button.active { color: var(--hp-primary); border-bottom-color: var(--hp-accent); font-weight: 700; }

.stat-chart-canvas-wrap { height: 275px; position: relative; }

.hp-chart-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-top: 16px; font-size: 12px; color: var(--hp-muted); }

.hp-chart-foot p { margin: 0; }

.hp-chart-foot details[open] { flex-basis: 100%; }

.hp-chart-foot .table td { text-align: right; }

.hp-chart-foot summary { color: var(--hp-primary); text-decoration: none !important; text-underline-offset: 3px; min-height: 30px; }

.hp-empty-state { display: grid; place-content: center; height: 100%; padding: 32px; text-align: center; background: var(--hp-paper); color: var(--hp-muted); }

.hp-release-section { background: #fff; border-block: 1px solid var(--hp-border); }

.hp-featured-news:empty, .hp-secondary-content > .container > div:empty { display: none; }

.hp-featured-news:not(:empty) { margin-bottom: 28px; }

.hp-publications .container { background: #fff; border: 1px solid var(--hp-border); padding-block: 20px; }

.hp-publication-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.hp-publication-list > a { padding: 6px 20px 8px 0; border-right: 1px solid var(--hp-border); display: block; text-decoration: none; }

.hp-publication-list > a:last-child { border-right: 0; }

.hp-publication-list strong { display: block; font-size: 16px; font-weight: 700; color: var(--hp-primary); margin-bottom: 8px; }

.hp-publication-list small { display: block; color: var(--hp-muted); font-size: 13px; }

.hp-two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }

.hp-three-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }

.hp-surveys-section { background: var(--hp-paper); border-top: 1px solid var(--hp-border); }

.stat-services-banner { display: flex; justify-content: space-between; align-items: center; gap: 32px; border-top: 1px solid var(--hp-border); margin-top: 36px; padding-top: 28px; }

.hp-editorial .stat-services-banner h3 { font-size: 19px; margin: 0 0 8px; }

.hp-editorial .stat-services-banner p { color: var(--hp-muted); font-size: 13px; margin: 0; }

.hp-secondary-content { padding: 32px 0; }

.hp-secondary-content:has(> .container > .hp-three-columns > div:empty):not(:has(img)):not(:has(a)) { display: none; }



/* Calendar, legal information and survey blocks */

.stat-dissemination-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; margin: 0; }

.hp-editorial .stat-dissem-col { width: auto; padding: 0; float: none; min-width: 0; }

.release-panel-header, .vtb-sec-header { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; flex-wrap: wrap; margin-bottom: 20px; }

.hp-editorial .vtb-sec-kicker { display: none; }

.hp-editorial .release-panel-title, .hp-editorial .vtb-sec-title { font-size: 23px; font-weight: 700; margin: 0; text-transform: none; }

.btn-view-all-schedule, .vtb-sec-link { font-size: 12px; white-space: nowrap; }

.release-row { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--hp-border); align-items: flex-start; }

.release-date-badge { min-width: 52px; text-align: center; color: var(--hp-primary); }

.r-day { display: block; font: 400 32px/1.1 var(--hp-font); }

.r-month { display: block; font-size: 12px; margin-top: 4px; color: var(--hp-muted); }

.release-info { min-width: 0; flex: 1; }

.release-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--hp-muted); }

.r-status-published { color: var(--hp-up); }

.r-status-upcoming { color: var(--hp-muted); }

.hp-editorial .release-doc-title { font-size: 15px; line-height: 1.6; margin: 6px 0 0; font-weight: 400; }

.release-action { font-size: 12px; padding-top: 5px; }

.file-tag { font-size: 12px; color: var(--hp-accent); }

.upcoming-label { color: var(--hp-muted); }

.law-quick-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--hp-border); flex-wrap: wrap; margin-bottom: 16px; }

.law-tab-btn { min-height: 44px; background: transparent; padding: 8px 0; border: 0; border-bottom: 2px solid transparent; font-size: 12px; color: var(--hp-muted); }

.law-tab-btn.active { border-bottom-color: var(--hp-accent); color: var(--hp-primary); }

.law-ro-card, .law-faq-card { padding: 16px 0; border-bottom: 1px solid var(--hp-border); }

.law-ro-header, .law-faq-question-bar { display: flex; align-items: baseline; gap: 10px; }

.law-ro-number { color: var(--hp-muted); font-size: 12px; }

.hp-editorial .law-ro-title, .hp-editorial .law-faq-q-title { font-size: 14px; line-height: 1.6; margin: 0; }

.law-ro-body, .law-ro-desc, .law-ro-detail-box, .law-faq-a-body { font-size: 12px; color: var(--hp-muted); margin-top: 8px; }

.law-ro-toggle-btn { display: inline-block; margin-top: 8px; font-size: 12px; }

.law-ro-legal-ref, .law-faq-ref-bar { font-size: 12px; margin-bottom: 8px; }

.law-faq-q-badge { font-size: 12px; color: var(--hp-muted); flex-shrink: 0; }

.law-img-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.law-img-thumb-box { position: relative; }

.law-img-thumb-box img { width: 100%; height: 140px; object-fit: cover; object-position: top; }

.law-img-hover-overlay, .law-img-code-badge { display: none; }

.hp-editorial .law-img-title { font-size: 12px; margin: 10px 0; }

.law-img-summary { font-size: 12px; }

.law-img-actions { display: flex; gap: 14px; font-size: 12px; }

.law-modal-overlay { z-index: 100; }

.vtb-survey-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }

.vtb-survey-card { padding: 22px; border: 1px solid var(--hp-border); background: #fff; display: flex; flex-direction: column; justify-content: space-between; }

.survey-top-bar { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--hp-muted); flex-wrap: wrap; }

.hp-editorial .survey-title { font-size: 16px; line-height: 1.5; margin: 14px 0 20px; }

.survey-meta-list { font-size: 12px; color: var(--hp-muted); margin: 0; }

.survey-meta-item { display: flex; gap: 8px; margin-bottom: 8px; }

.survey-meta-item dt { font-weight: 400; flex-shrink: 0; }

.survey-card-footer { margin-top: 20px; }

.progress-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }

.progress-bar-bg { height: 3px; background: var(--hp-border); margin-top: 8px; }

.progress-bar-fill { height: 100%; background: var(--hp-primary); }

.survey-btn-group { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 16px; font-size: 12px; }

.btn-survey-primary, .btn-survey-outline { min-height: 36px; display: inline-flex; align-items: center; }



/* Agency news: an actual lead story, related stories and a clear notice column. */

.hp-lead-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 28px; padding-block: 22px; border: 1px solid var(--hp-border); background: #fff; }

.hp-lead-layout::before, .hp-lead-layout::after { display: none; }

.hp-news-main, .hp-agency-sidebar { min-width: 0; }

.hp-editorial .hp-news-main .section-hotnews { background: transparent; padding: 0; }

.hp-news-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }

.hp-news-grid:not(:has(.hp-related-story)) { grid-template-columns: 1fr; }

.hp-related-news:not(:has(.hp-related-story)) { display: none; }

.hp-lead-story { min-width: 0; }

.hp-lead-image { display: block; overflow: hidden; background: var(--hp-paper); }

.hp-editorial .hp-lead-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; }

.hp-story-meta { display: flex; flex-wrap: wrap; gap: 5px 14px; font-size: 11px; color: var(--hp-muted); margin: 12px 0 7px; }

.hp-story-meta a { font-weight: 700; }

.hp-editorial .hp-lead-story h3 { font-size: 21px; font-weight: 700; line-height: 1.45; margin: 0 0 12px; text-wrap: initial; }

.hp-editorial .hp-lead-story p { font-size: 14px; line-height: 1.65; color: var(--hp-muted); margin: 0; }

.hp-related-news { display: flex; flex-direction: column; gap: 18px; }

.hp-related-story { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; align-items: start; }

.hp-editorial .hp-related-image img { width: 78px; height: 58px; object-fit: cover; display: block; }

.hp-editorial .hp-related-story h3 { font-size: 14px; line-height: 1.55; font-weight: 700; margin: 0 0 5px; text-wrap: initial; }

.hp-related-story h3 a { color: var(--hp-ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

.hp-related-story h3 a:hover { color: var(--hp-primary); text-decoration: none !important; }

.hp-story-date { color: var(--hp-muted); font-size: 11px; }

.hp-notice-panel { border: 1px solid var(--hp-border); background: #fff; }

.hp-panel-heading { display: flex; align-items: center; justify-content: space-between; background: var(--hp-tint); border-bottom: 1px solid var(--hp-border); padding: 12px 16px; }

.hp-editorial .hp-panel-heading h2 { font-size: 17px; margin: 0; font-weight: 700; color: var(--hp-primary); }

.hp-panel-heading > a { min-width: 28px; text-align: center; }

.hp-notice-panel .stat-notif-list { padding: 0 16px; }

.hp-notice-panel .stat-notif-row:last-child { border-bottom: 0; }

.hp-editorial .hp-notice-panel .stat-notif-title { font-size: 14px; line-height: 1.6; font-weight: 400; }

.hp-agency-resources { margin-top: 16px; border: 1px solid var(--hp-border); background: var(--hp-paper); }

.hp-agency-resources > a { display: flex; gap: 12px; align-items: center; min-height: 46px; padding: 10px 16px; font-size: 13px; font-weight: 700; }

.hp-agency-resources > a + a { border-top: 1px solid var(--hp-border); }

.hp-agency-resources .fa { width: 18px; color: var(--hp-primary); text-align: center; }

.hp-agency-resources > a:hover { background: var(--hp-tint); text-decoration: none; }

.hp-document-list > div { min-width: 0; }

.stat-notif-row { padding: 16px 0; border-bottom: 1px solid var(--hp-border); }

.hp-editorial .stat-notif-title { font-size: 15px; line-height: 1.6; margin: 0; font-weight: 400; }

.stat-notif-bullet { display: none; }

.hp-editorial .section-news-tabs .nav { display: flex; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--hp-border); margin: 24px 0; }

.hp-editorial .section-news-tabs .nav a { padding: 10px 0; margin-right: 20px; font-size: 14px; background: transparent; }

.hp-editorial .section-news-tabs .nav .active a { box-shadow: inset 0 -2px var(--hp-accent); }

.hp-editorial .newscat-style2 img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.hp-editorial .newscat-style2 h3 { font-size: 17px; line-height: 1.5; }



/* Shared module surfaces: respect existing semantics and form actions. */

.hp-editorial .panel, .hp-editorial .well, .hp-editorial .stat-card-box { border: 1px solid var(--hp-border); border-radius: 4px; box-shadow: var(--hp-shadow-card); background: #fff; }

.hp-editorial .panel-heading, .hp-editorial .panel-default > .panel-heading { background: var(--hp-tint); color: var(--hp-deep); border-color: var(--hp-border); padding: 14px 18px; font-weight: 700; }

.hp-editorial .panel-body { padding: 20px; }

.hp-editorial .panel-title { font-size: 17px; font-weight: 700; color: var(--hp-primary); }

.hp-editorial .form-control { min-height: 42px; height: auto; padding: 8px 12px; border: 1px solid var(--hp-border); border-radius: 4px; background: #fff; color: var(--hp-ink); font-size: 14px; box-shadow: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }

.hp-editorial .form-control:focus { border-color: var(--hp-primary); box-shadow: 0 0 0 3px rgba(var(--hp-blue-highlight-rgb, 0, 145, 216), 0.15); }

.hp-editorial .btn { border-radius: 4px; min-height: 40px; padding: 8px 16px; font-weight: 600; font-size: 13.5px; box-shadow: none; white-space: normal; transition: all 0.15s ease; }

.hp-editorial .btn-primary { background: var(--hp-primary); border-color: var(--hp-primary); color: #fff; }

.hp-editorial .btn-primary:hover { background: var(--hp-blue-active, #00699D); border-color: var(--hp-blue-active, #00699D); color: #fff; }

.hp-editorial .btn-default { background: #fff; border-color: var(--hp-border); color: var(--hp-primary); }

.hp-editorial .btn-default:hover { background: var(--hp-tint); border-color: var(--hp-primary); color: var(--hp-deep); }



/* Tables and data lists */

.hp-editorial .table-responsive { width: 100%; overflow-x: auto; border: 1px solid var(--hp-border); border-radius: 4px; background: #fff; box-shadow: var(--hp-shadow-card); margin-bottom: 24px; }

.hp-editorial .table { font-size: 13.5px; margin-bottom: 0; color: var(--hp-ink); }

.hp-editorial .table th { padding: 12px 14px; background: #F1F5F9; color: var(--hp-deep); border-bottom: 2px solid var(--hp-border); font-weight: 700; vertical-align: middle; text-transform: uppercase; font-size: 12px; letter-spacing: 0.3px; }

.hp-editorial .table td { padding: 12px 14px; border-top: 1px solid var(--hp-border-subtle); vertical-align: middle; }

.hp-editorial .table-hover tbody tr:hover { background: #EDF4F9; }

.hp-editorial .table caption { font-size: 13px; color: var(--hp-muted); padding: 8px 14px; }

.hp-editorial .table td a[href*="download"], .hp-editorial .table td a:has(em.fa-download) { display: inline-flex; align-items: center; gap: 5px; background: #F0F4F8; color: var(--hp-primary); border: 1px solid var(--hp-border); border-radius: 3px; padding: 5px 12px; font-size: 12px; font-weight: 600; text-decoration: none; transition: all 0.15s ease; }

.hp-editorial .table td a[href*="download"]:hover, .hp-editorial .table td a:has(em.fa-download):hover { background: var(--hp-primary); color: #FFFFFF; border-color: var(--hp-primary); text-decoration: none; }



.hp-editorial .pagination > li > a, .hp-editorial .pagination > li > span { min-height: 40px; min-width: 40px; padding: 8px 14px; color: var(--hp-primary); border-color: var(--hp-border); border-radius: 3px; font-weight: 600; font-size: 13px; }

.hp-editorial .pagination > .active > a, .hp-editorial .pagination > .active > span { background: var(--hp-primary); border-color: var(--hp-primary); color: #fff; }

.hp-editorial .alert { border-radius: 4px; font-size: 14px; border: 1px solid; }

.hp-editorial .hp-module-intro { padding: 8px 0 24px; margin-bottom: 24px; border-bottom: 2px solid var(--hp-border-subtle); }

.hp-editorial .hp-module-intro h1 { font: 800 26px/1.3 var(--hp-font); margin: 0 0 12px; color: var(--hp-deep); text-transform: none; letter-spacing: -0.01em; }

.hp-editorial .hp-module-intro p { color: var(--hp-muted); font-size: 14.5px; max-width: 850px; line-height: 1.6; }

.hp-editorial .hp-module-intro .hp-module-category { font-size: 12px; font-weight: 700; margin-bottom: 8px; color: var(--hp-accent); text-transform: uppercase; letter-spacing: 0.5px; }



.hp-editorial .stat-gtsx-container, .hp-editorial .stat-surveys-page { padding: 0; }

.hp-editorial .gtsx-filter-card { background: #FFFFFF; border: 1px solid var(--hp-border); border-radius: 4px; padding: 20px; margin-bottom: 24px; box-shadow: var(--hp-shadow-card); }

.hopbao-filter-card .hp-filter-row .form-control,
.hopbao-filter-card .hp-filter-search > .btn { height: 42px !important; }

.hp-editorial #news-bodyhtml, .hp-editorial .news-bodyhtml, .hp-editorial .bodytext { font-size: 15.5px; line-height: 1.75; color: var(--hp-ink); }

.hp-editorial .news-detail h1 { font-family: var(--hp-font); font-weight: 800; font-size: 26px; line-height: 1.35; color: var(--hp-deep); }

.hp-editorial .ktxh-page-wrapper { font-family: var(--hp-font); }

.hp-editorial .ktxh-page-wrapper select:focus-visible, .hp-editorial .ktxh-page-wrapper input:focus-visible { outline: 2px solid var(--hp-primary); outline-offset: 2px; }

.hp-editorial .ktxh-filter-group select:focus, .hp-editorial .ktxh-filter-group input:focus { border-color: var(--hp-primary); box-shadow: none; }

.hp-editorial .hp-submenu-toggle { background: transparent; color: inherit; border: 0; padding: 8px; min-width: 36px; min-height: 36px; }

.hp-editorial .hp-filter-label { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--hp-deep); }



.hp-editorial .stat-search-header-box { background: #FFFFFF; border: 1px solid var(--hp-border); border-radius: 4px; padding: 24px; box-shadow: var(--hp-shadow-card); margin-bottom: 24px; }

.hp-editorial .stat-search-bar-wrap { display: flex; flex-wrap: wrap; gap: 12px; }

.hp-editorial .stat-search-bar-wrap > label { flex-basis: 100%; font-weight: 700; color: var(--hp-deep); font-size: 14px; }

.hp-editorial .stat-search-query-input { flex: 1; width: auto; min-width: 140px; min-height: 44px; border: 1px solid var(--hp-border); border-radius: 4px; background: #fff; font-size: 15px; padding: 8px 14px; }

.hp-editorial .stat-search-query-input:focus { border-color: var(--hp-primary); outline: 0; box-shadow: 0 0 0 3px rgba(var(--hp-blue-highlight-rgb, 0, 145, 216), 0.15); }

.hp-editorial .stat-search-btn-submit { min-height: 44px; padding: 8px 22px; background: var(--hp-accent); color: #fff; border: 0; border-radius: 4px; font-size: 13.5px; font-weight: 700; transition: background 0.15s ease; }

.hp-editorial .stat-search-btn-submit:hover { background: #921C22; }

.hp-editorial .stat-search-filter-pills { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px; align-items: baseline; }

.hp-editorial .stat-filter-pill { background: #F0F4F8; padding: 4px 12px; border: 1px solid var(--hp-border); border-radius: 14px; font-size: 12px; font-weight: 600; color: var(--hp-primary); text-decoration: none; transition: all 0.15s ease; }

.hp-editorial .stat-filter-pill:hover, .hp-editorial .stat-filter-pill.active { background: var(--hp-primary); color: #FFFFFF; border-color: var(--hp-primary); }



.hp-editorial .stat-direct-answer-card { padding: 24px; background: #FFFFFF; border: 1px solid var(--hp-border); border-radius: 4px; box-shadow: var(--hp-shadow-card); margin-bottom: 24px; }

.hp-editorial .stat-direct-badge-top { background: var(--hp-tint); font-size: 11.5px; font-weight: 700; color: var(--hp-primary); padding: 3px 10px; border-radius: 12px; display: inline-block; margin-bottom: 12px; }

.hp-editorial .stat-direct-title { font-size: 22px; font-weight: 700; color: var(--hp-deep); margin: 0 0 16px; }

.hp-editorial .stat-direct-metric-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 20px 0; }

.hp-editorial .stat-direct-main-value { font-size: 36px; color: var(--hp-up); font-weight: 800; font-variant-numeric: tabular-nums; }

.hp-editorial .stat-direct-actions, .hp-editorial .stat-view-toggle-btns { display: flex; flex-wrap: wrap; gap: 10px; }

.hp-editorial .stat-direct-btn, .hp-editorial .stat-view-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; min-height: 40px; border: 1px solid var(--hp-border); background: #fff; color: var(--hp-primary); border-radius: 4px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.15s ease; }

.hp-editorial .stat-view-btn.active, .hp-editorial .stat-direct-btn.btn-primary-blue { background: var(--hp-primary); color: #fff; border-color: var(--hp-primary); }

.hp-editorial .stat-view-btn:hover:not(.active), .hp-editorial .stat-direct-btn:hover { background: var(--hp-tint); }



.hp-editorial .stat-timeseries-box { margin: 24px 0; padding: 20px; background: #FFFFFF; border: 1px solid var(--hp-border); border-radius: 4px; box-shadow: var(--hp-shadow-card); }

.hp-editorial .stat-timeseries-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }

.hp-editorial .stat-timeseries-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--hp-deep); }

.hp-editorial .stat-search-result-item, .hp-editorial .stat-result-card { padding: 20px; background: #FFFFFF; border: 1px solid var(--hp-border); border-radius: 4px; margin-bottom: 16px; box-shadow: var(--hp-shadow-card); }

.hp-editorial .stat-search-result-item:hover { border-color: var(--hp-primary); }



/* Press Conference module */

.hp-editorial .hopbao-landing-wrapper { font-family: var(--hp-font); background: var(--hp-paper); color: var(--hp-ink); --hb-primary-navy: var(--hp-primary); --hb-primary-dark: var(--hp-deep); --hb-highlight-red: var(--hp-accent); --hb-accent-gold: #fff; --hb-text-dark: var(--hp-ink); --hb-text-muted: var(--hp-muted); }

.hp-editorial .hopbao-hero-section { background: linear-gradient(135deg, var(--hp-deep) 0%, var(--hp-primary) 100%); box-shadow: none; border-radius: 4px; padding: 40px 28px; text-align: left; }

.hp-editorial .hopbao-hero-section .text-center { text-align: left; }

.hp-editorial .hopbao-hero-section .hopbao-hero-title { font-family: var(--hp-font); font-weight: 800 !important; text-transform: none !important; text-shadow: none !important; font-size: 32px !important; text-align: left; line-height: 1.3 !important; }

.hp-editorial .hopbao-hero-badge { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px; padding: 4px 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.3px; color: #FFFFFF; }

.hp-editorial .hopbao-hero-meta, .hp-editorial .hopbao-hero-cta-group { justify-content: flex-start; gap: 12px; }

.hp-editorial .btn-hopbao-gold { background: #FFFFFF; color: var(--hp-primary); font-weight: 700; border: 1px solid #FFFFFF; border-radius: 4px; padding: 9px 18px; }

.hp-editorial .btn-hopbao-gold:hover { background: var(--hp-tint); color: var(--hp-deep); text-decoration: none; }

.hp-editorial .btn-hopbao-outline { border: 1px solid rgba(255, 255, 255, 0.6); color: #FFFFFF; border-radius: 4px; padding: 9px 18px; }

.hp-editorial .btn-hopbao-outline:hover { background: rgba(255, 255, 255, 0.15); color: #FFFFFF; text-decoration: none; }

.hp-editorial .hopbao-section-title { font-size: 22px; font-weight: 800; color: var(--hp-deep); border-left: 0; padding-left: 0; }

.hp-editorial .hopbao-section { background: transparent; padding-block: 28px; }

.hp-editorial .hopbao-doc-card, .hp-editorial .hopbao-info-card { box-shadow: var(--hp-shadow-card); border: 1px solid var(--hp-border); border-radius: 4px; background: #FFFFFF; }

.hp-editorial .hopbao-section-title, .hp-editorial .hopbao-press-title { font-weight: 700; text-transform: none; }

.hp-preview-notice { background: #fff1d4; color: #5c471b; text-align: center; padding: 7px 20px; font-size: 12px; border-bottom: 1px solid #e8d5af; }



/* Autocomplete uses the existing stat-search-suggest controller. */

.hp-editorial .stat-suggest-dropdown { position: absolute; top: calc(100% + 8px); inset-inline: 0; display: none; background: #fff; border: 1px solid var(--hp-border); border-radius: 2px; z-index: 40; box-shadow: 0 8px 24px rgb(18 63 80 / 12%); text-align: left; overflow: hidden; }

.hp-editorial .stat-suggest-header, .hp-editorial .stat-suggest-footer { padding: 12px 16px; background: var(--hp-paper); font-size: 12px; color: var(--hp-muted); }

.hp-editorial .stat-suggest-list { max-height: 340px; overflow-y: auto; }

.hp-editorial .stat-suggest-group-title { padding: 10px 16px 5px; font-size: 12px; color: var(--hp-muted); }

.hp-editorial .stat-suggest-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; text-decoration: none; cursor: pointer; border-top: 1px solid var(--hp-paper); }

.hp-editorial .stat-suggest-item:hover, .hp-editorial .stat-suggest-item.active { background: var(--hp-tint); }

.hp-editorial .stat-suggest-item-left { display: flex; gap: 12px; align-items: center; min-width: 0; }

.hp-editorial .stat-suggest-title { font-size: 13px; color: var(--hp-primary); }

.hp-editorial .stat-suggest-meta { display: block; font-size: 12px; color: var(--hp-muted); }

.hp-editorial .stat-suggest-icon { color: var(--hp-muted); }

.hp-editorial .stat-suggest-badge { font-size: 12px; color: var(--hp-primary); background: none; white-space: nowrap; }

.hp-editorial .stat-suggest-mark { background: #fcecc5; color: var(--hp-ink); }

.hp-editorial .law-modal-overlay { display: none; position: fixed; inset: 0; z-index: 100; padding: 24px; background: rgb(16 46 58 / 80%); align-items: center; justify-content: center; }

.hp-editorial .law-modal-overlay.active { display: flex; }

.law-modal-dialog { width: min(1100px, 100%); max-height: 95dvh; display: flex; flex-direction: column; background: #fff; border-radius: 2px; }

.law-modal-header, .law-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; border-bottom: 1px solid var(--hp-border); font-size: 12px; }

.law-modal-header h4 { margin: 0; font-size: 18px; }

.law-modal-close { background: #fff; border: 0; font-size: 26px; min-height: 44px; min-width: 44px; }

.law-modal-body { flex: 1; overflow: auto; padding: 20px; min-height: 0; text-align: center; }

.law-modal-footer { border-top: 1px solid var(--hp-border); border-bottom: 0; }

.law-modal-btn-close { border: 1px solid var(--hp-border); background: #fff; min-height: 44px; padding: 8px 16px; }

.law-modal-loading { padding: 30px; }



/* Homepage document block: separate identifiers/dates from document titles. */

.hp-editorial .hp-document-list { background: #fff; border: 1px solid var(--hp-border); padding: 0 20px; }

.hp-editorial .hp-document-list .stat-law-list { display: flex; flex-direction: column; margin: 0; }

.hp-editorial .hp-document-list .stat-law-row { display: grid; grid-template-columns: 185px minmax(0, 1fr); gap: 24px; align-items: start; padding: 17px 0; border-bottom: 1px solid var(--hp-border); }

.hp-editorial .hp-document-list .stat-law-row:last-child { border-bottom: 0; }

.hp-editorial .hp-document-list .stat-law-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; font-size: 12px; line-height: 1.6; }

.hp-editorial .hp-document-list .stat-law-code { font-weight: 700; color: var(--hp-primary); overflow-wrap: anywhere; }

.hp-editorial .hp-document-list .stat-law-date { color: var(--hp-muted); white-space: nowrap; }

.hp-editorial .hp-document-list .stat-law-date .fa { margin-right: 5px; }

.hp-editorial .hp-document-list .stat-law-name { margin: 0; font-size: 15px; line-height: 1.65; font-weight: 400; text-wrap: initial; min-width: 0; }

.hp-editorial .hp-document-list .stat-law-name a { color: var(--hp-primary); overflow-wrap: anywhere; }

.hp-editorial .hp-document-list .stat-law-name a:hover { text-decoration: none !important; }



/* Homepage video block owns its layout; it must not rely on legacy stat-modern.css. */

.hp-editorial .section-video { padding: 24px 0; background: transparent; }

.hp-editorial #video-home.yt-video-section { padding: 22px; border: 1px solid var(--hp-border); background: #fff; color: var(--hp-ink); border-radius: 2px; }

.hp-editorial #video-home .yt-section-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px 24px; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--hp-border); }

.hp-editorial #video-home .yt-header-left { min-width: 0; flex: 1 1 420px; }

.hp-editorial #video-home .yt-title-main { color: var(--hp-primary); font-size: 19px; line-height: 1.45; margin: 0 0 6px; font-weight: 700; }

.hp-editorial #video-home .yt-title-sub { color: var(--hp-muted); font-size: 13px; line-height: 1.6; margin: 0; }

.hp-editorial #video-home .yt-btn-all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 12px; color: var(--hp-primary); }

.hp-editorial #video-home .yt-brand-badge, .hp-editorial #video-home .yt-item-badge, .hp-editorial #video-home .yt-eq-bars, .hp-editorial #video-home .yt-badge-official, .hp-editorial #video-home .yt-channel-verified { display: none; }

.hp-editorial #video-home .yt-video-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; margin: 0; align-items: start; }

.hp-editorial #video-home .yt-video-grid::before, .hp-editorial #video-home .yt-video-grid::after { display: none; }

.hp-editorial #video-home .yt-col-player, .hp-editorial #video-home .yt-col-playlist { width: auto; min-width: 0; padding: 0; float: none; }

.hp-editorial #video-home .yt-player-card { min-width: 0; }

.hp-editorial #video-home .yt-player-screen { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #081d2a; overflow: hidden; }

.hp-editorial #video-home .yt-player-screen iframe, .hp-editorial #video-home .yt-player-screen video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; object-fit: contain; }

.hp-editorial #video-home .yt-player-details { padding: 16px 0 0; }

.hp-editorial #video-home .yt-current-title { color: var(--hp-ink); margin: 0 0 14px; font-size: 18px; line-height: 1.5; font-weight: 700; text-wrap: initial; }

.hp-editorial #video-home .yt-channel-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }

.hp-editorial #video-home .yt-channel-left { display: flex; align-items: center; gap: 10px; min-width: 0; }

.hp-editorial #video-home .yt-channel-avatar { width: 40px; height: 40px; flex: 0 0 40px; overflow: hidden; border-radius: 50%; border: 1px solid var(--hp-border); background: #fff; }

.hp-editorial #video-home .yt-channel-avatar img { display: block; width: 100%; height: 100%; object-fit: contain; }

.hp-editorial #video-home .yt-channel-name { color: var(--hp-ink); font-size: 12px; line-height: 1.5; font-weight: 700; }

.hp-editorial #video-home .yt-channel-sub { color: var(--hp-muted); font-size: 11px; margin-top: 4px; }

.hp-editorial #video-home .yt-channel-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.hp-editorial #video-home .yt-btn-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 8px 12px; font-size: 12px; border: 1px solid var(--hp-border); border-radius: 2px; background: #fff; color: var(--hp-primary); }

.hp-editorial #video-home .yt-btn-red { color: #fff; background: var(--hp-accent); border-color: var(--hp-accent); }

.hp-editorial #video-home .yt-btn-red:hover { background: #921c22; }

.hp-editorial #video-home .yt-playlist-card { border: 1px solid var(--hp-border); background: var(--hp-paper); min-width: 0; }

.hp-editorial #video-home .yt-playlist-top { padding: 13px 14px; border-bottom: 1px solid var(--hp-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.hp-editorial #video-home .yt-playlist-title { color: var(--hp-primary); font-size: 13px; font-weight: 700; }

.hp-editorial #video-home .yt-playlist-nowplaying { display: none; }

.hp-editorial #video-home .yt-playlist-items { max-height: 480px; overflow-y: auto; padding: 6px 0; }

.hp-editorial #video-home .yt-item-card { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px 14px; cursor: pointer; min-width: 0; }

.hp-editorial #video-home .yt-item-card:hover, .hp-editorial #video-home .yt-item-card.is-playing { background: #e3edf5; }

.hp-editorial #video-home .yt-item-card:focus-visible { outline: 3px solid var(--hp-accent); outline-offset: -3px; }

.hp-editorial #video-home .yt-item-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #e3eaf0; }

.hp-editorial #video-home .yt-item-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.hp-editorial #video-home .yt-item-hover-play { position: absolute; right: 5px; bottom: 5px; padding: 3px 5px; color: #fff; background: #003858; font-size: 10px; line-height: 1; }

.hp-editorial #video-home .yt-item-info { min-width: 0; }

.hp-editorial #video-home .yt-item-title { color: var(--hp-ink); margin: 0 0 7px; font-size: 14px; line-height: 1.5; font-weight: 400; text-wrap: initial; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

.hp-editorial #video-home .yt-item-meta { display: flex; flex-wrap: wrap; gap: 3px 10px; color: var(--hp-muted); font-size: 11px; line-height: 1.5; }

@media (max-width: 991px) {

    .hp-editorial #video-home .yt-video-grid { grid-template-columns: 1fr; }

    .hp-editorial #video-home .yt-playlist-items { max-height: 360px; }

}

@media (max-width: 600px) {

    .hp-editorial .hp-document-list .stat-law-row { grid-template-columns: 1fr; gap: 7px; padding: 15px 0; }

    .hp-editorial .hp-document-list .stat-law-meta { flex-direction: row; flex-wrap: wrap; gap: 5px 14px; }

    .hp-editorial #video-home.yt-video-section { padding: 16px; }

    .hp-editorial #video-home .yt-title-main { font-size: 17px; }

    .hp-editorial #video-home .yt-current-title { font-size: 16px; }

    .hp-editorial #video-home .yt-item-card { grid-template-columns: 90px minmax(0, 1fr); gap: 10px; padding: 12px; }

    .hp-editorial #video-home .yt-channel-toolbar { align-items: flex-start; }

}



/* Agency footer, deliberately quieter than the content. */

.hp-editorial #footer.stat-main-footer { background: var(--hp-blue-deep, #07263E); color: #d7e3e6; margin: 0; padding: 0; }

.stat-footer-body { padding: 36px 0 32px; }

.hp-editorial .stat-footer-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(220px, .85fr); gap: 40px; margin: 0; align-items: start; }

.hp-editorial .stat-footer-row > div { width: auto; min-width: 0; float: none; padding: 0; }

.hp-editorial .stat-footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }

.hp-editorial .stat-footer-logo-box { flex: 0 0 56px; }

.hp-editorial .stat-footer-logo-box img { display: block; width: 56px; height: 56px; object-fit: contain; }

.hp-editorial .stat-footer-brand-text { min-width: 0; }

.hp-editorial .stat-footer-parent-agency { font-size: 12px; line-height: 1.6; color: #bdcdd1; }

.hp-editorial .stat-footer-agency-name { font-size: 18px; line-height: 1.45; color: #fff; font-weight: 700; margin: 4px 0; text-wrap: initial; }

.stat-footer-portal-name { font-size: 11px; line-height: 1.6; color: #bdcdd1; }

.hp-editorial .stat-footer-heading { color: #fff; font-size: 15px; line-height: 1.5; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid #385e73; font-weight: 700; }

.hp-editorial #footer.stat-main-footer a { color: #d7e3e6; }

.hp-editorial #footer.stat-main-footer a:hover { color: #fff; text-decoration: none !important; }

.hp-editorial #footer a:focus-visible, .hp-editorial #footer button:focus-visible { outline-color: #fff; outline-offset: 3px; }

.stat-footer-info-block, .stat-footer-stats-wrap { font-size: 13px; line-height: 1.7; }

.stat-footer-info-block ul, .stat-footer-stats-wrap ul, .stat-footer-quicklinks { padding: 0; list-style: none; margin: 0; }

.hp-editorial #footer .stat-contact-list { display: flex; flex-direction: column; gap: 12px; }

.hp-editorial #footer .stat-contact-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 10px; }

.hp-editorial #footer .stat-contact-icon { font-size: 14px; line-height: 1.7; text-align: center; color: #b8d2e1; }

.hp-editorial #footer .stat-contact-text { min-width: 0; overflow-wrap: anywhere; }

.hp-editorial #footer .stat-contact-label { color: #fff; font-weight: 700; margin-right: 3px; }

.hp-editorial #footer .stat-map-link { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; margin-left: 6px; padding: 0; border: 0; border-radius: 0; background: none; color: #d7e3e6; font-size: 12px; line-height: inherit; vertical-align: baseline; text-decoration: none !important; text-underline-offset: 3px; }

.hp-editorial #footer .stat-map-link:hover { color: #fff; }

.stat-footer-quicklinks li { margin: 0; font-size: 13px; }

.stat-footer-quicklinks a { display: inline-flex; align-items: center; min-height: 30px; line-height: 1.6; padding-block: 4px; }

.stat-footer-quicklinks .fa { display: none; }

.hp-editorial .stat-heading-bar { display: none; }

.hp-editorial #footer .stat-counter-card { margin: 0; padding: 0; }

.hp-editorial #footer .stat-count-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; padding-block: 9px; border-bottom: 1px solid #385e73; }

.hp-editorial #footer .stat-count-row:first-child { padding-top: 0; }

.hp-editorial #footer .stat-count-label { display: inline-flex; align-items: center; gap: 8px; color: #d7e3e6; }

.hp-editorial #footer .stat-count-label .fa { width: 14px; text-align: center; flex-shrink: 0; }

.hp-editorial #footer .stat-count-badge { color: #fff; font-size: 16px; line-height: 1.5; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; margin-left: auto; }

.hp-editorial #footer .stat-nca-cert-container { margin-top: 20px; }

.hp-editorial #footer .stat-nca-cert-container a { display: inline-block; max-width: 100%; }

.hp-editorial #footer .stat-nca-cert-container img { display: block; width: 200px; max-width: 100%; height: auto; }

.stat-footer-bottom { border-top: 1px solid #385e73; padding: 18px 0; font-size: 12px; }

.stat-footer-bottom-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; align-items: start; line-height: 1.7; }

.hp-editorial .stat-footer-copyright p { margin: 0 0 5px; color: #d7e3e6; }

.stat-footer-bottom-links { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; }

.stat-footer-bottom-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; }

.hp-editorial .stat-footer-info-block p { color: #d7e3e6; }

.hp-editorial .stat-footer-stats-wrap table { color: #d7e3e6; background: transparent; }



@media (max-width: 991px) {

    .hp-editorial .stat-footer-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 36px; }

    .hp-editorial .stat-footer-col-agency { grid-column: 1 / -1; }

    .stat-footer-bottom-inner { grid-template-columns: 1fr; gap: 12px; }

}



@media (max-width: 1100px) {

    .hp-editorial .hp-desktop-nav { display: none; }

    .hp-menu-toggle { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--hp-border); background: #fff; color: var(--hp-primary); min-height: 44px; padding: 10px 14px; font-size: 13px; }

    .hp-mobile-navigation:not([hidden]) { display: block; background: var(--hp-paper); border-top: 1px solid var(--hp-border); padding: 12px 0 20px; }

    .hp-contact { display: none; }

    .hp-intro-grid { gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }

    .hp-editorial .hp-intro h1 { font-size: 21px; }

    .hp-lead-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; }

    .hp-news-grid { grid-template-columns: 1fr; }

    .hp-related-news { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hp-related-story { grid-template-columns: 68px minmax(0, 1fr); gap: 10px; }

    .hp-editorial .hp-related-image img { width: 68px; height: 52px; }

    .hp-data-layout { grid-template-columns: 1fr; }

    .hp-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .hp-kpi { border-right: 1px solid var(--hp-border); }

    .hp-kpi:nth-child(even) { border-right: 1px solid var(--hp-border); }

    .hp-kpi:nth-child(3n) { border-right: 0; }

    .hp-kpi:nth-child(-n+3) { border-bottom: 1px solid var(--hp-border); }

    .hp-kpi:nth-last-child(-n+3) { border-bottom: 0; }

    .stat-dissemination-row { gap: 28px; }

    .vtb-survey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (max-width: 767px) {

    .hp-editorial .container { padding-inline: 20px; }

    .hp-editorial .container .container { padding-inline: 0; }

    .hp-portal-label, .hp-editorial .gov-accessibility-tools { display: none; }

    .hp-utility-inner { min-height: 34px; justify-content: flex-end; }

    .hp-editorial .stat-topbar-right { width: 100%; justify-content: flex-end; }

    .hp-editorial .stat-brand-wrap { padding-block: 18px; gap: 14px; }

    .hp-editorial .stat-brand-identity { gap: 10px; }

    .hp-editorial .main-logo { width: 44px; height: 44px; }

    .hp-editorial .stat-brand-titles .sub-title { display: none; }

    .hp-editorial .stat-brand-titles .main-title { font-size: 14px; max-width: 210px; }

    .hp-editorial .stat-brand-titles .city-title { display: none; }

    .hp-menu-toggle { padding: 10px; }

    .hp-menu-toggle span { display: none; }

    .hp-intro-grid { display: block; padding-block: 20px; }

    .hp-editorial .hp-intro h1 { font-size: 20px; margin-bottom: 4px; }

    .hp-editorial .hp-intro-description { font-size: 13px; margin-bottom: 18px; }

    .hp-search-control { gap: 8px; }

    .hp-search-control > .fa { display: none; }

    .hp-editorial #stat-search-input { font-size: 16px; padding-left: 8px; width: 100%; }

    .hp-editorial .btn-search { padding-inline: 16px; font-size: 13px; min-width: 85px; }

    .hp-editorial .stat-hero-quicklinks { column-gap: 14px; font-size: 11px; }

    .hp-section { padding-block: 16px; }

    .hp-editorial .hp-section-heading h2 { font-size: 18px; }

    .hp-section-heading { align-items: flex-start; gap: 8px; }

    .hp-editorial .hp-section-description { font-size: 12px; }

    .hp-lead-layout { grid-template-columns: 1fr; gap: 24px; padding-block: 18px; }

    .hp-related-news { display: flex; }

    .hp-related-story { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }

    .hp-editorial .hp-related-image img { width: 88px; height: 64px; }

    .hp-editorial .hp-related-story h3 { font-size: 14px; }

    .hp-editorial .hp-lead-story h3 { font-size: 20px; }

    .hp-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hp-kpi { padding: 14px; }

    .hp-kpi:nth-child(odd) { border-right: 1px solid var(--hp-border); }

    .hp-kpi:nth-child(even) { border-right: 0; }

    .hp-kpi:nth-last-child(-n+3) { border-bottom: 1px solid var(--hp-border); }

    .hp-kpi:nth-last-child(-n+2) { border-bottom: 0; }

    .hp-editorial .hp-kpi h3 { font-size: 12px; min-height: 36px; }

    .hp-kpi-value { font-size: 28px; margin: 8px 0; }

    .hp-chart-panel { padding: 16px 14px; }

    .hp-publication-list { grid-template-columns: 1fr; gap: 18px; }

    .hp-publication-list > a { border-right: 0; padding: 0 0 18px; border-bottom: 1px solid var(--hp-border); }

    .hp-publication-list > a:last-child { padding-bottom: 0; border-bottom: 0; }

    .hp-chart-tabs { gap: 0 20px; }

    .hp-chart-tabs button { font-size: 12px; }

    .stat-chart-canvas-wrap { height: 260px; }

    .hp-chart-foot { gap: 10px; }

    .stat-dissemination-row { grid-template-columns: 1fr; gap: 32px; }

    .release-panel-header { gap: 8px; }

    .hp-editorial .release-panel-title, .hp-editorial .vtb-sec-title { font-size: 22px; }

    .release-row { gap: 14px; }

    .release-action { display: none; }

    .hp-two-columns, .hp-three-columns { grid-template-columns: 1fr; gap: 32px; }

    .vtb-survey-grid { grid-template-columns: 1fr; gap: 16px; }

    .stat-services-banner { flex-direction: column; align-items: flex-start; gap: 20px; }

    .hp-editorial .section-body { padding-block: 24px 36px; }

    .hp-editorial .hp-module-intro h1 { font-size: 29px; }

    .hp-editorial .hp-module-intro p { font-size: 14px; }

    .hp-editorial .panel-body { padding: 18px; }

    .hp-editorial .stat-direct-metric-row { grid-template-columns: 1fr; gap: 20px; }

    .hp-editorial .stat-timeseries-box { padding: 16px; }

    .hp-editorial .hopbao-hero-section .hopbao-hero-title { font-size: 30px !important; }

    .stat-footer-body { padding: 30px 0; }

    .hp-editorial .stat-footer-agency-name { font-size: 17px; }

}

@media (max-width: 600px) {

    .hp-editorial .stat-footer-row { grid-template-columns: 1fr; gap: 28px; }

    .hp-editorial .stat-footer-col-agency { grid-column: auto; }

    .hp-editorial .stat-footer-brand { align-items: flex-start; gap: 12px; margin-bottom: 20px; }

    .hp-editorial .stat-footer-logo-box { flex-basis: 48px; }

    .hp-editorial .stat-footer-logo-box img { width: 48px; height: 48px; }

    .hp-editorial .stat-footer-agency-name { font-size: 16px; }

    .stat-footer-quicklinks a, .stat-footer-bottom-links a { min-height: 36px; }

}

@media (prefers-reduced-motion: reduce) {

    .hp-editorial *, .hp-editorial *::before, .hp-editorial *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }

}



/* Reset card top borders: natural institutional cards without repetitive AI-style top stripes */

.hp-editorial .panel,

.hp-editorial .well,

.hp-editorial .stat-card-box,

.hp-editorial .vtb-release-panel,

.hp-editorial .vtb-survey-card,

.hp-editorial .hp-pub-card,

.hp-editorial .hp-lead-layout,

.hp-editorial .hp-document-list,

.hp-editorial .release-date-badge,

.hp-editorial .stat-search-header-box,

.hp-editorial .stat-search-result-item,

.hp-editorial .stat-result-card,

.hp-editorial .stat-timeseries-box,

.hp-editorial .stat-direct-answer-card,

.hp-editorial .gtsx-filter-card,

.hp-editorial #video-home.yt-video-section,

.hp-editorial .yt-playlist-card {

    border-top: 1px solid var(--hp-border) !important;

}



/* Ensure no links underline on hover across all components */

.hp-editorial a,

.hp-editorial a:hover,

.hp-editorial a:focus,

.hp-editorial h1 a:hover,

.hp-editorial h2 a:hover,

.hp-editorial h3 a:hover,

.hp-editorial h4 a:hover,

.hp-editorial .hp-lead-story h3 a:hover,

.hp-editorial .hp-related-story h3 a:hover,

.hp-editorial .news-detail h1 a:hover,

.hp-editorial .stat-law-name a:hover,

.hp-editorial .breadcrumbs li a:hover,

.hp-editorial .stat-hero-quicklinks a:hover,

.hp-editorial .hp-text-link:hover,

.hp-editorial .vtb-sec-link:hover,

.hp-editorial .btn-view-all-schedule:hover {

    text-decoration: none !important;

}

.hp-editorial .hp-lead-story h3 a:hover,

.hp-editorial .hp-related-story h3 a:hover,

.hp-editorial h1 a:hover,

.hp-editorial h2 a:hover,

.hp-editorial h3 a:hover {

    color: var(--hp-blue-link, #005781) !important;

}



/* ========================================================

   HIGH CONTRAST NAVIGATION HOVER

   ======================================================== */

.hp-editorial .stat-navbar {

    background: var(--hp-blue-deep, #07263E) !important;

}



.hp-editorial #menusite .navbar-nav > li > a {

    color: #FFFFFF !important;

    font-size: 13.5px !important;

    font-weight: 600 !important;

    padding: 12px 18px !important;

    transition: background 0.15s ease, color 0.15s ease !important;

}



.hp-editorial #menusite .navbar-nav > li > a:hover,

.hp-editorial #menusite .navbar-nav > li.active > a,

.hp-editorial #menusite .navbar-nav > li:focus-within > a,

.hp-editorial #menusite .navbar-nav > li.hp-submenu-open > a,

.hp-editorial #menusite .navbar-nav > li:hover > a {

    color: #FFFFFF !important;

    background: var(--hp-blue-active, #00699D) !important; /* Xanh royal sáng hơn, tương phản cực rõ với nền menu */

    box-shadow: inset 0 -3px #FFFFFF !important;

    text-decoration: none !important;

}



.hp-editorial #menusite .navbar-nav > li > a .fa,

.hp-editorial #menusite .navbar-nav > li > a .fa-caret-down {

    color: #FFFFFF !important;

    opacity: 0.9 !important;

}



/* Dropdown menu items */

.hp-editorial #menusite ul ul {

    background: #FFFFFF !important;

    border: 1px solid #CBD5E1 !important;

    border-radius: 4px !important;

    box-shadow: 0 10px 25px -5px rgba(var(--hp-blue-highlight-rgb, 0, 145, 216), 0.18) !important;

}



.hp-editorial #menusite ul ul a {

    color: #1E293B !important;

    background: #FFFFFF !important;

    font-size: 13.5px !important;

    font-weight: 500 !important;

    padding: 10px 18px !important;

    border-left: 3px solid transparent !important;

    transition: all 0.12s ease !important;

}



.hp-editorial #menusite ul ul a:hover,

.hp-editorial #menusite ul ul a:focus {

    color: var(--hp-blue-link, #005781) !important;

    background: #F0F4F8 !important;

    font-weight: 600 !important;

    border-left-color: var(--hp-blue-deep, #07263E) !important;

    text-decoration: none !important;

}





/* ==========================================================================

   BULLETPROOF COMPREHENSIVE OVERRIDES: NO-AI AESTHETICS & ACCESSIBILITY

   ========================================================================== */



/* 1. Global strictly enforced NO UNDERLINE on hover everywhere */

html body a,

html body a:hover,

html body a:focus,

html body a:active,

html body a *,

html body a:hover *,

html body h1 a:hover,

html body h2 a:hover,

html body h3 a:hover,

html body h4 a:hover,

html body h5 a:hover,

html body .news-title a:hover,

html body .release-doc-title a:hover,

html body .hp-lead-story h3 a:hover,

html body .hp-related-story h3 a:hover,

html body .stat-law-name a:hover,

html body .hp-lead-title a:hover,

html body .vtb-card a:hover {

    text-decoration: none !important;

}



/* 2. Global strictly enforced NO THICK/COLORED TOP BORDERS ON CARDS */

html body .vtb-release-panel,

html body .release-panel-header,

html body .stat-law-panel,

html body .stat-kpi-box,

html body .gtsx-kpi-card,

html body .stat-hotnews-wrapper,

html body .stat-calendar-card,

html body .stat-calendar-date-box,

html body .stat-chart-container,

html body .hp-lead-layout,

html body .hp-document-list,

html body .hp-pub-card,

html body .vtb-survey-card,

html body .vtb-card,

html body #video-home.yt-video-section,

html body .yt-playlist-card,

html body .release-date-badge {

    border-top: 1px solid #CBD5E1 !important;

}



/* 3. High-Contrast Navigation Hover & Open Dropdown */

html body #menusite .navbar-default .navbar-nav > li > a,

html body #menusite .navbar-nav > li > a {

    color: #FFFFFF !important;

}



html body #menusite .navbar-default .navbar-nav > li > a:hover,

html body #menusite .navbar-default .navbar-nav > li > a:focus,

html body #menusite .navbar-default .navbar-nav > .active > a,

html body #menusite .navbar-default .navbar-nav > .active > a:hover,

html body #menusite .navbar-default .navbar-nav > .open > a,

html body #menusite .navbar-default .navbar-nav > .open > a:hover,

html body #menusite .navbar-default .navbar-nav > .open > a:focus,

html body #menusite .navbar-nav > li:hover > a,

html body #menusite .navbar-nav > li.open > a,

html body #menusite .navbar-nav > li.active > a,

html body #menusite .navbar-nav > li.hp-submenu-open > a {

    color: #FFFFFF !important;

    background: var(--hp-blue-active, #00699D) !important;

    background-color: var(--hp-blue-active, #00699D) !important;

    box-shadow: inset 0 -3px #FFFFFF !important;

    text-decoration: none !important;

}



html body #menusite .navbar-default .navbar-nav > li > a:hover *,

html body #menusite .navbar-default .navbar-nav > .open > a *,

html body #menusite .navbar-nav > li:hover > a * {

    color: #FFFFFF !important;

}

/* ==========================================================================

   CHUYÊN TRANG PHỔ BIẾN & TUYÊN TRUYỀN PHÁP LUẬT THỐNG KÊ (ENHANCED PILLARS)

   ========================================================================== */

.stat-law-page-container {

    padding-top: 15px;

    padding-bottom: 45px;

    background: #F8FAFC;

}



.stat-law-hero-banner {

    background: #FFFFFF;

    border: 1px solid #CBD5E1;

    border-radius: 4px;

    padding: 24px 28px;

    margin-bottom: 24px;

    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);

}



.stat-law-kicker {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: 11.5px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    color: var(--hp-blue-link, #005781);

    background: #F0F4F8;

    border: 1px solid #CBD5E1;

    padding: 4px 10px;

    border-radius: 3px;

    margin-bottom: 12px;

}



.stat-law-main-title {

    font-size: 23px;

    font-weight: 800;

    color: var(--hp-blue-link, #005781);

    margin: 0 0 12px 0;

    line-height: 1.35;

    letter-spacing: -0.015em;

    text-transform: uppercase;

}



.stat-law-lead-desc {

    font-size: 14px;

    color: #475569;

    line-height: 1.6;

    margin: 0 0 18px 0;

    max-width: 1050px;

}



.stat-law-pledge-chips {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.pledge-chip {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    font-size: 12.5px;

    font-weight: 600;

    padding: 7px 14px;

    border-radius: 4px;

    border: 1px solid #CBD5E1;

}



.pledge-chip.chip-privacy {

    background: #ECFDF5;

    color: #065F46;

    border-color: #A7F3D0;

}



.pledge-chip.chip-duty {

    background: #EFF6FF;

    color: var(--hp-blue-link, #005781);

    border-color: #BFDBFE;

}



.pledge-chip.chip-warning {

    background: #FEF2F2;

    color: #991B1B;

    border-color: #FECACA;

}



/* 3 Core Pillars Layout */

.stat-law-pillars-row {

    margin-top: 10px;

    margin-bottom: 30px;

    display: flex;

    flex-wrap: wrap;

}



.stat-pillar-col {

    display: flex;

    margin-bottom: 24px;

}



.stat-pillar-card {

    background: #FFFFFF;

    border: 1px solid #CBD5E1;

    border-radius: 6px;

    padding: 22px 20px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    width: 100%;

    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);

    position: relative;

    transition: transform 0.15s ease, box-shadow 0.15s ease;

}



.stat-pillar-card:hover {

    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);

}



.stat-pillar-header {

    margin-bottom: 14px;

}



.pillar-kicker-tag {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    padding: 4px 9px;

    border-radius: 3px;

    margin-bottom: 10px;

    border: 1px solid transparent;

}



.tag-rights {

    background: #ECFDF5;

    color: #047857;

    border-color: #A7F3D0;

}



.tag-duties {

    background: #EFF6FF;

    color: var(--hp-blue-link, #005781);

    border-color: #BFDBFE;

}



.tag-penalties {

    background: #FEF2F2;

    color: #B91C1C;

    border-color: #FECACA;

}



.pillar-card-title {

    font-size: 17.5px;

    font-weight: 800;

    margin: 0 0 6px 0;

    line-height: 1.35;

    text-transform: uppercase;

    letter-spacing: -0.01em;

}



.pillar-card-rights .pillar-card-title { color: #065F46; }

.pillar-card-duties .pillar-card-title { color: var(--hp-blue-link, #005781); }

.pillar-card-penalties .pillar-card-title { color: #991B1B; }



.pillar-card-subtitle {

    font-size: 12.5px;

    color: #64748B;

    margin: 0;

    line-height: 1.5;

}



/* Callout Highlight Box */

.pillar-callout {

    display: flex;

    gap: 12px;

    padding: 12px 14px;

    border-radius: 4px;

    margin-bottom: 16px;

    border: 1px solid transparent;

}



.callout-rights {

    background: #F0FDF4;

    border-color: #BBF7D0;

    border-left: 4px solid #10B981;

}



.callout-duties {

    background: #EFF6FF;

    border-color: #DBEAFE;

    border-left: 4px solid var(--hp-blue-highlight, #0091D8);

}



.callout-penalties {

    background: #FEF2F2;

    border-color: #FECACA;

    border-left: 4px solid #EF4444;

}



.callout-icon {

    font-size: 17px;

    flex-shrink: 0;

    margin-top: 1px;

}



.callout-rights .callout-icon { color: #059669; }

.callout-duties .callout-icon { color: var(--hp-blue-link, #005781); }

.callout-penalties .callout-icon { color: #DC2626; }



.callout-body strong {

    display: block;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.3px;

    margin-bottom: 3px;

}



.callout-rights .callout-body strong { color: #065F46; }

.callout-duties .callout-body strong { color: var(--hp-blue-link, #005781); }

.callout-penalties .callout-body strong { color: #991B1B; }



.callout-body p {

    font-size: 12.5px;

    color: #334155;

    line-height: 1.45;

    margin: 0;

}



/* Checklist */

.pillar-checklist {

    list-style: none;

    padding: 0;

    margin: 0 0 16px 0;

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.pillar-checklist li {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    font-size: 13px;

    line-height: 1.5;

    color: #334155;

}



.pillar-checklist li em {

    font-size: 14.5px;

    margin-top: 2px;

    flex-shrink: 0;

}



.checklist-rights li em { color: #10B981; }

.checklist-duties li em { color: var(--hp-blue-link, #005781); }



.pillar-checklist li strong {

    color: #0F172A;

}



/* Penalties Structured List */

.penalty-structured-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-bottom: 16px;

}



.penalty-item-card {

    background: #F8FAFC;

    border: 1px solid #E2E8F0;

    border-radius: 4px;

    padding: 10px 12px;

}



.penalty-item-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 8px;

    margin-bottom: 4px;

}



.penalty-act-title {

    font-size: 13px;

    font-weight: 700;

    color: #1E293B;

}



.penalty-act-title em {

    margin-right: 4px;

}



.penalty-amount-badge {

    font-size: 11.5px;

    font-weight: 800;

    padding: 3px 8px;

    border-radius: 3px;

    white-space: nowrap;

    font-variant-numeric: tabular-nums;

    letter-spacing: -0.01em;

}



.badge-warning {

    background: #FEF3C7;

    color: #B45309;

    border: 1px solid #FDE68A;

}



.badge-danger {

    background: #FFEDD5;

    color: #C2410C;

    border: 1px solid #FED7AA;

}



.badge-critical {

    background: #FEE2E2;

    color: #B91C1C;

    border: 1px solid #FECACA;

}



.penalty-item-note {

    font-size: 12px;

    color: #64748B;

    line-height: 1.4;

}



/* Pillar Card Footer */

.pillar-card-footer {

    padding-top: 12px;

    border-top: 1px solid #F1F5F9;

    font-size: 11.5px;

    color: #64748B;

}



.legal-source-note {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    font-style: italic;

}

/* ==========================================================================

   ENHANCED FILTER PANEL & ALIGNED SEARCH BOX (2-TIER CLEAN DESIGN)

   ========================================================================== */

.stat-law-filter-panel {

    background: #FFFFFF;

    border: 1px solid #CBD5E1;

    border-radius: 6px;

    padding: 18px 22px;

    margin-bottom: 24px;

    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);

}



/* Tầng 1: Tabs */

.stat-law-filter-tabs-row {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    padding-bottom: 16px;

    border-bottom: 1px solid #F1F5F9;

}



.stat-law-filter-kicker {

    font-size: 12px;

    font-weight: 700;

    color: #475569;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    flex-shrink: 0;

}



.stat-law-tab-group {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    flex: 1 1 auto;

}



.law-filter-btn {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 14px;

    font-size: 13px;

    font-weight: 600;

    color: #334155 !important;

    background: #F1F5F9;

    border: 1px solid #CBD5E1;

    border-radius: 4px;

    text-decoration: none !important;

    transition: all 0.15s ease;

}



.law-filter-btn:hover {

    background: #E2E8F0;

    color: var(--hp-blue-link, #005781) !important;

    border-color: #94A3B8;

    text-decoration: none !important;

}



.law-filter-btn.active,

.law-filter-btn.btn-primary {

    background: var(--hp-blue-deep, #07263E) !important;

    color: #FFFFFF !important;

    border-color: var(--hp-blue-deep, #07263E) !important;

}



.tab-count-pill {

    background: rgba(0, 0, 0, 0.08);

    color: inherit;

    font-size: 11px;

    font-weight: 700;

    padding: 2px 7px;

    border-radius: 10px;

    display: inline-block;

    line-height: 1.2;

}



.law-filter-btn.active .tab-count-pill,

.law-filter-btn.btn-primary .tab-count-pill {

    background: rgba(255, 255, 255, 0.25);

    color: #FFFFFF;

}



/* Tầng 2: Search */

.stat-law-filter-search-row {

    padding-top: 14px;

}



.stat-law-search-form-full {

    margin: 0;

    padding: 0;

}



.stat-law-search-inner {

    display: flex;

    align-items: center;

    gap: 14px;

}



.stat-law-search-label {

    font-size: 12.5px;

    font-weight: 700;

    color: #475569;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    flex-shrink: 0;

    margin: 0;

}



.stat-law-input-group {

    display: flex;

    align-items: stretch;

    border: 1px solid #CBD5E1;

    border-radius: 4px;

    background: #FFFFFF;

    overflow: hidden;

    height: 42px !important;

    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);

    transition: border-color 0.15s ease, box-shadow 0.15s ease;

    flex: 1 1 auto;

}



.stat-law-input-group:focus-within {

    border-color: var(--hp-blue-deep, #07263E);

    box-shadow: 0 0 0 2px rgba(var(--hp-blue-highlight-rgb, 0, 145, 216), 0.12);

}



.stat-law-search-input {

    border: none !important;

    outline: none !important;

    box-shadow: none !important;

    height: 40px !important;

    padding: 0 14px !important;

    font-size: 13.5px !important;

    color: #1E293B !important;

    flex: 1 1 auto;

    min-width: 0;

    background: transparent !important;

}



.stat-law-search-input::placeholder {

    color: #94A3B8;

    font-size: 13px;

}



.stat-law-search-submit-btn {

    height: 42px !important;

    background: var(--hp-blue-deep, #07263E) !important;

    color: #FFFFFF !important;

    border: none !important;

    padding: 0 22px !important;

    font-size: 13.5px !important;

    font-weight: 700 !important;

    white-space: nowrap !important;

    cursor: pointer;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 7px;

    transition: background 0.15s ease;

    flex-shrink: 0;

    border-radius: 0 !important;

    line-height: 1 !important;

}



.stat-law-search-submit-btn:hover {

    background: var(--hp-blue-active, #00699D) !important;

    color: #FFFFFF !important;

    text-decoration: none !important;

}



@media (max-width: 767px) {

    .stat-law-search-inner {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

    }

    .stat-law-input-group {

        width: 100%;

    }

}





/* ==========================================================================

   CHỈ TIÊU KINH TẾ CẤP XÃ (GTSX) - ENHANCED MACRO DASHBOARD SHOWCASE

   ========================================================================== */

.gtsx-macro-dashboard-block {

    margin-bottom: 28px;

}



.gtsx-dashboard-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 16px;

    padding-bottom: 12px;

    border-bottom: 1px solid #E2E8F0;

}



.gtsx-dashboard-kicker {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.8px;

    color: var(--hp-blue-link, #005781);

    margin-bottom: 4px;

}



.gtsx-dashboard-heading {

    font-size: 18px;

    font-weight: 700;

    color: #0F172A;

    margin: 0;

    line-height: 1.3;

}



.gtsx-dashboard-meta-badge {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: 12px;

    color: #475569;

    background: #F1F5F9;

    padding: 6px 12px;

    border-radius: 4px;

    border: 1px solid #CBD5E1;

}



.gtsx-kpis-grid {

    margin-left: -8px;

    margin-right: -8px;

}



.gtsx-kpi-col {

    padding-left: 8px;

    padding-right: 8px;

    margin-bottom: 16px;

}



/* Base Card Style */

.gtsx-kpi-box {

    background: #FFFFFF;

    border: 1px solid #CBD5E1;

    border-radius: 6px;

    padding: 18px 20px;

    min-height: 195px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);

    transition: transform 0.15s ease, box-shadow 0.15s ease;

    position: relative;

}



.gtsx-kpi-box:hover {

    box-shadow: 0 4px 12px rgba(var(--hp-blue-highlight-rgb, 0, 145, 216), 0.08);

}



/* Master KPI Card (Tổng sản phẩm) */

.gtsx-kpi-box.gtsx-kpi-master {

    background: linear-gradient(180deg, #F0F7FD 0%, #FFFFFF 100%);

    border: 1px solid #93C5FD;

}



/* Top Row: Tag badge + Icon circle */

.kpi-top-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 8px;

}



.kpi-tag-badge {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    font-size: 10.5px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    padding: 3px 8px;

    border-radius: 4px;

}



.badge-master {

    background: var(--hp-blue-deep, #07263E);

    color: #FFFFFF;

}



.badge-nlts {

    background: #ECFDF5;

    color: #047857;

    border: 1px solid #A7F3D0;

}



.badge-cnxd {

    background: #EFF6FF;

    color: var(--hp-blue-link, #005781);

    border: 1px solid #BFDBFE;

}



.badge-dv {

    background: #FFFBEB;

    color: #B45309;

    border: 1px solid #FDE68A;

}



.kpi-icon-circle {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;

    flex-shrink: 0;

}



.circle-master {

    background: var(--hp-blue-deep, #07263E);

    color: #FFFFFF;

}



.circle-nlts {

    background: #ECFDF5;

    color: #059669;

    border: 1px solid #A7F3D0;

}



.circle-cnxd {

    background: #EFF6FF;

    color: var(--hp-blue-link, #005781);

    border: 1px solid #BFDBFE;

}



.circle-dv {

    background: #FFFBEB;

    color: #D97706;

    border: 1px solid #FDE68A;

}



/* Labels & Numbers */

.kpi-main-label {

    font-size: 11.5px;

    font-weight: 700;

    color: #475569;

    text-transform: uppercase;

    letter-spacing: 0.4px;

    margin-bottom: 4px;

}



.gtsx-kpi-master .kpi-main-label {

    color: var(--hp-blue-link, #005781);

}



.kpi-main-number-wrap {

    display: flex;

    align-items: baseline;

    gap: 6px;

    margin: 4px 0 10px;

}



.kpi-number-big {

    font-size: 26px;

    font-weight: 800;

    color: var(--hp-blue-link, #005781);

    line-height: 1.1;

    font-variant-numeric: tabular-nums;

}



.kpi-number-medium {

    font-size: 22px;

    font-weight: 800;

    color: #0F172A;

    line-height: 1.1;

    font-variant-numeric: tabular-nums;

}



.kpi-unit-text {

    font-size: 13px;

    font-weight: 600;

    color: #64748B;

}



/* Growth Pill */

.kpi-growth-pill-wrap {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

}



.kpi-growth-pill {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    font-size: 11.5px;

    font-weight: 700;

    padding: 3px 8px;

    border-radius: 4px;

    font-variant-numeric: tabular-nums;

}



.kpi-growth-pill.text-success {

    background: #DCFCE7;

    color: #15803D !important;

    border: 1px solid #86EFAC;

}



.kpi-growth-pill.text-danger {

    background: #FEE2E2;

    color: #B91C1C !important;

    border: 1px solid #FCA5A5;

}



.kpi-growth-caption {

    font-size: 11.5px;

    color: #64748B;

}



.kpi-master-subnote {

    font-size: 11.5px;

    color: #475569;

    border-top: 1px dashed #BFDBFE;

    padding-top: 8px;

    margin-top: auto;

}



.kpi-master-subnote .fa {

    color: #059669;

}



/* Sector Share Indicator (Progress Bar) */

.kpi-share-indicator {

    margin-top: 6px;

    margin-bottom: 8px;

}



.share-label-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 4px;

}



.share-text {

    font-size: 11px;

    color: #64748B;

}



.share-pct-badge {

    font-size: 11.5px;

    font-weight: 700;

    padding: 2px 6px;

    border-radius: 3px;

    font-variant-numeric: tabular-nums;

}



.share-progress-track {

    width: 100%;

    height: 6px;

    background: #F1F5F9;

    border-radius: 3px;

    overflow: hidden;

}



.share-progress-bar {

    height: 100%;

    border-radius: 3px;

    transition: width 0.3s ease;

}



.bar-nlts {

    background: #059669;

}



.bar-cnxd {

    background: var(--hp-blue-primary, #0079B6);

}



.bar-dv {

    background: #D97706;

}



.kpi-sector-growth {

    font-size: 11.5px;

    color: #475569;

    border-top: 1px dashed #E2E8F0;

    padding-top: 6px;

    margin-top: auto;

}



/* Macro Structural Strip Card */

.gtsx-structure-strip-card {

    background: #FFFFFF;

    border: 1px solid #CBD5E1;

    border-radius: 6px;

    padding: 16px 20px;

    margin-top: 4px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);

}



.strip-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 10px;

}



.strip-title {

    font-size: 13.5px;

    color: #0F172A;

    display: flex;

    align-items: center;

    gap: 7px;

}



.strip-title .fa {

    color: var(--hp-blue-link, #005781);

    font-size: 15px;

}



.strip-total-note {

    font-size: 12px;

    color: #475569;

}



/* Stacked 3-color Bar */

.gtsx-stacked-bar {

    display: flex;

    width: 100%;

    height: 12px;

    background: #F1F5F9;

    border-radius: 6px;

    overflow: hidden;

    margin-bottom: 12px;

    border: 1px solid #E2E8F0;

}



.segment-nlts {

    background: #059669;

    height: 100%;

    transition: width 0.3s ease;

}



.segment-cnxd {

    background: var(--hp-blue-primary, #0079B6);

    height: 100%;

    transition: width 0.3s ease;

}



.segment-dv {

    background: #D97706;

    height: 100%;

    transition: width 0.3s ease;

}



/* Strip Legend */

.gtsx-strip-legend {

    display: flex;

    flex-wrap: wrap;

    gap: 18px;

    font-size: 12px;

}



.legend-item {

    display: flex;

    align-items: center;

    gap: 6px;

}



.legend-color-dot {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    flex-shrink: 0;

}



.dot-nlts {

    background: #059669;

}



.dot-cnxd {

    background: var(--hp-blue-primary, #0079B6);

}



.dot-dv {

    background: #D97706;

}



.legend-name {

    color: #475569;

}



.legend-val {

    color: #0F172A;

}



.legend-sub {

    color: #64748B;

    font-size: 11.5px;

}





/* ==========================================================================

   GLOBAL REMOVE RED BOTTOM BORDER FROM NAVBAR

   ========================================================================== */

html body .stat-navbar,

html body .second-nav,

html body .second-nav.stat-navbar,

html body nav.stat-navbar,

html body #menusite,

html body #menusite .navbar,

html body .hp-desktop-nav {

    border-bottom: none !important;

}





/* ==========================================================================

   PRIMARY SITE-WIDE FONT: INTER (CHUẨN THỂ CHẾ VÀ DỮ LIỆU)

   ========================================================================== */

html,

body,

input,

button,

select,

textarea,

h1, h2, h3, h4, h5, h6,

.h1, .h2, .h3, .h4, .h5, .h6,

p, li, td, th,

a:not(.fa):not([class*="fa-"]),

span:not(.fa):not([class*="fa-"]),

div:not(.fa):not([class*="fa-"]),

.navbar, .stat-navbar, .company-info, .stat-main-footer,

.stat-kpi-title, .stat-kpi-number, .stat-hero-title, .stat-section-title,

.stat-law-name, .stat-notif-title, .yt-title-main, .yt-item-title,

.newscat-style2 .item h3, .stat-footer-agency-name,

.hp-editorial {

    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;

}





/* ==========================================================================

   MODERN E-GOVERNMENT DESIGN SYSTEM (INSPIRED BY MST.GOV.VN)

   ========================================================================== */



/* Top Utility Bar (Tầng 1) */

.stat-topbar {

    background: #F8FAFC !important;

    border-bottom: 1px solid var(--gov-divider) !important;

    font-size: 12px !important;

    color: var(--gov-text-sub) !important;

    padding: 6px 0 !important;

}

.stat-topbar a {

    color: var(--hp-blue-link, #005781) !important;

    font-weight: 600 !important;

    text-decoration: none !important;

    transition: color 0.15s ease;

}

.stat-topbar a:hover {

    color: var(--gov-navy) !important;

    text-decoration: none !important;

}

.stat-topbar-left {

    display: flex;

    align-items: center;

    gap: 8px;

}

.stat-topbar-right {

    display: flex;

    align-items: center;

    gap: 12px;

}

.topbar-sep {

    color: #CBD5E1;

    margin: 0 2px;

}

.topbar-link-internal {

    display: inline-flex;

    align-items: center;

    gap: 5px;

}

.gov-lang-switch {

    display: inline-flex;

    align-items: center;

    gap: 3px;

}

.gov-lang-switch .lang-btn {

    padding: 2px 7px;

    font-size: 11px;

    font-weight: 700;

    border: 1px solid var(--gov-border);

    background: #FFFFFF;

    color: var(--gov-text-main);

    border-radius: 2px;

    cursor: pointer;

    line-height: 1.2;

}

.gov-lang-switch .lang-btn.active {

    background: var(--gov-navy);

    color: #FFFFFF;

    border-color: var(--gov-navy);

}



/* Main Navigation (Tầng 1) */

.hp-editorial .stat-navbar,

.second-nav.stat-navbar {

    background: var(--gov-primary) !important;

    border-top: none !important;

    border-bottom: none !important;

    box-shadow: 0 2px 4px rgba(var(--hp-blue-highlight-rgb, 0, 145, 216), 0.12) !important;

}



/* Tầng 2: Editorial Hero & Spotlight (Bố cục 2 cột bất đối xứng mst.gov.vn) */

.mst-editorial-hero-section {

    margin: 20px 0 24px;

}

.mst-hero-container {

    background: var(--gov-surface);

    border: 1px solid var(--gov-border);

    padding: 22px;

    border-radius: 2px;

}

.mst-hero-meta {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 12px;

    margin-bottom: 10px;

}

.mst-hero-tag {

    font-weight: 700;

    color: var(--gov-red);

    text-transform: uppercase;

    letter-spacing: 0.6px;

}

.mst-hero-title {

    font-size: 21px;

    font-weight: 700;

    color: var(--gov-navy);

    line-height: 1.35;

    margin: 0 0 12px;

}

.mst-hero-title a {

    color: var(--gov-navy);

    text-decoration: none !important;

}

.mst-hero-title a:hover {

    color: var(--gov-primary);

}

.mst-hero-sapo {

    font-size: 14px;

    color: var(--gov-text-sub);

    line-height: 1.65;

    margin-bottom: 18px;

}

.mst-hero-stat-strip {

    display: flex;

    background: var(--gov-tint);

    border: 1px solid var(--gov-border);

    border-radius: 2px;

}

.mst-stat-col {

    flex: 1;

    padding: 12px 16px;

    border-right: 1px solid var(--gov-border);

}

.mst-stat-col:last-child {

    border-right: none;

}

.mst-stat-label {

    font-size: 11px;

    font-weight: 600;

    color: var(--gov-text-sub);

    text-transform: uppercase;

    letter-spacing: 0.4px;

    margin-bottom: 3px;

}

.mst-stat-val {

    font-size: 21px;

    font-weight: 800;

    color: var(--gov-navy);

    font-variant-numeric: tabular-nums;

    line-height: 1.1;

}

.mst-stat-val.val-iip {

    color: var(--gov-primary);

}

.mst-stat-val.val-cpi {

    color: #0F766E;

}



/* Spotlight Column Right (Tầng 2) */

.mst-spotlight-box {

    display: flex;

    flex-direction: column;

    height: 100%;

}

.mst-box-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-bottom: 2px solid var(--gov-navy);

    padding-bottom: 8px;

    margin-bottom: 12px;

}

.mst-box-header-title {

    font-size: 14px;

    font-weight: 700;

    color: var(--gov-navy);

    text-transform: uppercase;

    letter-spacing: 0.6px;

    margin: 0;

}

.mst-box-header-link {

    font-size: 12px;

    font-weight: 600;

    color: var(--gov-primary);

    text-decoration: none !important;

}

.mst-box-header-link:hover {

    text-decoration: none !important;

}

.mst-spotlight-list {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    flex-grow: 1;

}

.mst-spotlight-item {

    padding: 10px 0;

    border-bottom: 1px solid var(--gov-divider);

}

.mst-spotlight-item:first-child {

    padding-top: 0;

}

.mst-spotlight-item:last-child {

    border-bottom: none;

    padding-bottom: 0;

}

.mst-meta-row {

    font-size: 11.5px;

    margin-bottom: 4px;

}

.mst-meta-cat {

    font-weight: 700;

    color: var(--gov-primary);

    text-transform: uppercase;

}

.mst-meta-dot {

    color: #CBD5E1;

    margin: 0 5px;

}

.mst-meta-date {

    color: var(--gov-text-muted);

    font-variant-numeric: tabular-nums;

}

.mst-item-headline {

    font-size: 13.5px;

    font-weight: 600;

    color: var(--gov-text-main);

    line-height: 1.45;

    margin: 0;

}

.mst-item-headline a {

    color: var(--gov-text-main);

    text-decoration: none !important;

}

.mst-item-headline a:hover {

    color: var(--gov-primary);

}



/* Tầng 3: Ma trận 6 Lĩnh vực Thống kê Trọng tâm */

.mst-pillars-section {

    margin: 24px 0 28px;

}

.mst-section-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    border-bottom: 2px solid var(--gov-navy);

    padding-bottom: 10px;

    margin-bottom: 16px;

}

.mst-section-kicker {

    font-size: 11px;

    font-weight: 700;

    color: var(--gov-text-muted);

    text-transform: uppercase;

    letter-spacing: 0.8px;

    margin-bottom: 3px;

}

.mst-section-title {

    font-size: 17px;

    font-weight: 700;

    color: var(--gov-navy);

    text-transform: uppercase;

    margin: 0;

}

.mst-pillars-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1px;

    background: var(--gov-border);

    border: 1px solid var(--gov-border);

    border-radius: 2px;

    overflow: hidden;

}

@media (max-width: 991px) {

    .mst-pillars-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media (max-width: 600px) {

    .mst-pillars-grid {

        grid-template-columns: 1fr;

    }

}

.mst-pillar-cell {

    background: var(--gov-surface);

    padding: 20px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition: background 0.15s ease;

}

.mst-pillar-cell:hover {

    background: var(--gov-tint);

}

.mst-pillar-code {

    font-size: 11px;

    font-weight: 700;

    color: var(--gov-primary);

    text-transform: uppercase;

    letter-spacing: 0.6px;

    margin-bottom: 4px;

}

.mst-pillar-name {

    font-size: 15.5px;

    font-weight: 700;

    color: var(--gov-text-main);

    margin: 0 0 8px;

    line-height: 1.35;

}

.mst-pillar-desc {

    font-size: 13px;

    color: var(--gov-text-sub);

    line-height: 1.5;

    margin: 0 0 16px;

    flex-grow: 1;

}

.mst-pillar-foot {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 12px;

    border-top: 1px solid var(--gov-divider);

    font-size: 12.5px;

}

.mst-pillar-count {

    color: var(--gov-text-muted);

    font-variant-numeric: tabular-nums;

}

.mst-pillar-link {

    font-weight: 700;

    color: var(--gov-primary);

    text-decoration: none !important;

}

.mst-pillar-link:hover {

    color: var(--gov-navy);

    text-decoration: none !important;

}



/* Tầng 4: Danh sách Văn bản & Phương pháp Chế độ */

.mst-docs-section {

    margin: 24px 0 28px;

}

.mst-docs-card {

    background: var(--gov-surface);

    border: 1px solid var(--gov-border);

    border-radius: 2px;

    overflow: hidden;

}

.mst-docs-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 14px 20px;

    background: #F8FAFC;

    border-bottom: 2px solid var(--gov-navy);

}

.mst-docs-header h2 {

    font-size: 16px;

    font-weight: 700;

    color: var(--gov-navy);

    text-transform: uppercase;

    margin: 0;

}

.mst-docs-feed {

    display: flex;

    flex-direction: column;

}

.mst-doc-row {

    padding: 16px 20px;

    border-bottom: 1px solid var(--gov-divider);

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 16px;

    transition: background 0.15s ease;

}

.mst-doc-row:last-child {

    border-bottom: none;

}

.mst-doc-row:hover {

    background: var(--gov-tint);

}

.mst-doc-meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    font-size: 12px;

    margin-bottom: 5px;

}

.mst-doc-number {

    font-weight: 700;

    color: var(--gov-navy);

    background: #E6F0F7;

    padding: 2px 8px;

    border-left: 2px solid var(--gov-primary);

    border-radius: 0 2px 2px 0;

    font-variant-numeric: tabular-nums;

}

.mst-doc-field {

    font-weight: 600;

    color: var(--gov-primary);

}

.mst-doc-date {

    color: var(--gov-text-muted);

    font-variant-numeric: tabular-nums;

}

.mst-doc-title {

    font-size: 14.5px;

    font-weight: 600;

    color: var(--gov-text-main);

    line-height: 1.45;

    margin: 0;

}

.mst-doc-title a {

    color: var(--gov-text-main);

    text-decoration: none !important;

}

.mst-doc-title a:hover {

    color: var(--gov-primary);

}

.mst-btn-download {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 12px;

    font-size: 12px;

    font-weight: 600;

    color: var(--gov-primary);

    background: #FFFFFF;

    border: 1px solid var(--gov-border);

    border-radius: 2px;

    white-space: nowrap;

    transition: all 0.15s ease;

    text-decoration: none !important;

}

.mst-btn-download:hover {

    border-color: var(--gov-primary);

    color: var(--gov-primary);

    background: #FFFFFF;

}

.mst-pdf-badge {

    font-size: 10px;

    font-weight: 700;

    color: var(--gov-red);

}





/* STRICT MST ENFORCEMENT: NEVER EVER UNDERLINE ON HOVER */

html body a,

html body a:hover,

html body a:focus,

html body a:active,

html body .mst-hero-title a:hover,

html body .mst-item-headline a:hover,

html body .mst-pillar-name a:hover,

html body .mst-doc-title a:hover,

html body .news-detail h1 a:hover,

html body .hp-lead-story h3 a:hover,

html body .hp-related-story h3 a:hover,

html body .stat-law-name a:hover,

html body .vtb-sec-link:hover,

html body .mst-box-header-link:hover,

html body .mst-pillar-link:hover {

    text-decoration: none !important;

}



/* Topbar sleek utility alignment (mst.gov.vn style) */

#nv-block-login {

    display: inline-flex !important;

    align-items: center !important;

    gap: 10px !important;

    margin: 0 !important;

}

#nv-block-login .login,

#nv-block-login .contact,

#nv-block-login .contact a {

    display: inline-flex !important;

    align-items: center !important;

    gap: 4px !important;

    font-size: 11.5px !important;

    font-weight: 600 !important;

    color: var(--gov-text-sub) !important;

    background: transparent !important;

    border: none !important;

    padding: 0 !important;

    cursor: pointer !important;

    text-decoration: none !important;

}

#nv-block-login .login:hover,

#nv-block-login .contact a:hover {

    color: var(--hp-blue-link, #005781) !important;

    text-decoration: none !important;

}

#nv-block-login .contact::before {

    content: "|";

    color: var(--gov-border);

    margin-right: 8px;

}





/* ==========================================================================

   TOPBAR ZERO WRAP & FLUID RESPONSIVE (MST.GOV.VN SPEC)

   ========================================================================== */

.stat-topbar {

    background: #F8FAFC !important;

    border-bottom: 1px solid #E2E8F0 !important;

    font-size: 12px !important;

    color: #475569 !important;

    padding: 6px 0 !important;

    line-height: 1.4 !important;

    white-space: nowrap !important;

}



.stat-topbar .container {

    width: 100% !important;

    max-width: 1280px !important;

    padding-left: 20px !important;

    padding-right: 20px !important;

}



.hp-utility-inner {

    display: flex !important;

    justify-content: space-between !important;

    align-items: center !important;

    gap: 12px !important;

    min-height: 32px !important;

    flex-wrap: nowrap !important;

    white-space: nowrap !important;

}



.stat-topbar-left {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    white-space: nowrap !important;

    flex-shrink: 0 !important;

}



.hp-topbar-date {

    font-size: 12px !important;

    color: #475569 !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 6px !important;

    white-space: nowrap !important;

    margin: 0 !important;

    flex-shrink: 0 !important;

}



.hp-portal-label {

    font-size: 12px !important;

    font-weight: 600 !important;

    color: var(--hp-blue-link, #005781) !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 6px !important;

    white-space: nowrap !important;

    flex-shrink: 0 !important;

}



.hp-portal-label::before {

    content: "" !important;

    display: inline-block !important;

    width: 3px !important;

    height: 12px !important;

    background: #DA251D !important;

    border-radius: 1px !important;

}



.stat-topbar-right {

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    white-space: nowrap !important;

    flex-shrink: 0 !important;

}



.topbar-sep {

    color: #CBD5E1 !important;

    font-size: 12px !important;

    user-select: none !important;

    margin: 0 1px !important;

    flex-shrink: 0 !important;

}



.gov-accessibility-tools {

    display: inline-flex !important;

    align-items: center !important;

    gap: 3px !important;

    white-space: nowrap !important;

    flex-shrink: 0 !important;

}



.a-label {

    font-size: 11.5px !important;

    color: #475569 !important;

    margin-right: 3px !important;

    white-space: nowrap !important;

    flex-shrink: 0 !important;

}



.btn-font-size {

    padding: 1px 6px !important;

    min-width: 24px !important;

    height: 24px !important;

    line-height: 20px !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    border: 1px solid #CBD5E1 !important;

    background: #FFFFFF !important;

    color: #0F172A !important;

    border-radius: 2px !important;

    cursor: pointer !important;

    white-space: nowrap !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    flex-shrink: 0 !important;

}



.btn-font-size.active {

    background: var(--hp-blue-deep, #07263E) !important;

    border-color: var(--hp-blue-deep, #07263E) !important;

    color: #FFFFFF !important;

}



.topbar-link-internal {

    font-size: 12px !important;

    font-weight: 600 !important;

    color: var(--hp-blue-link, #005781) !important;

    display: inline-flex;

    align-items: center !important;

    gap: 5px !important;

    white-space: nowrap !important;

    text-decoration: none !important;

    flex-shrink: 0 !important;

}

@media (max-width: 767px) {
    .topbar-link-internal,
    .topbar-sep,
    .hp-portal-label,
    .gov-accessibility-tools,
    .hp-editorial .gov-accessibility-tools {
        display: none !important;
    }
    .stat-topbar {
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
    }
    .hp-utility-inner {
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        justify-content: space-between !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .stat-topbar-left {
        max-width: calc(100% - 65px) !important;
        overflow: hidden !important;
    }
    .hp-topbar-date {
        font-size: 11px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .stat-topbar-right,
    .hp-editorial .stat-topbar-right {
        width: auto !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
    }
}

.topbar-link-internal:hover {

    color: var(--hp-blue-link, #005781) !important;

    text-decoration: none !important;

}



.gov-lang-switch {

    display: inline-flex !important;

    align-items: center !important;

    gap: 2px !important;

    white-space: nowrap !important;

    flex-shrink: 0 !important;

}



.gov-lang-switch .lang-btn {

    padding: 1px 6px !important;

    height: 24px !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    border: 1px solid #CBD5E1 !important;

    background: #FFFFFF !important;

    color: #0F172A !important;

    border-radius: 2px !important;

    cursor: pointer !important;

    line-height: 20px !important;

    white-space: nowrap !important;

    flex-shrink: 0 !important;

}



.gov-lang-switch .lang-btn.active {

    background: var(--hp-blue-deep, #07263E) !important;

    color: #FFFFFF !important;

    border-color: var(--hp-blue-deep, #07263E) !important;

}



/* User login & Contact: completely borderless, single line, no box */

#nv-block-login {

    display: inline-flex !important;

    align-items: center !important;

    gap: 8px !important;

    margin: 0 !important;

    height: auto !important;

    white-space: nowrap !important;

    flex-shrink: 0 !important;

}



#nv-block-login > div,

#nv-block-login .login,

#nv-block-login .contact,

#nv-block-login .contact a {

    display: inline-flex !important;

    align-items: center !important;

    gap: 5px !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    color: var(--hp-blue-link, #005781) !important;

    background: transparent !important;

    border: none !important;

    padding: 0 !important;

    height: auto !important;

    line-height: 1.4 !important;

    box-shadow: none !important;

    cursor: pointer !important;

    white-space: nowrap !important;

    text-decoration: none !important;

    flex-shrink: 0 !important;

}



#nv-block-login > div:hover,

#nv-block-login .login:hover,

#nv-block-login .contact a:hover {

    background: transparent !important;

    color: var(--hp-blue-link, #005781) !important;

    text-decoration: none !important;

}



#nv-block-login .contact::before {

    content: "|" !important;

    color: #CBD5E1 !important;

    margin-right: 8px !important;

    font-weight: 400 !important;

}



/* Universal rule: NEVER wrap any element in topbar */

.stat-topbar,

.stat-topbar *,

.hp-utility-inner * {

    white-space: nowrap !important;

}





/* ==========================================================================

   TẦNG 4: DANH SÁCH VĂN BẢN - REFINED PROPORTIONAL TYPOGRAPHY

   (Khắc phục chữ quá lớn, cân đối hoàn hảo với toàn trang)

   ========================================================================== */

.mst-docs-section {

    margin: 20px 0 24px !important;

}



.mst-docs-card {

    background: #FFFFFF !important;

    border: 1px solid #CBD5E1 !important;

    border-radius: 2px !important;

    overflow: hidden !important;

    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;

}



.mst-docs-header {

    display: flex !important;

    justify-content: space-between !important;

    align-items: center !important;

    padding: 10px 18px !important;

    background: #F8FAFC !important;

    border-bottom: 2px solid var(--hp-blue-deep, #07263E) !important;

}



.mst-docs-header h2 {

    font-size: 14px !important;

    font-weight: 700 !important;

    color: var(--hp-blue-link, #005781) !important;

    text-transform: uppercase !important;

    letter-spacing: 0.3px !important;

    margin: 0 !important;

    line-height: 1.3 !important;

}



.mst-docs-header .mst-box-header-link {

    font-size: 12px !important;

    font-weight: 600 !important;

    color: var(--hp-blue-link, #005781) !important;

    text-decoration: none !important;

}



.mst-docs-feed {

    display: flex !important;

    flex-direction: column !important;

}



.mst-doc-row {

    padding: 11px 18px !important;

    border-bottom: 1px solid #E2E8F0 !important;

    display: flex !important;

    justify-content: space-between !important;

    align-items: center !important;

    gap: 16px !important;

    transition: background 0.15s ease !important;

    min-height: 52px !important;

}



.mst-doc-row:last-child {

    border-bottom: none !important;

}



.mst-doc-row:hover {

    background: #F0F5FA !important;

}



.mst-doc-meta {

    display: flex !important;

    align-items: center !important;

    flex-wrap: wrap !important;

    gap: 6px !important;

    font-size: 11.5px !important;

    margin-bottom: 3px !important;

    line-height: 1.3 !important;

}



.mst-doc-number {

    font-size: 11px !important;

    font-weight: 700 !important;

    color: var(--hp-blue-link, #005781) !important;

    background: #E6F0F7 !important;

    padding: 1px 6px !important;

    border-left: 2px solid var(--hp-blue-highlight, #0091D8) !important;

    border-radius: 0 2px 2px 0 !important;

    font-variant-numeric: tabular-nums !important;

    line-height: 1.2 !important;

}



.mst-doc-field {

    font-size: 11.5px !important;

    font-weight: 600 !important;

    color: var(--hp-blue-link, #005781) !important;

}



.mst-meta-dot {

    color: #CBD5E1 !important;

    font-size: 11px !important;

}



.mst-doc-date {

    font-size: 11.5px !important;

    color: #64748B !important;

    font-variant-numeric: tabular-nums !important;

}



.mst-doc-title {

    font-size: 13.5px !important;

    font-weight: 600 !important;

    color: #0F172A !important;

    line-height: 1.45 !important;

    margin: 0 !important;

}



.mst-doc-title a {

    color: #0F172A !important;

    text-decoration: none !important;

    transition: color 0.15s ease !important;

}



.mst-doc-title a:hover {

    color: var(--hp-blue-link, #005781) !important;

    text-decoration: none !important;

}



.mst-doc-action {

    flex-shrink: 0 !important;

}



.mst-btn-download {

    display: inline-flex !important;

    align-items: center !important;

    gap: 5px !important;

    padding: 4px 10px !important;

    font-size: 11.5px !important;

    font-weight: 600 !important;

    color: var(--hp-blue-link, #005781) !important;

    background: #FFFFFF !important;

    border: 1px solid #CBD5E1 !important;

    border-radius: 2px !important;

    white-space: nowrap !important;

    text-decoration: none !important;

    transition: all 0.15s ease !important;

}



.mst-btn-download:hover {

    border-color: var(--hp-blue-primary, #0079B6) !important;

    color: var(--hp-blue-link, #005781) !important;

    background: #FFFFFF !important;

    text-decoration: none !important;

}



.mst-pdf-badge {

    font-size: 9.5px !important;

    font-weight: 800 !important;

    color: #DA251D !important;

}





/* ==========================================================================

   MACRO-ECONOMIC INDICATORS SHOWCASE & DATA VISUALIZATION SYSTEM

   Master-Detail Architecture, Dynamic Y-Axis Scaling, Tri-View Mode

   According to macro_indicators_ui_specification.md

   ========================================================================== */



.hp-macro-showcase-section {

    background-color: #06233D !important;

    padding: 38px 0 46px !important;

    color: #FFFFFF !important;

    position: relative !important;

    border-top: 1px solid #04182B !important;

    border-bottom: 1px solid #04182B !important;

}



.hp-macro-header {

    position: relative !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: space-between !important;

    align-items: flex-start !important;

    padding-bottom: 18px !important;

    margin-bottom: 22px !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;

    gap: 12px !important;

}



@media (min-width: 992px) {

    .hp-macro-header {

        flex-direction: row !important;

        align-items: flex-end !important;

        gap: 20px !important;

    }

}



.hp-macro-accent-bar {

    position: absolute !important;

    bottom: -1px !important;

    left: 0 !important;

    width: 72px !important;

    height: 3px !important;

    background-color: #DA251D !important;

    z-index: 2 !important;

}



.hp-macro-header-content {

    flex: 1 1 auto !important;

}



.hp-macro-kicker {

    font-size: 11px !important;

    font-weight: 700 !important;

    color: #38BDF8 !important;

    letter-spacing: 0.08em !important;

    text-transform: uppercase !important;

    margin-bottom: 5px !important;

    line-height: 1.2 !important;

}



.hp-macro-title {

    font-size: 23px !important;

    font-weight: 700 !important;

    color: #FFFFFF !important;

    text-transform: uppercase !important;

    letter-spacing: -0.01em !important;

    margin: 0 0 5px 0 !important;

    line-height: 1.25 !important;

}



.hp-macro-sapo {

    font-size: 13.5px !important;

    color: #CBD5E1 !important;

    margin: 0 !important;

    max-width: 820px !important;

    line-height: 1.5 !important;

}



.hp-macro-header-action {

    flex-shrink: 0 !important;

}



.hp-macro-header-link {

    color: #38BDF8 !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    text-decoration: none !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 6px !important;

    padding: 6px 12px !important;

    border: 1px solid rgba(56, 189, 248, 0.35) !important;

    border-radius: 2px !important;

    transition: all 0.15s ease !important;

    background: rgba(56, 189, 248, 0.06) !important;

}



.hp-macro-header-link:hover {

    color: #FFFFFF !important;

    border-color: #38BDF8 !important;

    background: rgba(56, 189, 248, 0.16) !important;

    text-decoration: none !important;

}



/* Master-Detail Grid */

.hp-macro-master-detail-grid {

    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 18px !important;

    align-items: stretch !important;

}



@media (min-width: 992px) {

    .hp-macro-master-detail-grid {

        grid-template-columns: 5fr 7fr !important;

        gap: 18px !important;

    }

}



/* Left Column: Master Matrix 2x3 */

.hp-macro-master-col {

    display: grid !important;

    grid-template-columns: 1fr 1fr !important;

    gap: 1px !important;

    background-color: #CBD5E1 !important;

    border: 1px solid #CBD5E1 !important;

    border-radius: 2px !important;

    overflow: hidden !important;

}



@media (max-width: 480px) {

    .hp-macro-master-col {

        grid-template-columns: 1fr !important;

    }

}



.macro-matrix-cell {

    display: flex !important;

    flex-direction: column !important;

    justify-content: space-between !important;

    text-align: left !important;

    background-color: #FFFFFF !important;

    padding: 14px 15px !important;

    border: none !important;

    outline: none !important;

    cursor: pointer !important;

    transition: all 0.15s ease !important;

    position: relative !important;

    width: 100% !important;

    font-family: 'Be Vietnam Pro', -apple-system, sans-serif !important;

}



.macro-matrix-cell:hover {

    background-color: #F8FAFC !important;

}



.macro-matrix-cell.active {

    background-color: #F0F7FF !important;

    box-shadow: inset 4px 0 0 var(--hp-blue-primary, #0079B6) !important;

}



.macro-matrix-cell.cell-cpi.active {

    background-color: #FFFBEB !important;

    box-shadow: inset 4px 0 0 #D97706 !important;

}



.matrix-cell-head {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 6px !important;

    margin-bottom: 6px !important;

    width: 100% !important;

}



.matrix-code-badge {

    font-size: 10.5px !important;

    font-weight: 700 !important;

    color: var(--hp-blue-link, #005781) !important;

    background-color: #E0F2FE !important;

    padding: 2px 7px !important;

    border-radius: 2px !important;

    text-transform: uppercase !important;

    letter-spacing: 0.04em !important;

    display: inline-block !important;

    line-height: 1.2 !important;

}



.matrix-code-badge.badge-cpi {

    color: #92400E !important;

    background-color: #FEF3C7 !important;

}



.matrix-period-badge {

    font-size: 11px !important;

    color: #64748B !important;

    white-space: nowrap !important;

}



.matrix-cell-name {

    font-size: 13px !important;

    font-weight: 600 !important;

    color: #1E293B !important;

    line-height: 1.35 !important;

    margin-bottom: 5px !important;

}



.matrix-cell-val {

    font-size: 22px !important;

    font-weight: 700 !important;

    color: var(--hp-blue-link, #005781) !important;

    line-height: 1.1 !important;

    margin-bottom: 4px !important;

    font-variant-numeric: tabular-nums !important;

    font-feature-settings: "tnum" 1 !important;

}



.matrix-cell-val.val-cpi {

    color: #334155 !important;

}



.matrix-cell-note {

    font-size: 11px !important;

    color: #64748B !important;

    line-height: 1.35 !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

}



/* Right Column: Detail Command Center */

.hp-macro-detail-col {

    background-color: #FFFFFF !important;

    border: 1px solid #CBD5E1 !important;

    border-radius: 2px !important;

    padding: 20px 22px !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: space-between !important;

    gap: 14px !important;

    color: #0F172A !important;

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;

}



.macro-detail-header {

    display: flex !important;

    flex-direction: row !important;

    justify-content: space-between !important;

    align-items: center !important;

    gap: 12px !important;

    padding-bottom: 12px !important;

    border-bottom: 1px solid #E2E8F0 !important;

    flex-wrap: wrap !important;

}



.macro-detail-title-group {

    flex: 1 1 auto !important;

    min-width: 240px !important;

}



.macro-detail-ctrls {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    flex-wrap: nowrap !important;

}



@media (max-width: 767px) {

    .macro-detail-ctrls {

        flex-wrap: wrap !important;

        width: 100% !important;

        justify-content: space-between !important;

    }

}



.macro-detail-title-group {

    display: flex !important;

    flex-direction: column !important;

    gap: 3px !important;

}



.macro-detail-title {

    font-size: 15.5px !important;

    font-weight: 700 !important;

    color: #0F172A !important;

    margin: 0 !important;

    line-height: 1.3 !important;

    text-transform: uppercase !important;

    letter-spacing: -0.01em !important;

}



.macro-detail-unit {

    font-size: 12px !important;

    color: #64748B !important;

    font-weight: 500 !important;

}



.macro-detail-ctrls {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    flex-wrap: wrap !important;

}



.macro-segmented-ctrl {

    display: inline-flex !important;

    background-color: #F1F5F9 !important;

    border: 1px solid #CBD5E1 !important;

    border-radius: 2px !important;

    overflow: hidden !important;

    padding: 2px !important;

    gap: 2px !important;

}



.macro-view-btn {

    background: transparent !important;

    border: none !important;

    outline: none !important;

    padding: 4px 10px !important;

    font-size: 11.5px !important;

    font-weight: 500 !important;

    color: #475569 !important;

    cursor: pointer !important;

    border-radius: 2px !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 5px !important;

    transition: all 0.15s ease !important;

    font-family: 'Be Vietnam Pro', sans-serif !important;

}



.macro-view-btn.active {

    background-color: var(--hp-blue-primary, #0079B6) !important;

    color: #FFFFFF !important;

    font-weight: 600 !important;

}



.hp-macro-detail-col.is-cpi .macro-view-btn.active {

    background-color: #D97706 !important;

}



.macro-btn-export {

    background-color: #FFFFFF !important;

    border: 1px solid #CBD5E1 !important;

    color: var(--hp-blue-link, #005781) !important;

    padding: 4px 10px !important;

    font-size: 11.5px !important;

    font-weight: 600 !important;

    border-radius: 2px !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 5px !important;

    cursor: pointer !important;

    transition: all 0.15s ease !important;

    font-family: 'Be Vietnam Pro', sans-serif !important;

}



.macro-btn-export:hover {

    background-color: #F8FAFC !important;

    border-color: var(--hp-blue-primary, #0079B6) !important;

}



.hp-macro-detail-col.is-cpi .macro-btn-export {

    color: #92400E !important;

}



.hp-macro-detail-col.is-cpi .macro-btn-export:hover {

    border-color: #D97706 !important;

}



/* Summary Callout Strip */

.macro-summary-strip {

    display: grid !important;

    grid-template-columns: repeat(3, 1fr) !important;

    gap: 10px !important;

}



@media (max-width: 640px) {

    .macro-summary-strip {

        grid-template-columns: 1fr !important;

        gap: 6px !important;

    }

}



.macro-summary-card {

    background-color: #F8FAFC !important;

    border: 1px solid #E2E8F0 !important;

    border-radius: 2px !important;

    padding: 9px 12px !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    gap: 3px !important;

}



.macro-card-label {

    font-size: 10px !important;

    font-weight: 700 !important;

    color: #64748B !important;

    text-transform: uppercase !important;

    letter-spacing: 0.05em !important;

}



.macro-card-main {

    display: flex !important;

    align-items: baseline !important;

    gap: 8px !important;

    flex-wrap: wrap !important;

}



.macro-card-val {

    font-size: 19px !important;

    font-weight: 700 !important;

    color: var(--hp-blue-link, #005781) !important;

    line-height: 1.1 !important;

    font-variant-numeric: tabular-nums !important;

    font-feature-settings: "tnum" 1 !important;

}



.hp-macro-detail-col.is-cpi .macro-card-val {

    color: #334155 !important;

}



.macro-card-val.target-val {

    color: #DA251D !important;

    font-size: 16.5px !important;

}



.macro-status-pill {

    font-size: 10.5px !important;

    font-weight: 600 !important;

    padding: 2px 6px !important;

    border-radius: 2px !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 4px !important;

    white-space: nowrap !important;

    line-height: 1.2 !important;

}



.macro-status-pill.pill-teal {

    background-color: #ECFDF5 !important;

    color: #0F766E !important;

    border: 1px solid #A7F3D0 !important;

}



.macro-status-pill.pill-amber {

    background-color: #FFFBEB !important;

    color: #92400E !important;

    border: 1px solid #FDE68A !important;

}



.macro-status-pill.pill-blue {

    background-color: #EFF6FF !important;

    color: var(--hp-blue-link, #005781) !important;

    border: 1px solid #BFDBFE !important;

}



.macro-status-pill.pill-danger {

    background-color: #FEF2F2 !important;

    color: #DC2626 !important;

    border: 1px solid #FECACA !important;

}



.macro-card-subtext {

    font-size: 11px !important;

    color: #475569 !important;

    font-weight: 500 !important;

}



.macro-target-badge {

    font-size: 10.5px !important;

    color: #DA251D !important;

    font-weight: 600 !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 4px !important;

}



.macro-target-line-indicator {

    display: inline-block !important;

    width: 12px !important;

    height: 0 !important;

    border-top: 2px dashed #DA251D !important;

}



/* Stage Area (Canvas & Table) */

.macro-stage-area {

    min-height: 260px !important;

    position: relative !important;

    width: 100% !important;

}



.macro-chart-wrap {

    height: 260px !important;

    width: 100% !important;

    position: relative !important;

}



.macro-table-wrap {

    width: 100% !important;

    max-height: 260px !important;

    overflow-y: auto !important;

    border: 1px solid #CBD5E1 !important;

    border-radius: 2px !important;

}



.macro-data-table {

    margin: 0 !important;

    font-size: 12.5px !important;

    background-color: #FFFFFF !important;

}



.macro-data-table thead th {

    background-color: #F8FAFC !important;

    color: #475569 !important;

    font-weight: 600 !important;

    font-size: 11px !important;

    text-transform: uppercase !important;

    letter-spacing: 0.04em !important;

    border-bottom: 2px solid #CBD5E1 !important;

    padding: 7px 10px !important;

    white-space: nowrap !important;

}



.macro-data-table tbody td {

    padding: 7px 10px !important;

    border-bottom: 1px solid #E2E8F0 !important;

    vertical-align: middle !important;

    font-size: 12px !important;

}



.macro-table-badge {

    display: inline-block !important;

    font-size: 10px !important;

    font-weight: 600 !important;

    padding: 2px 6px !important;

    border-radius: 2px !important;

    white-space: nowrap !important;

}



.macro-table-badge.badge-success {

    background: #ECFDF5 !important;

    color: #0F766E !important;

    border: 1px solid #A7F3D0 !important;

}



.macro-table-badge.badge-controlled {

    background: #FFFBEB !important;

    color: #92400E !important;

    border: 1px solid #FDE68A !important;

}



.macro-table-badge.badge-progress {

    background: #EFF6FF !important;

    color: var(--hp-blue-link, #005781) !important;

    border: 1px solid #BFDBFE !important;

}



.macro-table-badge.badge-warning {

    background: #FEF2F2 !important;

    color: #DC2626 !important;

    border: 1px solid #FECACA !important;

}



/* Detail Footer Area */

.macro-detail-footer {

    display: flex !important;

    flex-direction: column !important;

    gap: 8px !important;

    margin-top: 2px !important;

}



.macro-insight-box {

    background-color: #F8FAFC !important;

    border-left: 3px solid var(--hp-blue-highlight, #0091D8) !important;

    padding: 9px 12px !important;

    display: flex !important;

    align-items: flex-start !important;

    gap: 8px !important;

    border-radius: 0 2px 2px 0 !important;

    border-top: 1px solid #E2E8F0 !important;

    border-right: 1px solid #E2E8F0 !important;

    border-bottom: 1px solid #E2E8F0 !important;

}



.hp-macro-detail-col.is-cpi .macro-insight-box {

    border-left-color: #D97706 !important;

}



.macro-insight-icon {

    color: var(--hp-blue-link, #005781) !important;

    font-size: 14px !important;

    margin-top: 2px !important;

    flex-shrink: 0 !important;

}



.hp-macro-detail-col.is-cpi .macro-insight-icon {

    color: #D97706 !important;

}



.macro-insight-text {

    font-size: 12px !important;

    color: #334155 !important;

    line-height: 1.45 !important;

    font-style: normal !important;

}



.macro-attribution-line {

    font-size: 11px !important;

    color: #64748B !important;

    display: flex !important;

    align-items: center !important;

    gap: 6px !important;

    line-height: 1.3 !important;

}



/* ==========================================================================
   CHUẨN HÓA MÀU CHỮ TOÀN TRANG: CHỦ ĐẠO PHẢI LÀ CHỮ MÀU ĐEN
   ========================================================================== */

/* 1. Toàn bộ tiêu đề các cấp (h1 -> h6, Section Titles, Panel Titles): Chữ đen #111827 */
.hp-editorial h1:not(#hp-home-title),
.hp-editorial h2,
.hp-editorial h3,
.hp-editorial h4,
.hp-editorial h5,
.hp-editorial h6,
.hp-editorial .vtb-sec-title,
.hp-editorial .release-panel-title,
.hp-editorial .hp-section-heading h2,
.hp-editorial .panel-title,
.hp-editorial .panel-heading,
.hp-editorial .mst-section-title,
.hp-editorial .mst-box-header-title,
.hp-editorial .mst-docs-header h2,
.hp-editorial .stat-gis-title,
.hp-editorial .stat-section-title,
.hp-editorial #video-home .yt-title-main,
.hp-editorial .vtb-survey-card h3,
.hp-editorial .hp-pub-card strong,
.hp-editorial .mst-pillar-name,
.hp-editorial .stat-pillar-card h3,
.hp-editorial .stat-direct-title,
.hp-editorial .stat-timeseries-title,
.hp-editorial .hopbao-section-title,
.hp-editorial .news-detail h1 {
    color: #111827 !important;
}

/* 2. Tiêu đề các tin tức, bài viết, thông báo, sự kiện, văn bản, ấn phẩm (khi là liên kết) */
.hp-editorial h1:not(#hp-home-title) a,
.hp-editorial h2 a,
.hp-editorial h3 a,
.hp-editorial h4 a,
.hp-editorial h5 a,
.hp-editorial h6 a,
.hp-editorial .release-title a,
.hp-editorial .release-doc-title a,
.hp-editorial .hp-story-title a,
.hp-editorial .news-item a,
.hp-editorial .news-item-title a,
.hp-editorial .hp-related-story h3 a,
.hp-editorial .middle-list a,
.hp-editorial .announce-list a,
.hp-editorial .vtb-survey-card h3 a,
.hp-editorial .stat-pillar-card h3 a,
.hp-editorial .stat-law-name a,
.hp-editorial .mst-hero-title a,
.hp-editorial .mst-box-header-title a,
.hp-editorial .yt-item-title a,
.hp-editorial .yt-current-title,
.hp-editorial .mst-pillar-link,
.hp-editorial .panel-announcement a,
.hp-editorial .panel-announcement li a {
    color: #111827 !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

/* Hover chuyển sang màu đỏ mận #B71C1C hoặc gạch chân chuẩn báo điện tử */
.hp-editorial h1 a:hover,
.hp-editorial h2 a:hover,
.hp-editorial h3 a:hover,
.hp-editorial h4 a:hover,
.hp-editorial .release-title a:hover,
.hp-editorial .release-doc-title a:hover,
.hp-editorial .hp-story-title a:hover,
.hp-editorial .news-item a:hover,
.hp-editorial .news-item-title a:hover,
.hp-editorial .hp-related-story h3 a:hover,
.hp-editorial .middle-list a:hover,
.hp-editorial .announce-list a:hover,
.hp-editorial .vtb-survey-card h3 a:hover,
.hp-editorial .stat-pillar-card h3 a:hover,
.hp-editorial .stat-law-name a:hover,
.hp-editorial .mst-hero-title a:hover,
.hp-editorial .mst-box-header-title a:hover,
.hp-editorial .yt-item-title a:hover,
.hp-editorial .mst-pillar-link:hover,
.hp-editorial .panel-announcement a:hover {
    color: #B71C1C !important;
    text-decoration: none !important;
}

/* 3. Nội dung văn bản, mô tả, tóm tắt (Sapo), đoạn trích, bảng biểu: Đen đậm nét (#1F2937) */
.hp-editorial p,
.hp-editorial .p,
.hp-editorial .news-sapo,
.hp-editorial .hp-lead-story p,
.hp-editorial .hp-story-desc,
.hp-editorial .mst-pillar-desc,
.hp-editorial .stat-pillar-desc,
.hp-editorial .stat-law-lead-desc,
.hp-editorial .hp-pub-content small,
.hp-editorial .vtb-survey-desc,
.hp-editorial .vtb-survey-meta,
.hp-editorial .vtb-survey-card p,
.hp-editorial .stat-lead,
.hp-editorial .law-ro-body,
.hp-editorial .law-ro-desc,
.hp-editorial .law-faq-a-body,
.hp-editorial #news-bodyhtml,
.hp-editorial .news-bodyhtml,
.hp-editorial .bodytext,
.hp-editorial .table,
.hp-editorial .table td,
.hp-editorial .table th,
.hp-editorial .stat-gis-desc,
.hp-editorial .bando-desc,
.hp-editorial .bando-drawer,
.hp-editorial .bando-prop-value,
.hp-editorial .stat-brand-titles .sub-title {
    color: #1F2937 !important;
}

/* 4. Thông tin bổ trợ (Metadata), ngày tháng, giờ, phòng ban, số hiệu: Màu đen rõ (#374151) */
.hp-editorial .hp-topbar-date,
.hp-editorial .hp-portal-label,
.hp-editorial .stat-topbar,
.hp-editorial .hp-doc-meta,
.hp-editorial .hp-doc-meta-item,
.hp-editorial .release-meta,
.hp-editorial .r-dept,
.hp-editorial .r-time,
.hp-editorial .survey-meta-list,
.hp-editorial .survey-top-bar,
.hp-editorial .mst-pillar-count,
.hp-editorial .yt-item-meta,
.hp-editorial .yt-channel-name,
.hp-editorial .yt-title-sub,
.hp-editorial .hp-story-date,
.hp-editorial .hp-story-meta,
.hp-editorial .bando-prop-label,
.hp-editorial .stat-brand-titles .city-title,
.hp-editorial .hp-chart-foot,
.hp-editorial .stat-services-banner p {
    color: #374151 !important;
}

.hp-editorial .hp-doc-organ {
    color: #111827 !important;
    font-weight: 600 !important;
}

/* 5. Cột tiện ích nhanh (dưới Thông báo): Chữ đen nổi bật */
.hp-editorial .stat-quick-service a,
.hp-editorial .portal-util-item a,
.hp-editorial .quick-util-links a,
.hp-editorial .panel-announcement-footer a {
    color: #111827 !important;
    font-weight: 600 !important;
}
.hp-editorial .stat-quick-service a:hover,
.hp-editorial .portal-util-item a:hover,
.hp-editorial .quick-util-links a:hover {
    color: #B71C1C !important;
}

/* 6. Bảo đảm các vùng nền tối (Footer, Menusite chính, Banner Hero) giữ nguyên chữ trắng/sáng */
#hp-home-title,
.hp-intro-description,
.hp-search-tags,
.hp-search-tags a,
.stat-main-footer,
.stat-main-footer p,
.stat-main-footer a,
.stat-main-footer span,
.stat-main-footer li,
.stat-main-footer .footer-text,
.stat-main-footer .footer-col-title,
#menusite > ul > li > a,
.stat-section-kpi .kpi-dark-title,
.stat-section-kpi .kpi-main-label,
.stat-section-kpi .kpi-period,
.stat-section-kpi .kpi-note,
.stat-portal-banner h3,
.stat-portal-banner p,
.btn-primary,
.btn-danger {
    color: #ffffff !important;
}
.stat-main-footer a {
    color: #D7E3E6 !important;
}
.stat-main-footer a:hover {
    color: #ffffff !important;
}


/* Bảng danh sách văn bản và dữ liệu (Modules: laws, dinfo, statistics): Chữ đen sắc nét */
.flex-table-laws a,
.table-laws a,
.flex-table-laws .table-rows a,
.table td a:not(.btn),
.table th,
.table td,
.panel-table th,
.panel-table td {
    color: #111827 !important;
}
.flex-table-laws a:hover,
.table-laws a:hover,
.flex-table-laws .table-rows a:hover,
.table td a:not(.btn):hover {
    color: #B71C1C !important;
    text-decoration: none !important;
}
.table td a[href*="download"],
.table td a:has(em.fa-download),
.table td a:has(em.fa-file-pdf-o) {
    color: var(--hp-blue-link, #005781) !important;
    font-weight: 600;
}
.table td a[href*="download"]:hover,
.table td a:has(em.fa-download):hover,
.table td a:has(em.fa-file-pdf-o):hover {
    color: #B71C1C !important;
}

/* Module Tin tức (news): Tiêu đề đen, trích dẫn than đậm, ngày tháng xám đậm */
.news-center-item .news-center-content h3 a,
.news-center-item .news-center-content h3,
.news-list h3 a,
.news-list h4 a,
.news-list-item h3 a,
.news-list-item h4 a,
.item-news h3 a,
.item-news h4 a,
.panel-news a,
.viewcat h3 a,
.viewcat h4 a {
    color: #111827 !important;
}
.news-center-item .news-center-content h3 a:hover,
.news-list h3 a:hover,
.news-list h4 a:hover,
.news-list-item h3 a:hover,
.news-list-item h4 a:hover,
.item-news h3 a:hover,
.item-news h4 a:hover,
.panel-news a:hover,
.viewcat h3 a:hover,
.viewcat h4 a:hover {
    color: #B71C1C !important;
    text-decoration: none !important;
}
.news-center-item .news-center-content p,
.news-list-item p,
.news-sapo,
.news-content,
.viewcat p {
    color: #1F2937 !important;
}
.news-center-meta,
.news-meta,
.post-date {
    color: #374151 !important;
}


/* ==========================================================================
   BẢO ĐẢM ĐỘ TƯƠNG PHẢN CAO CHO TẤT CẢ VÙNG NỀN XANH, NỀN XANH LÁ & NỀN TỐI
   (High-Contrast Specification for Blue, Green and Dark Backgrounds)
   ========================================================================== */

/* 1. Thanh điều hướng chính (Navbar): Nền xanh #004B8D -> Chữ trắng tương phản tuyệt đối */
.stat-navbar,
.stat-navbar .navbar,
.stat-navbar #menusite,
.stat-navbar ul.nav > li,
.stat-navbar ul.nav > li > a,
.stat-navbar .navbar-nav > li > a,
#menusite,
#menusite > ul > li,
#menusite > ul > li > a,
.hp-desktop-nav,
.hp-desktop-nav a {
    color: #FFFFFF !important;
}

/* Riêng dropdown menu con nền trắng -> Chữ đen sắc nét */
#menusite ul.dropdown-menu,
#menusite ul ul {
    background: #FFFFFF !important;
}
#menusite ul.dropdown-menu a,
#menusite ul ul a,
#menusite ul.dropdown-menu li,
#menusite ul ul li {
    color: #111827 !important;
}
#menusite ul.dropdown-menu a:hover,
#menusite ul ul a:hover {
    color: #B71C1C !important;
    background: #F1F5F9 !important;
}

/* 2. Khối Hero Tìm kiếm (Nền xanh đen / Navy) -> Chữ trắng tương phản */
.hp-intro,
.hp-portal-search,
.hp-intro-grid,
.hp-intro-main,
#hp-home-title,
.hp-intro-main h1,
.hp-intro-description,
.hp-intro-main p,
.hp-search-tags,
.hp-search-tags span,
.hp-search-tags a,
.stat-hero-section,
.stat-hero-section h1,
.stat-hero-section p {
    color: #FFFFFF !important;
}
.hp-intro-description {
    opacity: 0.95 !important;
}
.hp-search-tags a {
    border-color: rgba(255, 255, 255, 0.5) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
}
.hp-search-tags a:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #FFFFFF !important;
}
#stat-search-btn,
.hp-search-btn,
.btn-search {
    color: #FFFFFF !important;
}

/* 3. Tiêu đề khối Thông báo (Nền xanh lam #004B8D) -> Chữ trắng nổi bật */
.hp-panel-heading,
.hp-panel-heading *,
.hp-panel-heading h2,
.hp-panel-heading .panel-title,
.panel-announcement-header,
.panel-announcement-header h2,
.panel-announcement-header * {
    color: #FFFFFF !important;
}

/* 4. Tầng Chỉ tiêu vĩ mô chủ yếu (Nền xanh đậm #002b54 / #06233d) -> Chữ trắng tương phản */
.stat-section-kpi,
.hp-macro-showcase-section,
.hp-macro-showcase-section > .container,
.hp-macro-kicker,
.hp-macro-title,
h2#hp-macro-showcase-title,
.hp-macro-sapo,
.stat-section-kpi h2,
.stat-section-kpi .section-desc,
.stat-section-kpi .kpi-section-kicker,
.stat-section-kpi .kpi-dark-title,
.stat-section-kpi .kpi-main-label,
.stat-section-kpi .kpi-period,
.stat-section-kpi .kpi-note {
    color: #FFFFFF !important;
}
.hp-macro-sapo {
    opacity: 0.92 !important;
}
.btn-view-all-macro {
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}
.btn-view-all-macro:hover {
    background: #FFFFFF !important;
    color: var(--hp-blue-link, #005781) !important;
}
.hp-macro-cards .hp-kpi-card-dark,
.stat-section-kpi .hp-kpi-card {
    color: #FFFFFF !important;
}
.stat-section-kpi .hp-kpi-card .hp-kpi-code,
.stat-section-kpi .hp-kpi-card .hp-kpi-period,
.stat-section-kpi .hp-kpi-card .hp-kpi-note {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* 5. Banner Báo cáo thống kê doanh nghiệp (Nền xanh đậm #002b54) -> Chữ trắng */
.stat-services-banner,
.stat-services-banner *,
.stat-portal-banner,
.stat-portal-banner * {
    color: #FFFFFF !important;
}
.stat-services-banner h3,
.stat-portal-banner h3 {
    color: #FFFFFF !important;
}
.stat-services-banner p,
.stat-portal-banner p {
    color: rgba(255, 255, 255, 0.92) !important;
}
.stat-services-banner .hp-button,
.stat-services-banner a.btn,
.stat-portal-banner .hp-button {
    background: #FFFFFF !important;
    color: var(--hp-blue-link, #005781) !important;
    font-weight: 700 !important;
}
.stat-services-banner .hp-button:hover,
.stat-services-banner a.btn:hover {
    background: #F1F5F9 !important;
    color: #B71C1C !important;
}

/* 6. Đầu mục Danh sách phát Video (Nền xanh lam #004B8D) -> Chữ trắng */
.yt-playlist-top,
.yt-playlist-top *,
.yt-playlist-title,
.yt-playlist-nowplaying,
.yt-eq-text {
    color: #FFFFFF !important;
}

/* 7. Chân trang Footer (Nền xanh đen #002244) -> Chữ trắng/sáng tương phản cao */
footer#footer,
footer#footer *,
.stat-main-footer,
.stat-main-footer * {
    color: #FFFFFF !important;
}
footer#footer h3,
footer#footer h4,
.stat-footer-agency-name,
.stat-footer-heading {
    color: #FFFFFF !important;
}
footer#footer p,
footer#footer li,
footer#footer span,
footer#footer a,
.stat-main-footer a,
.stat-main-footer p,
.stat-main-footer span,
.stat-main-footer li,
.footer-text {
    color: #D7E3E6 !important;
}
footer#footer a:hover,
.stat-main-footer a:hover {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
.stat-footer-bottom,
.stat-footer-bottom * {
    color: #A0B2B7 !important;
}

/* 8. Huy hiệu thể loại văn bản (Nền xanh navy #0A3D62) -> Chữ trắng tương phản tuyệt đối */
.hp-doc-cat-tag {
    background: var(--hp-blue-deep, #07263E) !important;
    color: #FFFFFF !important;
}

/* 9. Tab đang chọn trong Biểu đồ KPI (Nền xanh navy #0A3D62) -> Chữ trắng */
.hp-chart-tabs button.active {
    background: var(--hp-blue-deep, #07263E) !important;
    color: #FFFFFF !important;
}

/* 10. Các nút bấm nền xanh/xanh lá/đỏ (Buttons) -> Chữ trắng */
.btn-primary,
.btn-primary *,
.btn-success,
.btn-success *,
.btn-danger,
.btn-danger * {
    color: #FFFFFF !important;
}

/* 11. Huy hiệu Đã công bố (Nền xanh lá cây nhạt) -> Chữ xanh đậm sắc nét */
.r-status-published {
    background: #edf6f2 !important;
    color: #15803D !important;
    font-weight: 700 !important;
}

/* 12. Huy hiệu Đang phát / Tag xanh lá */
.badge-success,
.label-success {
    background-color: #15803D !important;
    color: #FFFFFF !important;
}

/* Triệt tiêu hoàn toàn 3 điểm sót tương phản */
.hp-editorial .hp-macro-sapo,
.hp-editorial section.hp-macro-showcase-section p,
section.hp-macro-showcase-section p,
.hp-macro-sapo {
    color: #FFFFFF !important;
    opacity: 0.95 !important;
}

.hp-editorial .stat-services-banner p,
.stat-services-banner p,
.stat-portal-banner p {
    color: #FFFFFF !important;
    opacity: 0.95 !important;
}

.hp-editorial #video-home .yt-playlist-title,
.hp-editorial .yt-playlist-title,
.yt-playlist-top .yt-playlist-title,
.yt-playlist-title {
    color: #FFFFFF !important;
}

/* ==========================================================================
   GLOBAL ZERO-UNDERLINE ON HOVER ENFORCEMENT
   Rà soát toàn bộ hệ thống - Tuyệt đối không gạch chân chữ khi hover vào bất kỳ liên kết nào
   ========================================================================== */
html body a,
html body a:hover,
html body a:focus,
html body a:active,
html body a:visited:hover,
html body h1 a, html body h1 a:hover, html body h1 a:focus,
html body h2 a, html body h2 a:hover, html body h2 a:focus,
html body h3 a, html body h3 a:hover, html body h3 a:focus,
html body h4 a, html body h4 a:hover, html body h4 a:focus,
html body h5 a, html body h5 a:hover, html body h5 a:focus,
html body h6 a, html body h6 a:hover, html body h6 a:focus,
html body .mst-hero-title a,
html body .mst-hero-title a:hover,
html body .mst-hero-title a:focus,
html body .mst-item-headline a,
html body .mst-item-headline a:hover,
html body .mst-item-headline a:focus,
html body .mst-spotlight-item a,
html body .mst-spotlight-item a:hover,
html body .mst-spotlight-item a:focus,
html body .mst-box-header-link,
html body .mst-box-header-link:hover,
html body .vtb-survey-card a,
html body .vtb-survey-card a:hover,
html body .release-doc-title a,
html body .release-doc-title a:hover,
html body .vtb-notice-item-title a,
html body .vtb-notice-item-title a:hover,
html body .vtb-notice-all-link,
html body .vtb-notice-all-link:hover,
html body .hp-doc-row a,
html body .hp-doc-row a:hover,
html body .hp-story-title a,
html body .hp-story-title a:hover,
html body .news-item a,
html body .news-item a:hover,
html body .news-item-title a,
html body .news-item-title a:hover,
html body .news-list h3 a:hover,
html body .news-list h4 a:hover,
html body .news-list-item h3 a:hover,
html body .news-list-item h4 a:hover,
html body .item-news h3 a:hover,
html body .item-news h4 a:hover,
html body .panel-news a:hover,
html body .viewcat a,
html body .viewcat a:hover,
html body .viewcat h3 a:hover,
html body .viewcat h4 a:hover,
html body .stat-pillar-card a:hover,
html body .stat-law-name a:hover,
html body .yt-item-title a:hover,
html body .table a:hover,
html body .table td a:hover,
html body .breadcrumbs a:hover,
html body .navbar-nav a:hover,
html body .dropdown-menu a:hover,
html body footer a:hover,
html body #footer a:hover,
html body .stat-main-footer a:hover {
    text-decoration: none !important;
}