/* ==========================================================================
   THONG KE THANH PHO HAI PHONG ENTERPRISE DESIGN SYSTEM (thongkehaiphong.css)
   Cuc Thong ke - Bo Tai chinh / Thong ke Thanh pho Hai Phong
   Design tokens, layout system, corporate styling, responsive data grid
   Author: Cuc Thong ke TP Hai Phong
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. COLOR TOKENS & CSS VARIABLES
   -------------------------------------------------------------------------- */
:root {
  /* Brand Primary */
  --vtb-primary: var(--hp-blue-primary, #0079B6);
  --vtb-primary-dark: var(--hp-blue-active, #00699D);
  --vtb-primary-light: #E6F0F7;
  --vtb-secondary: #0088CC;

  /* Accent (Điểm nhấn / Đỏ Thống kê Hải Phòng) */
  --vtb-accent: #C8553D;
  --vtb-accent-hover: #B81D16;

  /* Neutral Backgrounds */
  --vtb-bg-body: #F7F5F0;
  --vtb-bg-surface: #FFFFFF;

  /* Typography Text Colors */
  --vtb-text-main: #1F2A37;
  --vtb-text-muted: #64748B;

  /* Borders & Dividers */
  --vtb-border: #CBD5E1;
  --vtb-border-light: #E2E8F0;

  /* Font Family Stack */
  --vtb-font-sans: 'Be Vietnam Pro', 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Semantic Status Colors */
  --vtb-success-text: #0D9488;
  --vtb-success-bg: #CCFBF1;
  --vtb-success-border: #99F6E4;

  --vtb-warning-text: #D97706;
  --vtb-warning-bg: #FEF3C7;
  --vtb-warning-border: #FDE68A;

  --vtb-danger-text: #DC2626;
  --vtb-danger-bg: #FEE2E2;
  --vtb-danger-border: #FECACA;

  /* Forward-compatible mappings to existing classes */
  --brand-navy-dark: var(--vtb-primary-dark);
  --brand-royal-blue: var(--vtb-primary);
  --surface-ice-blue: var(--vtb-primary-light);
  --accent-secondary: var(--vtb-accent);
  --accent-secondary-hover: var(--vtb-accent-hover);
  --bg-surface-white: var(--vtb-bg-surface);
  --bg-page-neutral: var(--vtb-bg-body);
  --text-primary-black: var(--vtb-text-main);
  --text-secondary-slate: var(--vtb-text-muted);
}

/* --------------------------------------------------------------------------
   2. CORE PRINCIPLES & GLOBAL BASE RULES
   -------------------------------------------------------------------------- */
body {
  background-color: var(--vtb-bg-body, #F7F5F0) !important;
  color: var(--vtb-text-main, #1F2A37) !important;
  font-family: var(--vtb-font-sans) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  letter-spacing: -0.01em !important;
  -webkit-font-smoothing: antialiased !important;
}

p {
  line-height: 1.65 !important;
  color: #334155 !important;
  margin-bottom: 12px !important;
}

/* Data-First Typography: Mọi số liệu, mã số, tiền tệ dùng tabular-nums */
.tabular-nums,
.table td.tabular-nums,
.table td:nth-child(n+4),
.sc-date-day,
.stat-badge-hotline .number,
.gtsx-kpi-card .number,
.kpi-number {
  font-variant-numeric: tabular-nums !important;
}

/* Sắc nét & Vuông vức (Sharp & Structured: bo góc 2px - 4px) */
.card,
.panel,
.panel-default,
.btn,
.form-control,
.badge,
.label,
.alert,
.stat-calendar-card,
.stat-calendar-date-box,
.stat-survey-card,
.gtsx-hero-banner,
.gtsx-filter-card,
.gtsx-kpi-card {
  border-radius: 3px !important;
}

/* Tiêu đề mục Section / Card Title (H2) */
.vtb-section-title,
.stat-section-title,
.stat-calendar-heading {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--vtb-primary-dark) !important;
  border-left: 4px solid var(--vtb-primary) !important;
  padding-left: 12px !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.015em !important;
}

.stat-section-subtitle {
  font-size: 13.5px !important;
  color: #64748B !important;
  line-height: 1.5 !important;
  margin-bottom: 16px !important;
}

/* --------------------------------------------------------------------------
   3. BỐ CỤC KHUNG TRANG & NAVIGATION (TOPBAR, BRAND HEADER, NAVBAR)
   -------------------------------------------------------------------------- */
/* Topbar */
.stat-topbar {
  background: var(--vtb-primary-dark) !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.stat-topbar a,
.stat-topbar span {
  color: #E2E8F0 !important;
  font-size: 12px !important;
}
.stat-topbar .btn-font-size {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.stat-topbar .btn-font-size.active,
.stat-topbar .btn-font-size:hover {
  background: var(--vtb-accent) !important;
  border-color: var(--vtb-accent) !important;
  color: #FFFFFF !important;
}

/* Brand Header */
.stat-brand-header {
  background: var(--vtb-bg-surface) !important;
  border-bottom: 1px solid var(--vtb-border-light) !important;
}
.stat-brand-titles .main-title {
  color: var(--vtb-primary-dark) !important;
  font-weight: 800 !important;
}
.stat-brand-titles .sub-title {
  color: var(--vtb-primary) !important;
  font-weight: 700 !important;
}
.stat-brand-titles .city-title {
  color: var(--vtb-text-muted) !important;
}

/* Hotline Badge: Viền xám, icon nền xanh nhạt, số tabular-nums */
.stat-badge-hotline {
  background: var(--vtb-bg-surface) !important;
  border: 1px solid var(--vtb-border) !important;
  border-radius: 3px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
.stat-badge-hotline .icon {
  background: var(--vtb-primary-light) !important;
  color: var(--vtb-primary) !important;
  border-radius: 2px !important;
}
.stat-badge-hotline .label {
  color: var(--vtb-text-muted) !important;
}
.stat-badge-hotline .number {
  color: var(--vtb-primary-dark) !important;
  font-weight: 700 !important;
}

/* Menu Bar: Nền #005993, viền đáy 3px solid #DA251D (KẾT HỢP XANH - ĐỎ THỐNG KÊ HẢI PHÒNG) */
.second-nav.stat-navbar {
  background: var(--vtb-primary) !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: 0 2px 6px rgba(var(--hp-blue-highlight-rgb, 0, 145, 216), 0.15) !important;
}
.second-nav.stat-navbar #menusite > ul > li > a {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  text-transform: uppercase !important;
  padding: 14px 16px !important;
  transition: all 0.15s ease !important;
}
.second-nav.stat-navbar #menusite > ul > li:hover > a,
.second-nav.stat-navbar #menusite > ul > li.active > a {
  background: var(--vtb-primary-dark) !important;
  color: #FFFFFF !important;
}
.second-nav.stat-navbar .menu-search-btn {
  background: var(--vtb-primary-dark) !important;
  color: #FFFFFF !important;
}
.second-nav.stat-navbar .menu-search-btn:hover {
  background: var(--vtb-accent) !important;
}

/* Breadcrumb phẳng, sạch sẽ */
.third-nav {
  background: var(--vtb-bg-surface) !important;
  border-bottom: 1px solid var(--vtb-border-light) !important;
}
.breadcrumbs li a {
  color: var(--vtb-text-muted) !important;
}
.breadcrumbs li a:hover {
  color: var(--vtb-primary) !important;
}
.breadcrumbs li.current,
.breadcrumbs li:last-child {
  color: var(--vtb-primary-dark) !important;
  font-weight: 600 !important;
}

/* Sub-navigation / Tabs: Nền trắng, Active chữ #005993 gạch chân #DA251D (Blueprint 5.4) */
.vtb-nav-tabs,
.law-quick-tabs,
.stat-filter-btn-group {
  background: var(--vtb-bg-surface) !important;
  border-bottom: 1px solid var(--vtb-border-light) !important;
  display: flex !important;
  gap: 4px !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
}
.vtb-tab-btn,
.law-tab-btn,
.stat-filter-btn-group .btn {
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  color: var(--vtb-text-muted) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  border-radius: 0 !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}
.vtb-tab-btn:hover,
.law-tab-btn:hover,
.stat-filter-btn-group .btn:hover {
  color: var(--vtb-primary) !important;
  background: var(--vtb-primary-light) !important;
}
.vtb-tab-btn.active,
.law-tab-btn.active,
.stat-filter-btn-group .btn.active,
.stat-filter-btn-group .btn.btn-primary {
  color: var(--vtb-primary) !important;
  background: transparent !important;
  border-bottom: none !important;
  font-weight: 700 !important;
}
.vtb-tab-btn.active em,
.law-tab-btn.active em,
.stat-filter-btn-group .btn.active em {
  color: var(--vtb-primary) !important;
}

/* --------------------------------------------------------------------------
   4. HỆ THỐNG NÚT BẤM (BUTTON BLUEPRINT 5.3)
   -------------------------------------------------------------------------- */
/* Primary Button (Tìm kiếm, Lưu, Xem báo cáo): Nền #005993, chữ trắng, hover #003D66 */
.btn-primary,
.btn-vtb-primary,
.btn-survey-action-primary,
button[type="submit"] {
  background-color: var(--vtb-primary) !important;
  border-color: var(--vtb-primary) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-radius: 3px !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-vtb-primary:hover,
.btn-survey-action-primary:hover,
button[type="submit"]:hover {
  background-color: var(--vtb-primary-dark) !important;
  border-color: var(--vtb-primary-dark) !important;
  color: #FFFFFF !important;
}

/* Accent Button (Kê khai trực tuyến, Cảnh báo, Hành động quan trọng): Nền #DA251D, chữ trắng, hover #B81D16 */
.btn-danger,
.btn-vtb-accent,
.btn-action-accent,
.stat-services-btn {
  background-color: var(--vtb-accent) !important;
  border-color: var(--vtb-accent) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 3px !important;
  transition: background-color 0.15s ease !important;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-vtb-accent:hover,
.btn-action-accent:hover,
.stat-services-btn:hover {
  background-color: var(--vtb-accent-hover) !important;
  border-color: var(--vtb-accent-hover) !important;
  color: #FFFFFF !important;
}

/* Outline / Secondary Button (Xuất Excel, Tải biểu mẫu, Tải tệp, Đặt lại): Nền trắng, chữ #005993, viền 1px solid #005993 */
.btn-default,
.btn-vtb-outline,
.sc-btn-minimal,
.btn-export-excel {
  background-color: var(--vtb-bg-surface) !important;
  border: 1px solid var(--vtb-primary) !important;
  color: var(--vtb-primary) !important;
  font-weight: 600 !important;
  border-radius: 3px !important;
  transition: all 0.15s ease !important;
}
.btn-default:hover,
.btn-default:focus,
.btn-vtb-outline:hover,
.sc-btn-minimal:hover,
.btn-export-excel:hover {
  background-color: var(--vtb-primary-light) !important;
  border-color: var(--vtb-primary) !important;
  color: var(--vtb-primary-dark) !important;
}

/* Form Controls & Inputs */
.form-control,
input[type="text"],
input[type="search"],
select.form-control {
  height: 38px !important;
  padding: 8px 12px !important;
  font-size: 13.5px !important;
  color: var(--vtb-text-main) !important;
  background-color: var(--vtb-bg-surface) !important;
  border: 1px solid var(--vtb-border) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.form-control:focus,
input[type="text"]:focus,
select.form-control:focus {
  border-color: var(--vtb-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(var(--hp-blue-highlight-rgb, 0, 145, 216), 0.15) !important;
}

/* --------------------------------------------------------------------------
   5. THẺ CHỈ SỐ THỐNG KÊ (KPI CARD BLUEPRINT 5.1)
   -------------------------------------------------------------------------- */
.gtsx-kpi-card,
.stat-kpi-box {
  background: var(--vtb-bg-surface) !important;
  border: 1px solid var(--vtb-border) !important;
  border-top: 1px solid #CBD5E1 !important;
  border-radius: 3px !important;
  padding: 16px 18px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 120px !important;
  transition: box-shadow 0.15s ease !important;
}
.gtsx-kpi-card:hover,
.stat-kpi-box:hover {
  box-shadow: 0 3px 8px rgba(var(--hp-blue-highlight-rgb, 0, 145, 216), 0.08) !important;
}
.gtsx-kpi-card.kpi-accent {
  border-top-color: var(--vtb-accent) !important;
}
.gtsx-kpi-card .kpi-label {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--vtb-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.gtsx-kpi-card .kpi-icon-box {
  width: 32px !important;
  height: 32px !important;
  background: var(--vtb-primary-light) !important;
  color: var(--vtb-primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 2px !important;
  font-size: 14px !important;
}
.gtsx-kpi-card .kpi-value {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--vtb-primary-dark) !important;
  font-variant-numeric: tabular-nums !important;
  margin: 6px 0 !important;
  line-height: 1.1 !important;
}
.gtsx-kpi-card .kpi-unit {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--vtb-text-muted) !important;
}
.gtsx-kpi-card .kpi-badge-growth {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 7px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: 2px !important;
  background: var(--vtb-success-bg) !important;
  color: var(--vtb-success-text) !important;
  border: 1px solid var(--vtb-success-border) !important;
}
.gtsx-kpi-card .kpi-badge-growth.negative {
  background: var(--vtb-danger-bg) !important;
  color: var(--vtb-danger-text) !important;
  border-color: var(--vtb-danger-border) !important;
}

/* --------------------------------------------------------------------------
   6. BẢNG DỮ LIỆU ĐỘ TƯƠNG PHẢN CAO (ENTERPRISE DATA TABLE BLUEPRINT 5.2)
   -------------------------------------------------------------------------- */
.table-responsive {
  border: 1px solid var(--vtb-border) !important;
  border-radius: 3px !important;
  background: var(--vtb-bg-surface) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

/* thead BẮT BUỘC nền xanh đậm #005993, chữ trắng, vạch mờ */
.table thead tr,
.table-bordered thead tr,
.table thead th,
.table-bordered thead th {
  background-color: var(--vtb-primary) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  vertical-align: middle !important;
  border-top: none !important;
  border-bottom: 2px solid var(--vtb-primary-dark) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: 10px 14px !important;
}
.table thead th:last-child {
  border-right: none !important;
}

/* td Kẻ lưới rõ cả ngang và dọc, độ cao và lề chuẩn */
.table tbody td,
.table-bordered tbody td {
  border-top: none !important;
  border-bottom: 1px solid var(--vtb-border-light) !important;
  border-right: 1px solid var(--vtb-border-light) !important;
  font-size: 13.5px !important;
  color: var(--vtb-text-main) !important;
  padding: 9px 14px !important;
  vertical-align: middle !important;
}
.table tbody td:last-child {
  border-right: none !important;
}

/* Zebra striping & hover */
.table-striped tbody tr:nth-of-type(odd),
.table tbody tr:nth-of-type(even) {
  background-color: #F8FAFC !important;
}
.table-hover tbody tr:hover,
.table tbody tr:hover {
  background-color: var(--vtb-primary-light) !important;
}

/* Dòng Tổng cộng / Group Header */
.table tbody tr.gtsx-group-TONG td,
.table tbody tr.row-total td {
  background-color: var(--vtb-primary-light) !important;
  color: var(--vtb-primary-dark) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  border-top: 2px solid var(--vtb-primary) !important;
  border-bottom: 2px solid var(--vtb-primary) !important;
}

/* Căn lề kiểu dữ liệu chuẩn Thống kê Hải Phòng: Số liệu BẮT BUỘC căn phải + tabular-nums */
.table td.col-number,
.table td.text-right,
.table th.text-right {
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 600 !important;
}
.table td.col-center,
.table td.text-center,
.table th.text-center {
  text-align: center !important;
}
.table td.col-text,
.table td.text-left,
.table th.text-left {
  text-align: left !important;
}

/* --------------------------------------------------------------------------
   7. KHỐI LỊCH PHỔ BIẾN & TUYÊN TRUYỀN LUẬT THỐNG KÊ
   -------------------------------------------------------------------------- */
.stat-calendar-card {
  background: var(--vtb-bg-surface) !important;
  border: 1px solid var(--vtb-border) !important;
  border-radius: 3px !important;
  padding: 14px 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
}
.stat-calendar-card:hover {
  border-color: var(--vtb-primary) !important;
  box-shadow: 0 2px 6px rgba(var(--hp-blue-highlight-rgb, 0, 145, 216), 0.08) !important;
}

/* Hộp ngày: Nền trắng, viền đỉnh 3px solid #005993, ngày to #003D66 */
.stat-calendar-date-box {
  background: var(--vtb-bg-surface) !important;
  border: 1px solid var(--vtb-border) !important;
  border-top: 1px solid #CBD5E1 !important;
  border-radius: 3px !important;
  width: 62px !important;
  min-width: 62px !important;
  padding: 6px 2px !important;
  text-align: center !important;
}
.stat-calendar-date-box .sc-date-day {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--vtb-primary-dark) !important;
  line-height: 1 !important;
}
.stat-calendar-date-box .sc-date-month {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--vtb-text-muted) !important;
}
.stat-calendar-date-box .sc-date-year {
  font-size: 10px !important;
  color: var(--vtb-text-muted) !important;
}

/* Tiêu đề sự kiện */
.stat-calendar-details .sc-item-title a {
  color: var(--vtb-primary-dark) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
}
.stat-calendar-details .sc-item-title a:hover {
  color: var(--vtb-accent) !important;
}

/* Thẻ Quyền & Nghĩa vụ (Law Card) */
.law-ro-card {
  background: var(--vtb-bg-surface) !important;
  border: 1px solid var(--vtb-border) !important;
  border-radius: 3px !important;
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
}
.law-ro-card:hover {
  border-color: var(--vtb-primary) !important;
}
.law-ro-title {
  color: var(--vtb-primary-dark) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

/* Badges trạng thái */
.law-tag-quyen {
  background: var(--vtb-success-bg) !important;
  border: 1px solid var(--vtb-success-border) !important;
  color: var(--vtb-success-text) !important;
  border-radius: 2px !important;
  font-weight: 700 !important;
}
.law-tag-nghia-vu {
  background: var(--vtb-primary-light) !important;
  border: 1px solid var(--vtb-border) !important;
  color: var(--vtb-primary) !important;
  border-radius: 2px !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   8. FOOTER HỆ THỐNG
   -------------------------------------------------------------------------- */
.stat-footer {
  background: var(--vtb-primary-dark) !important;
  border-top: 1px solid #CBD5E1 !important;
  color: #E2E8F0 !important;
}
.stat-footer h3,
.stat-footer .stat-footer-heading {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
.stat-footer a {
  color: #CBD5E1 !important;
}
.stat-footer a:hover {
  color: #FFFFFF !important;
  text-decoration: none !important;
}


/* === CỐ ĐỊNH CHỮ TAB ACTIVE VÀ DATE BOX THỐNG KÊ HẢI PHÒNG === */
.stat-dissemination-wrapper .stat-calendar-date-box,
.stat-calendar-date-box {
    border-top: 1px solid #CBD5E1 !important;
}

.stat-dissemination-wrapper .law-quick-tabs .law-tab-btn,
.law-quick-tabs .law-tab-btn {
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    color: #64748B !important;
}
.stat-dissemination-wrapper .law-quick-tabs .law-tab-btn em,
.stat-dissemination-wrapper .law-quick-tabs .law-tab-btn span,
.law-quick-tabs .law-tab-btn em,
.law-quick-tabs .law-tab-btn span {
    color: #64748B !important;
}

.stat-dissemination-wrapper .law-quick-tabs .law-tab-btn.active,
.law-quick-tabs .law-tab-btn.active {
    background: transparent !important;
    border-bottom: 3px solid #DA251D !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
}
.stat-dissemination-wrapper .law-quick-tabs .law-tab-btn.active,
.stat-dissemination-wrapper .law-quick-tabs .law-tab-btn.active em,
.stat-dissemination-wrapper .law-quick-tabs .law-tab-btn.active span,
.law-quick-tabs .law-tab-btn.active,
.law-quick-tabs .law-tab-btn.active em,
.law-quick-tabs .law-tab-btn.active span {
    color: var(--hp-blue-link, #005781) !important;
    font-weight: 700 !important;
}



/* ==========================================================================
   THỐNG KÊ HẢI PHÒNG PERFECT FIX: TRIỆT TIÊU 4 TỒN TẠI GIAO DIỆN
   1. Menu đồng nhất màu, không chồng màu, không dải đỏ cắt ngang
   2. Tiêu đề chỉ giữ 1 vạch nhấn duy nhất, triệt tiêu ::before song song
   3. Biểu tượng Tuyên truyền & Lịch & Thông báo nền #E6F0F7 icon #005993 đậm nét
   4. Thanh Topbar nền sáng #F4F7FA, Cỡ chữ & Đăng nhập rõ mồn một tương phản cao
   ========================================================================== */

/* --------------------------------------------------------------------------
   VẤN ĐỀ 1: MENU ĐỒNG NHẤT 1 MÀU, KHÔNG CHỒNG NHIỀU MÀU
   -------------------------------------------------------------------------- */
.second-nav,
.second-nav.stat-navbar {
    background: var(--hp-blue-primary, #0079B6) !important;
    background-color: var(--hp-blue-primary, #0079B6) !important;
    border-top: none !important;
    border-bottom: none !important; /* Bỏ viền đáy đỏ chồng màu */
    box-shadow: 0 2px 8px rgba(var(--hp-blue-highlight-rgb, 0, 145, 216), 0.12) !important;
}

#menusite .navbar-default {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

/* Các mục menu chính: Nền #005993, chữ trắng */
#menusite .navbar-default .navbar-nav > li > a,
.second-nav.stat-navbar #menusite > ul > li > a {
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    padding: 13px 16px !important;
    background: transparent !important;
    transition: background-color 0.15s ease !important;
}

/* Khi hover / active / open: Nền xanh cùng tông đậm nhẹ, KHÔNG dùng màu đen kịt #002244 */
#menusite .navbar-default .navbar-nav > li > a:hover,
#menusite .navbar-default .navbar-nav > li > a:focus,
#menusite .navbar-default .navbar-nav > .active > a,
#menusite .navbar-default .navbar-nav > .active > a:hover,
#menusite .navbar-default .navbar-nav > .open > a,
#menusite .navbar-default .navbar-nav > .open > a:hover,
#menusite .navbar-default .navbar-nav > .open > a:focus,
.second-nav.stat-navbar #menusite > ul > li:hover > a,
.second-nav.stat-navbar #menusite > ul > li.active > a {
    background: var(--hp-blue-active, #00699D) !important;
    background-color: var(--hp-blue-active, #00699D) !important;
    color: #FFFFFF !important;
}

/* Nút tìm kiếm trên navbar: đồng bộ màu */
.second-nav .menu-search-btn,
.second-nav.stat-navbar .menu-search-btn {
    background: var(--hp-blue-active, #00699D) !important;
    color: #FFFFFF !important;
    border: none !important;
}
.second-nav .menu-search-btn:hover,
.second-nav.stat-navbar .menu-search-btn:hover {
    background: var(--hp-blue-active, #00699D) !important;
}

/* Dropdown menu đa cấp: Nền trắng sạch, viền mỏng, chữ đen than */
#menusite .dropdown-menu {
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 0 0 3px 3px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1) !important;
    padding: 4px 0 !important;
}
#menusite .dropdown-menu > li {
    border-bottom: 1px solid #F1F5F9 !important;
}
#menusite .dropdown-menu > li:last-child {
    border-bottom: none !important;
}
#menusite .dropdown-menu > li > a {
    color: #1E293B !important;
    font-size: 13.5px !important;
    padding: 9px 16px !important;
    font-weight: 500 !important;
    background: transparent !important;
}
#menusite .dropdown-menu > li > a:hover,
#menusite .dropdown-menu > li > a:focus,
#menusite .dropdown-menu > .active > a {
    background: #E6F0F7 !important;
    background-color: #E6F0F7 !important;
    color: var(--hp-blue-link, #005781) !important;
    font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   VẤN ĐỀ 2: TIÊU ĐỀ CHỈ GIỮ 1 VẠCH NHẤN XANH DUY NHẤT (TRIỆT TIÊU ::before)
   -------------------------------------------------------------------------- */
.stat-section-title::before,
.stat-calendar-heading::before,
.vtb-section-title::before,
.stat-surveys-block-wrapper .stat-section-title::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
}

.stat-section-title,
.stat-calendar-heading,
.vtb-section-title,
.stat-surveys-block-wrapper .stat-section-title {
    border-left: 4px solid var(--hp-blue-highlight, #0091D8) !important;
    padding-left: 10px !important;
    color: var(--hp-blue-link, #005781) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    display: block !important;
    line-height: 1.35 !important;
    letter-spacing: -0.015em !important;
}

/* --------------------------------------------------------------------------
   VẤN ĐỀ 3: BIỂU TƯỢNG TUYÊN TRUYỀN, LỊCH & THÔNG BÁO RÕ NÉT 100%
   -------------------------------------------------------------------------- */
.stat-calendar-icon-wrap,
.stat-calendar-icon-wrap.law-icon-wrap,
.stat-icon-wrap,
.stat-info-icon-box {
    width: 38px !important;
    height: 38px !important;
    border-radius: 3px !important;
    background: #E6F0F7 !important;
    border: 1px solid #CBD5E1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-right: 10px !important;
}

.stat-calendar-icon-wrap em,
.stat-calendar-icon-wrap i,
.stat-calendar-icon-wrap.law-icon-wrap em,
.stat-calendar-icon-wrap.law-icon-wrap i,
.stat-icon-wrap em,
.stat-icon-wrap i {
    color: var(--hp-blue-link, #005781) !important;
    font-size: 18px !important;
    opacity: 1 !important;
    display: inline-block !important;
}

/* --------------------------------------------------------------------------
   VẤN ĐỀ 4: THANH TOPBAR NỀN SÁNG, CỠ CHỮ & ĐĂNG NHẬP RÕ MỒN MỘT
   -------------------------------------------------------------------------- */
.stat-topbar {
    background: #F4F7FA !important;
    background-color: #F4F7FA !important;
    border-bottom: 1px solid #CBD5E1 !important;
    padding: 6px 0 !important;
    font-size: 12.5px !important;
    color: #1E293B !important;
}

.stat-topbar-left span {
    color: var(--hp-blue-link, #005781) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.stat-topbar-left em,
.stat-topbar-left i {
    color: var(--hp-blue-link, #005781) !important;
    font-size: 14px !important;
}

/* Cụm công cụ Cỡ chữ: Nền trắng, viền mỏng, chữ đen than */
.gov-accessibility-tools {
    display: inline-flex !important;
    align-items: center !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 3px !important;
    padding: 2px 6px !important;
    margin-right: 15px !important;
}
.gov-accessibility-tools .a-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    margin-right: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.gov-accessibility-tools .a-label em {
    color: var(--hp-blue-link, #005781) !important;
}

.btn-font-size {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #1E293B !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    padding: 2px 7px !important;
    margin: 0 2px !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    line-height: 1.3 !important;
    transition: all 0.15s ease !important;
}
.btn-font-size:hover {
    background: #E6F0F7 !important;
    border-color: var(--hp-blue-primary, #0079B6) !important;
    color: var(--hp-blue-link, #005781) !important;
}
.btn-font-size.active {
    background: var(--hp-blue-primary, #0079B6) !important;
    border-color: var(--hp-blue-primary, #0079B6) !important;
    color: #FFFFFF !important;
}

/* Nút Đăng nhập & Liên hệ: Chữ xanh đậm #003D66, icon #005993, rõ nét tương phản cao */
.stat-topbar-right a,
.stat-topbar a,
.header-nav a {
    color: var(--hp-blue-link, #005781) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-left: 10px !important;
    transition: color 0.15s ease !important;
}
.stat-topbar-right a em,
.stat-topbar-right a i,
.stat-topbar a em,
.stat-topbar a i {
    color: var(--hp-blue-link, #005781) !important;
    font-size: 13px !important;
}
.stat-topbar-right a:hover,
.stat-topbar a:hover,
.header-nav a:hover {
    color: #DA251D !important;
}
.stat-topbar-right a:hover em,
.stat-topbar-right a:hover i,
.stat-topbar a:hover em,
.stat-topbar a:hover i {
    color: #DA251D !important;
}


/* ==========================================================================
   THỐNG KÊ HẢI PHÒNG DESIGN SYSTEM V100 - TOÀN BỘ CÁC SỬA ĐỔI HOÀN HẢO
   ========================================================================== */

/* 1. TOPBAR CỠ CHỮ & ĐĂNG NHẬP: KHÔNG DÙNG NỀN ĐỎ, TƯƠNG PHẢN CHUẨN DOANH NGHIỆP */
.stat-topbar {
    background: #F4F7FA !important;
    background-color: #F4F7FA !important;
    border-bottom: 1px solid #CBD5E1 !important;
    color: #1E293B !important;
}
.stat-topbar .gov-accessibility-tools {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 3px !important;
    padding: 2px 6px !important;
}
.stat-topbar .gov-accessibility-tools .a-label {
    color: #1E293B !important;
    font-weight: 600 !important;
}
.stat-topbar .gov-accessibility-tools .a-label em {
    color: var(--hp-blue-link, #005781) !important;
}
.stat-topbar .btn-font-size,
.btn-font-size {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #1E293B !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    padding: 2px 8px !important;
    margin: 0 2px !important;
    border-radius: 2px !important;
    transition: all 0.15s ease !important;
}
.stat-topbar .btn-font-size:hover,
.btn-font-size:hover {
    background: #E6F0F7 !important;
    background-color: #E6F0F7 !important;
    border-color: var(--hp-blue-primary, #0079B6) !important;
    color: var(--hp-blue-link, #005781) !important;
}
.stat-topbar .btn-font-size.active,
.btn-font-size.active {
    background: var(--hp-blue-primary, #0079B6) !important;
    background-color: var(--hp-blue-primary, #0079B6) !important;
    border-color: var(--hp-blue-primary, #0079B6) !important;
    color: #FFFFFF !important;
}
.stat-topbar-right a,
.stat-topbar a {
    color: var(--hp-blue-link, #005781) !important;
    font-weight: 600 !important;
}
.stat-topbar-right a em,
.stat-topbar-right a i,
.stat-topbar a em,
.stat-topbar a i {
    color: var(--hp-blue-link, #005781) !important;
}
.stat-topbar-right a:hover,
.stat-topbar a:hover {
    color: #DA251D !important;
}

/* 2. MENU NAVBAR: ĐỒNG NHẤT 100% MÀU #005993, KHÔNG CHỒNG MÀU, KHÔNG VIỀN ĐỎ */
.second-nav,
.second-nav.stat-navbar {
    background: var(--hp-blue-primary, #0079B6) !important;
    background-color: var(--hp-blue-primary, #0079B6) !important;
    border: none !important;
    border-top: 1px solid var(--hp-blue-highlight, #0091D8) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 6px rgba(var(--hp-blue-highlight-rgb, 0, 145, 216), 0.15) !important;
}
#menusite .navbar-default {
    background: transparent !important;
    border: none !important;
}
#menusite .navbar-default .navbar-nav > li > a {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    text-transform: uppercase !important;
    padding: 13px 16px !important;
    background: transparent !important;
}
#menusite .navbar-default .navbar-nav > li > a:hover,
#menusite .navbar-default .navbar-nav > li > a:focus,
#menusite .navbar-default .navbar-nav > .active > a,
#menusite .navbar-default .navbar-nav > .open > a {
    background: var(--hp-blue-active, #00699D) !important;
    background-color: var(--hp-blue-active, #00699D) !important;
    color: #FFFFFF !important;
}
#menusite .dropdown-menu {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 0 0 3px 3px !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
    padding: 4px 0 !important;
}
#menusite .dropdown-menu > li > a {
    color: #1E293B !important;
    font-size: 13.5px !important;
    padding: 9px 16px !important;
    font-weight: 500 !important;
}
#menusite .dropdown-menu > li > a:hover,
#menusite .dropdown-menu > li > a:focus {
    background: #E6F0F7 !important;
    color: var(--hp-blue-link, #005781) !important;
    font-weight: 600 !important;
}

/* 3. TIÊU ĐỀ: CHỈ 1 VẠCH NHẤN XANH DUY NHẤT (TRIỆT TIÊU TOÀN BỘ ::before) */
.stat-section-title::before,
.stat-calendar-heading::before,
.vtb-section-title::before,
.stat-surveys-block-wrapper .stat-section-title::before,
.stat-hotnews-title::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
}
.stat-section-title,
.stat-calendar-heading,
.vtb-section-title,
.stat-surveys-block-wrapper .stat-section-title {
    border-left: 4px solid var(--hp-blue-highlight, #0091D8) !important;
    padding-left: 10px !important;
    color: var(--hp-blue-link, #005781) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    text-transform: uppercase !important;
    display: block !important;
    line-height: 1.35 !important;
    letter-spacing: -0.015em !important;
}

/* 4. BLOCK HOTNEWS: THIẾT KẾ DOANH NGHIỆP CHUẨN THỐNG KÊ HẢI PHÒNG, KHÔNG BỊ CẮT ẢNH */
.stat-hotnews-wrapper {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-top: 1px solid #CBD5E1 !important;
    border-radius: 3px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
    overflow: hidden !important;
}
.stat-hotnews-item {
    display: flex !important;
    flex-wrap: wrap !important;
    background: #FFFFFF !important;
    min-height: 380px !important;
}
.stat-hotnews-content {
    flex: 1 1 50% !important;
    min-width: 320px !important;
    padding: 30px 34px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: #FFFFFF !important;
    border-right: 1px solid #E2E8F0 !important;
}
.stat-hotnews-tag-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}
.stat-hotnews-cat {
    background: #E6F0F7 !important;
    color: var(--hp-blue-link, #005781) !important;
    border: 1px solid #CBD5E1 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 3px 10px !important;
    border-radius: 2px !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}
.stat-hotnews-cat:hover {
    background: var(--hp-blue-primary, #0079B6) !important;
    color: #FFFFFF !important;
    border-color: var(--hp-blue-primary, #0079B6) !important;
}
.stat-hotnews-spotlight {
    background: #FEF3C7 !important;
    color: #D97706 !important;
    border: 1px solid #FDE68A !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.stat-hotnews-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 0 10px 0 !important;
}
.stat-hotnews-title a {
    color: var(--hp-blue-link, #005781) !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}
.stat-hotnews-title a:hover {
    color: var(--hp-blue-link, #005781) !important;
}
.stat-hotnews-meta {
    font-size: 12px !important;
    color: #64748B !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.stat-hotnews-meta em {
    color: var(--hp-blue-link, #005781) !important;
}
.stat-hotnews-desc {
    font-size: 13.5px !important;
    color: #374151 !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.stat-hotnews-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 15px !important;
    border-top: 1px solid #F1F5F9 !important;
    margin-top: auto !important;
}
.btn-hotnews-view {
    background: var(--hp-blue-primary, #0079B6) !important;
    color: #FFFFFF !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    border-radius: 2px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background 0.15s ease !important;
}
.btn-hotnews-view:hover {
    background: var(--hp-blue-active, #00699D) !important;
    color: #FFFFFF !important;
}
.stat-hotnews-nav-ctrls {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.stat-hotnews-btn-prev,
.stat-hotnews-btn-next {
    width: 34px !important;
    height: 34px !important;
    border-radius: 2px !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: var(--hp-blue-link, #005781) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    padding: 0 !important;
}
.stat-hotnews-btn-prev:hover,
.stat-hotnews-btn-next:hover {
    background: #E6F0F7 !important;
    border-color: var(--hp-blue-primary, #0079B6) !important;
    color: var(--hp-blue-link, #005781) !important;
}
.stat-hotnews-media {
    flex: 1 1 50% !important;
    min-width: 320px !important;
    background: #F8FAFC !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.stat-hotnews-img-wrap {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 380px !important;
    position: relative !important;
    overflow: hidden !important;
}
.stat-hotnews-img-wrap img,
.stat-hotnews-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important; /* Đảm bảo đỉnh ảnh/infographic luôn hiển thị đầy đủ */
    display: block !important;
    transition: transform 0.3s ease !important;
}
.stat-hotnews-img-wrap:hover img {
    transform: scale(1.02) !important;
}
.stat-hotnews-img-badge {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    background: rgba(var(--hp-blue-highlight-rgb, 0, 145, 216), 0.92) !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 5px 12px !important;
    letter-spacing: 0.03em !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.stat-hotnews-wrapper .owl-dots {
    position: absolute !important;
    bottom: 8px !important;
    left: 34px !important;
    display: flex !important;
    gap: 6px !important;
    z-index: 10 !important;
}
.stat-hotnews-wrapper .owl-dots .owl-dot span {
    width: 16px !important;
    height: 3px !important;
    background: #CBD5E1 !important;
    border-radius: 1px !important;
    display: block !important;
    transition: all 0.2s ease !important;
}
.stat-hotnews-wrapper .owl-dots .owl-dot.active span {
    width: 24px !important;
    background: var(--hp-blue-primary, #0079B6) !important;
}

/* 5. LỊCH PHỔ BIẾN & TUYÊN TRUYỀN: KHÔNG DÙNG NỀN ĐỎ/VÀNG CHỒNG CHÉO */
.stat-calendar-date-box {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-top: 1px solid #CBD5E1 !important;
    border-radius: 3px !important;
    width: 62px !important;
    min-width: 62px !important;
    padding: 6px 2px !important;
    text-align: center !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
}
.stat-calendar-date-box .sc-date-day {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--hp-blue-link, #005781) !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums !important;
}
.stat-calendar-date-box .sc-date-month {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #64748B !important;
    text-transform: uppercase !important;
}
.stat-calendar-date-box .sc-date-year {
    font-size: 10px !important;
    color: #64748B !important;
    font-variant-numeric: tabular-nums !important;
}
.law-ro-card {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 3px !important;
    border-left: 1px solid #CBD5E1 !important; /* Loại bỏ viền trái xanh/xanh lá dày cộm */
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
    transition: border-color 0.15s ease !important;
}
.law-ro-card:hover {
    border-color: var(--hp-blue-primary, #0079B6) !important;
}
.law-tag-quyen,
.law-tag.law-tag-quyen {
    background: #E6F0F7 !important;
    border: 1px solid #CBD5E1 !important;
    color: var(--hp-blue-link, #005781) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 2px !important;
    padding: 2px 8px !important;
}
.law-tag-nghia-vu,
.law-tag.law-tag-nghia_vu,
.law-tag.law-tag-nghia-vu {
    background: #F1F5F9 !important;
    border: 1px solid #CBD5E1 !important;
    color: #334155 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 2px !important;
    padding: 2px 8px !important;
}
.law-quick-tabs .law-tab-btn {
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    color: #64748B !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
}
.law-quick-tabs .law-tab-btn.active {
    color: var(--hp-blue-link, #005781) !important;
    font-weight: 700 !important;
    border-bottom: 3px solid #DA251D !important;
}
.law-quick-tabs .law-tab-btn.active em,
.law-quick-tabs .law-tab-btn.active span {
    color: var(--hp-blue-link, #005781) !important;
}

/* 6. THANH ĐIỀU HƯỚNG BREADCRUMB: ĐỒNG BỘ HIỆN ĐẠI, KHÔNG DÙNG HÌNH MŨI TÊN ĐA GIÁC XÁM */
.breadcrumbs,
.breadcrumb,
#breadcrumbs {
    background: transparent !important;
    border: none !important;
    padding: 10px 0 !important;
    margin-bottom: 15px !important;
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 13px !important;
}
.breadcrumbs li,
.breadcrumb > li {
    display: inline-flex !important;
    align-items: center !important;
    color: #64748B !important;
    padding: 0 !important;
    margin: 0 !important;
}
.breadcrumbs li::after,
.breadcrumb > li::after,
.breadcrumbs li a::after,
.breadcrumb > li a::after,
.breadcrumbs li::before,
.breadcrumb > li::before {
    display: none !important;
    content: none !important;
    border: none !important;
}
.breadcrumb > li + li::before {
    content: "/" !important;
    display: inline-block !important;
    padding: 0 6px !important;
    color: #94A3B8 !important;
}
.breadcrumbs li a,
.breadcrumb > li a {
    color: var(--hp-blue-link, #005781) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
.breadcrumbs li a:hover,
.breadcrumb > li a:hover {
    color: #DA251D !important;
    text-decoration: none !important;
}
.breadcrumbs li.active,
.breadcrumb > li.active,
.breadcrumb > li:last-child {
    color: #1E293B !important;
    font-weight: 600 !important;
}


/* Triệt tiêu hoàn toàn nút owl-nav mặc định của owlCarousel */
.stat-hotnews-wrapper .owl-nav,
.stat-hotnews-wrapper .owl-carousel .owl-nav,
.stat-hotnews-wrapper .owl-prev,
.stat-hotnews-wrapper .owl-next {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Căn góc trái trên cho ảnh infographic để không bao giờ bị cắt chữ THỐNG KÊ ở góc trái */
.stat-hotnews-img-wrap img,
.stat-hotnews-img {
    object-position: left top !important;
}


/* ==========================================================================
   THỐNG KÊ HẢI PHÒNG ENTERPRISE DESIGN SYSTEM: CHART & TABLE PERFECT COMPLIANCE
   Tuân thủ nghiêm ngặt Mục 5.2 (Enterprise Data Table) & Mục 6 (Charting Guidelines)
   ========================================================================== */

/* --- 1. BIỂU ĐỒ & ĐIỀU KHIỂN BIỂU ĐỒ (CHART CONTROLS) --- */
.stat-chart-container {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-top: 1px solid #CBD5E1 !important;
    border-radius: 3px !important;
    padding: 16px 20px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
.stat-chart-title-area h4 {
    color: var(--hp-blue-link, #005781) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
}
.stat-chart-title-area em {
    color: var(--hp-blue-link, #005781) !important;
    margin-right: 6px !important;
}
.stat-chart-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 10px 0 14px 0 !important;
}
.stat-chart-tabs .stat-chart-tab-btn,
.stat-chart-tab-btn {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #1E293B !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 5px 12px !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    outline: none !important;
}
.stat-chart-tabs .stat-chart-tab-btn:hover,
.stat-chart-tab-btn:hover {
    background: #E6F0F7 !important;
    background-color: #E6F0F7 !important;
    border-color: var(--hp-blue-primary, #0079B6) !important;
    color: var(--hp-blue-link, #005781) !important;
}
.stat-chart-tabs .stat-chart-tab-btn.active,
.stat-chart-tab-btn.active {
    background: var(--hp-blue-primary, #0079B6) !important;
    background-color: var(--hp-blue-primary, #0079B6) !important;
    border-color: var(--hp-blue-primary, #0079B6) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(var(--hp-blue-highlight-rgb, 0, 145, 216), 0.25) !important;
}

/* --- 2. BẢNG DỮ LIỆU ĐỘ TƯƠNG PHẢN CAO TOÀN DIỆN (TABLES BLUEPRINT 5.2) --- */
/* Toàn bộ bảng dữ liệu trong hệ thống tuân theo 100% chuẩn Thống kê Hải Phòng */
.table,
.table-bordered,
.table-striped,
.table-hover {
    border-collapse: collapse !important;
    border: 1px solid #CBD5E1 !important;
    background-color: #FFFFFF !important;
    font-size: 13.5px !important;
    color: #1E293B !important;
    width: 100% !important;
    border-radius: 3px !important;
}

/* 1. Tiêu đề thead BẮT BUỘC nền xanh đậm #005993, chữ trắng, vạch ngăn mờ */
.table thead th,
.table-bordered thead th,
.table-striped thead th,
table thead th {
    background-color: var(--hp-blue-primary, #0079B6) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    padding: 10px 14px !important;
    vertical-align: middle !important;
    border-top: none !important;
    border-bottom: 2px solid var(--hp-blue-active, #00699D) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.table thead th:last-child {
    border-right: none !important;
}

/* 2. Các ô dữ liệu td có đường kẻ lưới rõ cả ngang và dọc */
.table tbody td,
.table-bordered tbody td,
table tbody td {
    border-top: none !important;
    border-bottom: 1px solid #E2E8F0 !important;
    border-right: 1px solid #E2E8F0 !important;
    font-size: 13.5px !important;
    color: #1E293B !important;
    padding: 9px 14px !important;
    vertical-align: middle !important;
}
.table tbody td:last-child {
    border-right: none !important;
}

/* 3. Nền xen kẽ (Zebra striping) & hover đổi sang #E6F0F7 */
.table-striped tbody tr:nth-of-type(even),
.table tbody tr:nth-of-type(even) {
    background-color: #F8FAFC !important;
}
.table-striped tbody tr:nth-of-type(odd),
.table tbody tr:nth-of-type(odd) {
    background-color: #FFFFFF !important;
}
.table-hover tbody tr:hover,
.table tbody tr:hover,
.table tbody tr:hover td {
    background-color: #E6F0F7 !important;
}

/* 4. Căn lề theo kiểu dữ liệu chuẩn Thống kê Hải Phòng */
/* STT, Mã code, Ngày tháng, Trạng thái: Căn giữa */
.table td.text-center,
.table th.text-center,
.table td:first-child:not([colspan]),
.table th:first-child:not([colspan]) {
    text-align: center !important;
}

/* Tên đơn vị, nội dung: Căn trái */
.table td.text-left,
.table th.text-left {
    text-align: left !important;
}

/* Số liệu, Tiền tệ, Tỷ lệ %: BẮT BUỘC căn phải + tabular-nums */
.table td.text-right,
.table th.text-right,
.table td.tabular-nums {
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
    font-weight: 600 !important;
}

/* Cụm nút lọc nhanh đơn vị cấp xã: Sắc nét, tương phản chuẩn doanh nghiệp */
.gtsx-quick-pill {
    display: inline-block !important;
    background: #FFFFFF !important;
    color: #1E293B !important;
    border: 1px solid #CBD5E1 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 2px !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
}
.gtsx-quick-pill:hover {
    background: #E6F0F7 !important;
    border-color: var(--hp-blue-primary, #0079B6) !important;
    color: var(--hp-blue-link, #005781) !important;
}
.gtsx-quick-pill.active,
.gtsx-quick-pill:first-of-type {
    background: var(--hp-blue-primary, #0079B6) !important;
    border-color: var(--hp-blue-primary, #0079B6) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
}
.gtsx-quick-pill.active:hover {
    background: var(--hp-blue-active, #00699D) !important;
    color: #FFFFFF !important;
}

/* Căn chỉnh hàng lọc gtsx-filter-row: Buttons và Comboboxes luôn ngang đáy với nhau */
@media (min-width: 992px) {
    .gtsx-filter-row {
        display: flex !important;
        align-items: flex-end !important;
    }
}


/* ==========================================================================
   FIX TRIỆT ĐỂ: DROPDOWN GỢI Ý TRA CỨU SỐ LIỆU KHÔNG BỊ CHE KHUẤT
   Giải quyết vấn đề: .stat-hero-section bị overflow: hidden cắt xén danh sách kết quả
   ========================================================================== */
.stat-hero-section {
    overflow: visible !important;
    position: relative !important;
    z-index: 100 !important;
}
.stat-hero-section .container,
.stat-hero-content {
    position: relative !important;
    z-index: 101 !important;
}
#stat-search-form,
.stat-search-box {
    position: relative !important;
    z-index: 10 !important;
}

/* Hộp gợi ý dropdown: Nổi lên trên cùng (z-index cực đại), bóng đổ sắc nét chuẩn Thống kê Hải Phòng */
.stat-suggest-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 3px !important;
    box-shadow: 0 16px 40px rgba(0, 34, 68, 0.22), 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    z-index: 99999 !important;
    max-height: 480px !important;
    overflow-y: auto !important;
    text-align: left !important;
    font-family: 'Be Vietnam Pro', 'Roboto', sans-serif !important;
}

/* Tiêu đề nhóm & header dropdown */
.stat-suggest-header {
    background: #F8FAFC !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid #E2E8F0 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--hp-blue-link, #005781) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
.stat-suggest-group-title {
    padding: 8px 16px 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #64748B !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    background: #F8FAFC !important;
    border-top: 1px solid #F1F5F9 !important;
}

/* Từng dòng gợi ý kết quả */
.stat-suggest-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    text-decoration: none !important;
    color: #1E293B !important;
    transition: background 0.15s ease !important;
}
.stat-suggest-item:hover,
.stat-suggest-item.active {
    background: #E6F0F7 !important;
    text-decoration: none !important;
}
.stat-suggest-title {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--hp-blue-link, #005781) !important;
}
.stat-suggest-meta {
    font-size: 11.5px !important;
    color: #64748B !important;
    margin-top: 2px !important;
}
.stat-suggest-badge.kpi-value {
    background: #CCFBF1 !important;
    color: #0D9488 !important;
    border: 1px solid #99F6E4 !important;
    border-radius: 2px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    padding: 3px 8px !important;
    font-variant-numeric: tabular-nums !important;
}


/* ==========================================================================
   THỐNG KÊ HẢI PHÒNG ENTERPRISE - INFOGRAPHIC TAB IN TUYÊN TRUYỀN LUẬT THỐNG KÊ
   ========================================================================== */
.law-img-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    margin-top: 10px !important;
}

@media (max-width: 768px) {
    .law-img-grid {
        grid-template-columns: 1fr !important;
    }
}

.law-img-card {
    display: flex !important;
    flex-direction: column !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 34, 68, 0.06) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    height: 100% !important;
}

.law-img-card:hover {
    border-color: var(--hp-blue-primary, #0079B6) !important;
    box-shadow: 0 6px 16px rgba(var(--hp-blue-highlight-rgb, 0, 145, 216), 0.12) !important;
}

.law-img-thumb-box {
    position: relative !important;
    width: 100% !important;
    height: 125px !important;
    background: #F1F5F9 !important;
    overflow: hidden !important;
    border-bottom: 1px solid #E2E8F0 !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
}

.law-img-thumb-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.3s ease !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}

.law-img-thumb-box:hover img {
    transform: scale(1.06) !important;
}

.law-img-hover-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 32, 63, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.law-img-thumb-box:hover .law-img-hover-overlay {
    opacity: 1 !important;
}

.law-img-zoom-pill {
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--hp-blue-link, #005781) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transform: translateY(4px) !important;
    transition: transform 0.2s ease !important;
}

.law-img-thumb-box:hover .law-img-zoom-pill {
    transform: translateY(0) !important;
}

.law-img-code-badge {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(0deg, rgba(var(--hp-blue-highlight-rgb, 0, 145, 216), 0.95) 0%, rgba(var(--hp-blue-highlight-rgb, 0, 145, 216), 0.85) 100%) !important;
    color: #FFFFFF !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 3px 6px !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    z-index: 3 !important;
}

.law-img-info {
    padding: 10px 10px 12px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    justify-content: space-between !important;
    background: #FFFFFF !important;
}

.law-img-title {
    margin: 0 0 6px 0 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: var(--hp-blue-link, #005781) !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 35px !important;
}

.law-img-card:hover .law-img-title {
    color: var(--hp-blue-link, #005781) !important;
}

.law-img-summary {
    font-size: 11.5px !important;
    color: #64748B !important;
    line-height: 1.4 !important;
    margin: 0 0 10px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 32px !important;
}

.law-img-actions {
    display: block !important;
    margin-top: auto !important;
    padding-top: 8px !important;
    border-top: 1px solid #F1F5F9 !important;
}

.law-btn-detail {
    display: flex !important;
    width: 100% !important;
    height: 30px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    background: #F8FAFC !important;
    color: var(--hp-blue-link, #005781) !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 2px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.law-btn-detail:hover {
    background: var(--hp-blue-primary, #0079B6) !important;
    color: #FFFFFF !important;
    border-color: var(--hp-blue-primary, #0079B6) !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(var(--hp-blue-highlight-rgb, 0, 145, 216), 0.2) !important;
}

/* ================= LIGHTBOX MODAL (AN LINK THUC TE) ================= */
.law-modal-overlay {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 26, 46, 0.88) !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    opacity: 0;
    transition: opacity 0.25s ease !important;
}

.law-modal-overlay.active {
    display: flex !important;
    opacity: 1 !important;
}

.law-modal-dialog {
    position: relative !important;
    background: #FFFFFF !important;
    border-radius: 4px !important;
    max-width: 980px !important;
    width: 100% !important;
    max-height: 92vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    animation: lawModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes lawModalPop {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.law-modal-header {
    background: var(--hp-blue-active, #00699D) !important;
    color: #FFFFFF !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 2px solid #DA251D !important;
    gap: 12px !important;
}

.law-modal-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: hidden !important;
}

.law-modal-badge {
    background: #DA251D !important;
    color: #FFFFFF !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 2px !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
}

.law-modal-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: #FFFFFF !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.law-modal-close {
    background: rgba(255, 255, 255, 0.15) !important;
    border: none !important;
    color: #FFFFFF !important;
    font-size: 24px !important;
    line-height: 1 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s ease !important;
    padding: 0 !important;
}

.law-modal-close:hover {
    background: #DA251D !important;
    color: #FFFFFF !important;
}

.law-modal-body {
    padding: 16px !important;
    overflow-y: auto !important;
    background: #F8FAFC !important;
    min-height: 320px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.law-modal-loading {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    color: var(--hp-blue-link, #005781) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 40px !important;
}

.law-modal-img {
    max-width: 100% !important;
    max-height: 70vh !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 2px !important;
    box-shadow: 0 4px 20px rgba(0, 34, 68, 0.15) !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}

.law-modal-footer {
    background: #FFFFFF !important;
    padding: 10px 18px !important;
    border-top: 1px solid #E2E8F0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 12px !important;
    color: #64748B !important;
}

.law-modal-source-note {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.law-modal-btn-close {
    background: var(--hp-blue-primary, #0079B6) !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 6px 16px !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background 0.15s ease !important;
}

.law-modal-btn-close:hover {
    background: var(--hp-blue-active, #00699D) !important;
}


/* --------------------------------------------------------------------------
   SUPERPOWERS ANTI-FLOP & ZERO HORIZONTAL OVERFLOW SYSTEM
   -------------------------------------------------------------------------- */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  position: relative !important;
}

.site-wrapper,
#wraper,
#stat-calendar-wrap,
.stat-hotnews-slider,
.stat-hotnews-wrap,
.owl-carousel {
  max-width: 100% !important;
  overflow: hidden !important;
}

.law-quick-tabs {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  display: flex !important;
  scrollbar-width: thin !important;
}

.law-quick-tabs .law-tab-btn {
  flex-shrink: 0 !important;
}

@media (max-width: 768px) {
  .stat-block-container {
    padding: 12px 10px !important;
  }
  .law-quick-tabs {
    gap: 2px !important;
  }
  .law-tab-btn {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
}


/* ==========================================================================
   UI/UX PRO MAX & QUICK-WINS: MODERN BREATHING ROOM, ACCESSIBILITY & AUTOCOMPLETE
   ========================================================================== */

/* 1. THIẾT KẾ THOÁNG MẮT, GIẢM MỎI MẮT, BỐ CỤC HIỆN ĐẠI */
.stat-section {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

/* Thẻ số liệu & Hộp nội dung: Bo nhẹ, viền mảnh mềm mại #E2E8F0, bóng mờ tự nhiên */
.stat-calendar-card,
.stat-survey-card,
.law-ro-card,
.stat-kpi-card,
.panel-default,
.card {
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 4px 12px -2px rgba(15, 23, 42, 0.02) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.stat-calendar-card:hover,
.stat-survey-card:hover,
.law-ro-card:hover,
.stat-kpi-card:hover {
  box-shadow: 0 8px 24px -4px rgba(var(--hp-blue-highlight-rgb, 0, 145, 216), 0.1), 0 2px 6px -1px rgba(var(--hp-blue-highlight-rgb, 0, 145, 216), 0.04) !important;
  border-color: #CBD5E1 !important;
}

/* Giới hạn số dòng tóm tắt (Anti-Wall of Text) chống mỏi mắt */
.law-ro-desc,
.sc-event-summary,
.news-item-desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.6 !important;
  font-size: 13.5px !important;
  color: #475569 !important;
  margin-top: 6px !important;
}

.law-ro-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--hp-blue-link, #005781) !important;
  margin-bottom: 6px !important;
}

/* 2. QUICK-WIN 1: CHUẨN HÓA TOUCH TARGETS ĐẠT 44x44PX TRÊN DI ĐỘNG */
.stat-topbar .btn-font-size,
.law-tab-btn,
.law-btn-detail,
.pagination > li > a,
.stat-kpi-quick-btn {
  position: relative;
}

/* Lớp đệm mở rộng vùng chạm vô hình >= 44px */
.stat-topbar .btn-font-size::before,
.law-tab-btn::before,
.law-btn-detail::before,
.pagination > li > a::before,
.stat-kpi-quick-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  z-index: 1;
}

@media (max-width: 768px) {
  .stat-topbar .btn-font-size {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
  }

  .law-tab-btn {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 13.5px !important;
  }

  .law-btn-detail {
    min-height: 40px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
  }

  .pagination > li > a,
  .pagination > li > span {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* 3. QUICK-WIN 2: VÒNG NÉT TRỢ NĂNG WCAG 2.1 AAA (:focus-visible) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.law-tab-btn:focus-visible,
.law-btn-detail:focus-visible,
.law-img-thumb-box:focus-visible {
  outline: 2px solid var(--hp-blue-highlight, #0091D8) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(var(--hp-blue-highlight-rgb, 0, 145, 216), 0.2) !important;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.law-tab-btn:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* 4. QUICK-WIN 3: HỖ TRỢ GIẢM CHUYỂN ĐỘNG (prefers-reduced-motion) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 5. QUICK-WIN 4: AUTOCOMPLETE SEARCH POPUP STYLING (3 NHÓM CHUYÊN BIỆT) */
.stat-suggest-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 4px !important;
  box-shadow: 0 20px 45px -10px rgba(0, 34, 68, 0.25), 0 8px 16px -4px rgba(0, 0, 0, 0.08) !important;
  z-index: 99999 !important;
  max-height: 520px !important;
  overflow-y: auto !important;
  text-align: left !important;
  font-family: 'Be Vietnam Pro', 'Roboto', sans-serif !important;
}

.stat-suggest-header {
  background: #F1F5F9 !important;
  padding: 11px 18px !important;
  border-bottom: 1px solid #E2E8F0 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--hp-blue-link, #005781) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  letter-spacing: 0.5px !important;
}

.stat-suggest-count {
  font-size: 11px !important;
  color: #64748B !important;
  font-weight: 600 !important;
}

.stat-suggest-group-title {
  padding: 10px 18px 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--hp-blue-link, #005781) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  background: #F8FAFC !important;
  border-top: 1px solid #F1F5F9 !important;
  border-bottom: 1px solid #F1F5F9 !important;
}

.stat-suggest-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid #F8FAFC !important;
  text-decoration: none !important;
  color: #1E293B !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

.stat-suggest-item:hover,
.stat-suggest-item.active {
  background: #E6F0F7 !important;
  text-decoration: none !important;
}

.stat-suggest-item-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
}

.stat-suggest-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}

.stat-suggest-icon.icon-indicator {
  background: #E6F0F7 !important;
  color: var(--hp-blue-link, #005781) !important;
}

.stat-suggest-icon.icon-law {
  background: #FEE2E2 !important;
  color: #DA251D !important;
}

.stat-suggest-icon.icon-pub {
  background: #ECFDF5 !important;
  color: #059669 !important;
}

.stat-suggest-text {
  flex: 1 !important;
}

.stat-suggest-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0F172A !important;
  line-height: 1.4 !important;
}

.stat-suggest-meta {
  font-size: 12px !important;
  color: #64748B !important;
  margin-top: 2px !important;
}

.stat-suggest-mark {
  background: #FEF08A !important;
  color: var(--hp-blue-link, #005781) !important;
  font-weight: 700 !important;
  padding: 1px 3px !important;
  border-radius: 2px !important;
}

.stat-suggest-badge {
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}

.stat-suggest-badge.kpi-value {
  background: #CCFBF1 !important;
  color: #0D9488 !important;
  border: 1px solid #99F6E4 !important;
  font-variant-numeric: tabular-nums !important;
}

.stat-suggest-badge.law-badge {
  background: #FEE2E2 !important;
  color: #991B1B !important;
  border: 1px solid #FECACA !important;
}

.stat-suggest-badge.pub-badge {
  background: #ECFDF5 !important;
  color: #065F46 !important;
  border: 1px solid #A7F3D0 !important;
}

.stat-suggest-footer {
  padding: 8px 18px !important;
  background: #F8FAFC !important;
  border-top: 1px solid #E2E8F0 !important;
  font-size: 11px !important;
  color: #64748B !important;
  display: flex !important;
  justify-content: space-between !important;
}

.stat-suggest-footer kbd {
  background: #E2E8F0 !important;
  color: #334155 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 2px !important;
  padding: 1px 5px !important;
  font-size: 10px !important;
}

/* ENFORCED SPECIFICITY OVERRIDES FOR MODERN AIRY BREATHING ROOM */
html body,
body {
  background-color: var(--vtb-bg-body, #F7F5F0) !important;
  color: var(--vtb-text-main, #1F2A37) !important;
  font-family: var(--vtb-font-sans) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  letter-spacing: -0.01em !important;
}

html body p,
body p {
  line-height: 1.65 !important;
  color: #334155 !important;
  margin-bottom: 14px !important;
}

html body .stat-section-title,
html body .vtb-section-title,
html body .stat-calendar-heading,
.stat-section-title,
.stat-calendar-heading {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--hp-blue-link, #005781) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 6px !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;
}

/* Commune statistics table and its unit note */
.gtsx-table-unit {
    color: #19354a;
    font-size: 13px;
    line-height: 1.5;
}
.gtsx-table-scroll {
    overflow-x: auto;
}
.gtsx-table-scroll:focus-visible {
    outline: 2px solid var(--hp-blue-highlight, #0091D8);
    outline-offset: -2px;
}
#gtsx-public-table {
    min-width: 760px;
}
#gtsx-public-table > thead > tr > th {
    background: #123b57 !important;
    color: #fff !important;
    font-weight: 700 !important;
    line-height: 1.35;
}
#gtsx-public-table > tbody > tr > td {
    color: #182d3d !important;
}
#gtsx-public-table > tbody > tr > td.text-success {
    color: #17643d !important;
}
#gtsx-public-table > tbody > tr > td.text-danger {
    color: #a1232b !important;
}
#gtsx-public-table .gtsx-table-row-unit {
    text-align: center;
    white-space: nowrap;
}