/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author:      UX Themes
Template:    flatsome
Version:     3.0
*/

/* ==========================================================================
   MỤC LỤC
   ==========================================================================

:root {

  --kvdb-navy: #0b2a5b;       /* xanh navy đậm */
  --kvdb-blue: #1455a8;       /* xanh xanh dương chính */
  --kvdb-blue-light: #2f6fc4; /* xanh nhạt hover */
  --kvdb-red: #c8102e;        /* đỏ logo/accent */
  --kvdb-gray: #f4f6fa;       /* nền xám nhạt section */
  --kvdb-text: #333333;
}

/* Font tổng thể - nên dùng Roboto hoặc Be Vietnam Pro cho tiếng Việt */
body {
  font-family: "Be Vietnam Pro", "Roboto", sans-serif;
  color: var(--kvdb-text);
}
.img-radius .img-inner{border-radius: 6px !important;}

/* Tiêu đề section căn giữa kiểu "LĨNH VỰC HOẠT ĐỘNG" */
.kvdb-section-title {
  text-align: center;
  text-transform: uppercase;
  color: var(--kvdb-navy);
  font-weight: 700;
  letter-spacing: 1px;
  position: relative;
  margin-bottom: 40px;
}
.kvdb-section-title:after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--kvdb-red);
  margin: 12px auto 0;
}

/* Icon home cho item đầu tiên */
#wide-nav .header-nav > li.menu-item-home > a::before {
    content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  vertical-align: -2px;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3l9 8h-3v9h-4v-6h-4v6H6v-9H3z'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3l9 8h-3v9h-4v-6h-4v6H6v-9H3z'/></svg>") no-repeat center / contain;
}

.kvdb-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 14px;
  line-height: 1.25;
}

.kvdb-brand-name {
  color: #0b2a5b;            /* xanh navy đậm */
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.kvdb-brand-slogan {
  color: #c8102e;            /* đỏ - đổi sang #555 nếu muốn xám */
  font-size: 14px;
  font-style: italic;
  font-weight: 500;
  margin-top: 2px;
}

/* Responsive - thu nhỏ trên mobile */
@media (max-width: 768px) {
  .kvdb-brand-name { font-size: 15px; }
  .kvdb-brand-slogan { font-size: 11px; }
}
/* Làm cho khu vực logo + chữ thẳng hàng dọc */
#logo, #logo + .html {
  display: flex;
  align-items: center;
}

#logo img {
  max-height: 60px;   /* chỉnh chiều cao logo cho khớp với 2 dòng chữ */
  width: auto;
}
/* Kéo khối chữ sát vào logo */
.kvdb-brand {
  margin-left: -10px !important;   /* tăng số âm nếu muốn sát hơn, vd -20px */
  padding-left: 0 !important;
}

/* Xóa khoảng cách mặc định của ô HTML trong header */
.header-main .html,
#logo + div,
.header-main .flex-col {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Bỏ chiều rộng thừa của ô logo (logo thường có width cố định đẩy chữ ra xa) */
#logo {
  width: auto !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}
#logo a {
  margin-right: 0 !important;
  padding-right: 0 !important;
}

/* ===== THANH MENU CHÍNH ===== */
.header-nav .nav > li > a {
  color: #ffffff !important;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  padding: 0 20px !important;
  line-height: 48px !important;
  border-radius: 0 !important;
}

/* Hover + đang chọn: nền xanh nhạt hơn */
.header-nav .nav > li > a:hover,
.header-nav .nav > li.active > a,
.header-nav .nav > li.current-menu-item > a {
  background: #2f6fc4 !important;
  color: #fff !important;
}

/* Dấu mũi tên dropdown trắng */
.header-nav .nav > li > a .icon-angle-down,
.header-nav .nav .current-dropdown > a:after {
  color: #fff !important;
}

/* ===== MENU CON (DROPDOWN) ===== */
.nav-dropdown {
  background: #ffffff !important;
  border: none !important;
  border-top: 3px solid #c8102e !important;   /* viền đỏ trên cùng */
  box-shadow: 0 8px 24px rgba(0,0,0,.15) !important;
  padding: 8px 0 !important;
  border-radius: 0 0 4px 4px !important;
}

.nav-dropdown li a {
  color: #333 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  line-height: 1.4 !important;
}

.nav-dropdown li:last-child a {
  border-bottom: none !important;
}

/* Hover item menu con */
.nav-dropdown li a:hover {
  background: #f4f6fa !important;
  color: #1455a8 !important;
  padding-left: 22px !important;       /* đẩy nhẹ sang phải khi hover */
}
/* Giãn cách menu - nhắm đúng nav-divided */
#wide-nav .header-nav.nav-divided > li > a {
  padding-left: 20px !important;
  padding-right: 20px !important;
}


/* ════════════════════════════════════════════════════
   TOPBAR (class: kvdb-topbar)
   ════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   A. CÂN BỐ CỤC 3 Ô TOP-BAR (trái / giữa / phải)
   ───────────────────────────────────────────── */

/* Ô trái (dòng "Chào mừng…"): co theo nội dung */
.header-top .flex-left{
    flex:0 1 auto !important;
}

/* Ô giữa: nở rộng, dồn nội dung sang phải */
.header-top .flex-center{
    flex:1 1 auto !important;
    min-width:0 !important;                 /* nhường chỗ cho ô phải khi hẹp */
    justify-content:flex-end !important;
}
.header-top .flex-center > .nav{
    margin-left:auto !important;
    width:auto !important;
    justify-content:flex-end !important;
    flex-wrap:nowrap !important;
}

/* Ô phải (English + ngày tháng): KHÔNG co, giữ đủ chỗ */
.header-top .flex-right{
    flex:0 0 auto !important;
    white-space:nowrap !important;
}
.header-top .flex-right > .nav{
    flex-wrap:nowrap !important;
}

/* Cụm ngày tháng + gtranslate không xuống dòng */
.topbar-date{
    display:inline-flex !important;
    align-items:center !important;
    gap:4px;
    line-height:1.1 !important;
    white-space:nowrap !important;
}
.gtranslate_wrapper{
    display:inline-flex !important;
    align-items:center !important;
    gap:8px;
    white-space:nowrap !important;
}


/* ─────────────────────────────────────────────
   B. ROW kvdb-topbar
   ───────────────────────────────────────────── */
.kvdb-topbar{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-end !important;
    margin:0 15px 0 0 !important;
}
.kvdb-topbar > .col{
    flex:0 0 auto !important;
    width:auto !important;
    max-width:none !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    display:flex !important;
    align-items:center !important;
}
.kvdb-topbar > .col > .col-inner{
    width:100% !important;
}


/* ─────────────────────────────────────────────
   C. CHỮ CÁC MỤC (Sơ đồ / Hỏi đáp / Liên hệ)
   ───────────────────────────────────────────── */
.kvdb-topbar p{
    margin:0 !important;
    padding:0 16px !important;
    color:#fff !important;
    font-size:14px !important;
    font-weight:600 !important;
    text-align:center;
    white-space:nowrap;
    cursor:pointer;
    transition:.25s;
}
.kvdb-topbar .col:hover p{
    color:#ffd54f !important;
}


/* ─────────────────────────────────────────────
   D. Ô SEARCH (outline) — nút cao đúng 34px
   ───────────────────────────────────────────── */
.kvdb-topbar .searchform-wrapper{
    width:210px !important;
    max-width:210px !important;
    margin-left:12px !important;
}

/* form: hàng ngang, căn giữa theo chiều dọc */
.kvdb-topbar .searchform .flex-row{
    flex-wrap:nowrap !important;
    align-items:center !important;
}
.kvdb-topbar .searchform .flex-grow{
    flex:1 1 auto !important;
    min-width:0 !important;
}
.kvdb-topbar .searchform .flex-col:last-child{
    flex:0 0 auto !important;
}

/* ô input */
.kvdb-topbar .search-field{
    width:100% !important;
    height:34px !important;
    line-height:34px !important;
    margin:0 !important;
    padding:0 10px !important;
    background:transparent !important;
    border:1px solid rgba(255,255,255,.6) !important;
    border-right:none !important;
    border-radius:4px 0 0 4px !important;
    color:#fff !important;
    font-size:13px !important;
    vertical-align:middle !important;
    box-shadow:none !important;
}
.kvdb-topbar .search-field::placeholder{
    color:rgba(255,255,255,.7) !important;
    opacity:1 !important;
}

/* nút submit */
.kvdb-topbar .ux-search-submit{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:40px !important;
    min-width:40px !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1 !important;
    background:transparent !important;
    border:1px solid rgba(255,255,255,.6) !important;
    border-left:none !important;
    border-radius:0 4px 4px 0 !important;
    box-shadow:none !important;
}
.kvdb-topbar .ux-search-submit i{
    margin:0 !important;
    color:#fff !important;
    font-size:14px !important;
    line-height:1 !important;
}
.kvdb-topbar .ux-search-submit:hover{
    background:rgba(255,255,255,.15) !important;
}
/* ════════════════════════════════════════════
   E. KHUNG GỢI Ý LIVE-SEARCH (autocomplete)
   ════════════════════════════════════════════ */

/* Mở rộng khung kết quả, không bám hẹp theo ô search */
.kvdb-topbar .live-search-results,
.kvdb-topbar .autocomplete-suggestions{
    width:360px !important;          /* ⭐ rộng hơn, chỉnh tùy ý */
    max-width:90vw !important;
    right:0 !important;
    left:auto !important;            /* canh theo mép phải ô search */
    background:#fff !important;
    border:1px solid #e0e0e0 !important;
    border-radius:6px !important;
    box-shadow:0 8px 24px rgba(0,0,0,.18) !important;
    max-height:420px !important;
    overflow-y:auto !important;
}

/* Mỗi gợi ý */
.kvdb-topbar .autocomplete-suggestion{
    display:flex !important;
    align-items:center !important;
    gap:10px;
    padding:10px 12px !important;
    border-bottom:1px solid #f0f0f0 !important;
    white-space:normal !important;   /* cho chữ xuống dòng tự nhiên */
    line-height:1.4 !important;
}
.kvdb-topbar .autocomplete-suggestion:last-child{
    border-bottom:none !important;
}

/* Ảnh thumbnail trong gợi ý */
.kvdb-topbar .autocomplete-suggestion img{
    width:46px !important;
    height:46px !important;
    object-fit:cover !important;
    border-radius:4px !important;
    flex:0 0 auto !important;
}

/* Chữ tiêu đề gợi ý */
.kvdb-topbar .autocomplete-suggestion,
.kvdb-topbar .autocomplete-suggestion *{
    font-size:13.5px !important;
    color:#0b2a5b !important;
}

/* Phần chữ trùng từ khóa (in đậm) */
.kvdb-topbar .autocomplete-suggestion strong,
.kvdb-topbar .autocomplete-suggestion b{
    color:#c8102e !important;
    font-weight:700 !important;
}

/* Hover từng dòng */
.kvdb-topbar .autocomplete-suggestion:hover{
    background:#f2f5fa !important;
    cursor:pointer;
}

/* ════════════════════════════════════════════
   F. FIX VẠCH NGĂN (đều nhau) + BỎ KẺ NGANG
   ════════════════════════════════════════════ */

/* 1. Tắt vạch chia mặc định của theme (nav-divided) trong topbar */
.flex-center .nav-divided > li + li::before,
.flex-center .nav-divided li.header-block::before{
    display:none !important;
    border:none !important;
}

/* 2. Bỏ mọi kẻ ngang dưới (border-bottom) của nav + row */
.flex-center .nav,
.flex-center .nav-divided,
.kvdb-topbar,
.kvdb-topbar .col{
    border-bottom:none !important;
}

/* 3. Vạch ngăn dọc ĐỀU NHAU giữa các cột */
.kvdb-topbar > .col{
    position:relative !important;
    border-left:none !important;      /* bỏ border cũ cao thấp không đều */
}
.kvdb-topbar > .col + .col::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    height:20px !important;            /* ⭐ chiều cao vạch cố định, đều nhau */
    width:1px;
    background:rgba(255,255,255,.3);
}

/* ==========================================================================
   4. LĨNH VỰC HOẠT ĐỘNG (Trang chủ)
   ========================================================================== */
.kvdb-fields{
    max-width:1440px;
    margin:0 auto;
    /*padding:50px 15px;*/
}

/* --- Tiêu đề có 2 vạch ngang --- */
.kvdb-fields-title{
    text-align:center;
    color:#0b2a5b;
    font-weight:800;
    font-size:24px;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:35px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
}
.kvdb-fields-title:before,
.kvdb-fields-title:after{
    content:"";
    height:2px;
    width:60px;
    background:#c8102e;
}

/* --- Lưới 4 card (flex) --- */
.kvdb-fields-grid{
    --gap:10px;            /* chỉ cần đổi số này, không cần sửa gì khác */
    display:flex;
    flex-wrap:wrap;
    gap:var(--gap);
}

/* --- Mỗi card --- */
.kvdb-field{
     flex:1 1 calc(25% - var(--gap) * 3 / 4);
    max-width:calc(25% - var(--gap) * 3 / 4);
    position:relative;
    height:260px;
    border-radius:8px;
    overflow:hidden;
    background-size:cover;
    background-position:center;
    text-decoration:none;
    transition:.3s;
}

/* Lớp phủ navy */
.kvdb-field:before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,
        rgba(11,42,91,.95) 0%,
        rgba(11,42,91,.55) 50%,
        rgba(11,42,91,.15) 100%);
    transition:.3s;
}
.kvdb-field:hover:before{
    background:linear-gradient(to top,
        rgba(20,85,168,.95) 0%,
        rgba(20,85,168,.6) 50%,
        rgba(20,85,168,.2) 100%);
}

/* Hover nhấc card lên */
.kvdb-field:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(11,42,91,.25);
}

/* Link phủ toàn card */
.kvdb-field-link{
    position:absolute;
    inset:0;
    z-index:3;
    text-indent:-9999px;
}

/* Nội dung card */
.kvdb-field-content{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:22px;
    z-index:2;
    color:#fff;
}
.kvdb-field-icon{
    display:inline-flex;
    width:48px;
    height:48px;
    border-radius:50%;
    background:#1455a8;
    align-items:center;
    justify-content:center;
    font-size:22px;
    margin-bottom:12px;
}
.kvdb-field h3{
    color:#fff;
    font-size:18px;
    font-weight:800;
    text-transform:uppercase;
    line-height:1.2;
    margin:0 0 8px;
}
.kvdb-field p{
    color:#dbe4f2;
    font-size:16px;
    line-height:1.45;
    margin:0;
}

/* --- Responsive --- */
@media (max-width:992px){
    .kvdb-field{ flex:1 1 calc(50% - 10px); max-width:calc(50% - 10px); }
}
@media (max-width:480px){
    .kvdb-field{ flex:1 1 100%; max-width:100%; }
    .kvdb-fields-title:before,
    .kvdb-fields-title:after{ width:30px; }
}

/* ==========================================================================
   5. THANH THỐNG KÊ (Trang chủ)
   ========================================================================== */
   .kvdb-stats{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:20px;
    max-width:none;
    margin:0 auto;
    padding:30px 15px;
}

/* Mỗi ô: icon trái + text phải */
.kvdb-stat{
    flex:1;
    display:flex;
    align-items:flex-start;
    gap:14px;
    min-width:180px;
    padding-right:20px;
    border-right:1px solid #e3e8f0;
}
.kvdb-stat:last-child{ border-right:none; }

.kvdb-stat-icon{ flex-shrink:0; }

.kvdb-stat-num{
    color:#1455a8;
    font-size:30px;
    font-weight:800;
    line-height:1.1;
}
.kvdb-stat-num small{
    display:block;
    font-size:13px;
    font-weight:700;
    color:#0b2a5b;
    margin-top:2px;
}
.kvdb-stat-num-sm{
    font-size:18px;
    color:#0b2a5b;
    text-transform:uppercase;
}
.kvdb-stat-text p{
    color:#555;
    font-size:16px;
    line-height:1.4;
    margin:6px 0 0;
}

/* Responsive */
@media (max-width:768px){
    .kvdb-stat{
        flex:1 1 45%;
        border-right:none;
        border-bottom:1px solid #e3e8f0;
        padding-bottom:14px;
    }
}
@media (max-width:480px){
    .kvdb-stat{ flex:1 1 100%; }
}
.kvdb-stat-icon img{
    width:80px;
    height:80px;
    object-fit:contain;
    display:block;
}
/* ════════════════════════════════════════════════════
   KHỐI TIN TỨC TRÁI 
   ════════════════════════════════════════════════════ */



/* ════════════════════════════════════════════════════
   TIN TỨC & SỰ KIỆN (kvdb-news)
   ════════════════════════════════════════════════════ */

/* 1. Tiêu đề chính */
.kvdb-news > h4{
    color:#0b2a5b !important;
    font-weight:800 !important;
    font-size:22px !important;
    text-transform:uppercase;
    position:relative;
    padding-bottom:15px;
    margin-bottom:12px;
    border:none !important;
}
.kvdb-news > h4:after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    width:60px; height:3px;
    background:#c8102e;
}

/* 2. Thanh tab (nav) */
.kvdb-news .nav-tabs,
.kvdb-news ul.nav{
    border-bottom:none !important;
    margin-bottom:14px !important;
    gap:6px;
    flex-wrap:wrap;
    display:flex;
}
.kvdb-news ul.nav > li{
    margin:0 2px 4px 0 !important;
    border:none !important;
}
.kvdb-news ul.nav > li > a{
    color:#555 !important;
    background:#fff !important;
    border:1px solid #d5dbe3 !important;
    border-radius:6px !important;
    padding:7px 15px !important;
    font-size:12px !important;
    font-weight:700 !important;
    text-transform:uppercase !important;
    letter-spacing:.2px;
    box-shadow:none !important;
    transition:.25s;
}
.kvdb-news ul.nav > li > a span{color:inherit !important;}
.kvdb-news ul.nav > li:hover > a,
.kvdb-news ul.nav > li > a:hover{
    color:#1455a8 !important;
    background:#eef3fb !important;
    border:1px solid #1455a8 !important;
}
.kvdb-news ul.nav > li.active > a{
    background:#1455a8 !important;
    border:1px solid #1455a8 !important;
    border-radius:6px !important;
}
.kvdb-news ul.nav > li.active > a,
.kvdb-news ul.nav > li.active > a span{
    color:#fff !important;
}
.kvdb-news ul.nav > li > a:before,
.kvdb-news ul.nav > li > a:after,
.kvdb-news ul.nav.nav-line > li > a:before,
.kvdb-news ul.nav.nav-line > li:hover > a:before,
.kvdb-news ul.nav.nav-line > li.active > a:before{
    content:none !important;
    display:none !important;
    border:none !important;
    background:none !important;
}

/* 3. Ảnh bài viết */
.kvdb-news .box-image{
    width:100% !important;
    border-radius:6px;
    overflow:hidden;
    margin:0 !important;
}
.kvdb-news .image-cover{padding-top:60% !important;}

/* 4. Badge ngày (đè góc trên-trái ảnh) */
.kvdb-news .badge.post-date.absolute.top{
    top:8px !important;
    left:8px !important;
    right:auto !important;
    bottom:auto !important;
}
.kvdb-news .badge.post-date .badge-inner{
    background:rgba(11,42,91,.92) !important;
    border:none !important;
    border-radius:3px !important;
    padding:3px 7px !important;
    box-shadow:0 1px 5px rgba(0,0,0,.2);
    text-align:center;
}
.kvdb-news .badge.post-date .post-date-day,
.kvdb-news .badge.post-date .post-date-month{
    color:#fff !important;
    font-size:11.5px !important;
    font-weight:700 !important;
    display:inline !important;
}
.kvdb-news .badge.post-date .post-date-month{margin-left:2px;}
.kvdb-news .badge.post-date .badge-inner br{display:none !important;}

/* 5. Khối chữ + tiêu đề (cố định 3 dòng) */
.kvdb-news .box-text{
    text-align:left !important;
    padding:12px 4px 0 !important;
}
.kvdb-news .post-title{
    margin:0 0 8px 0 !important;
    min-height:63px;
}
.kvdb-news .post-title a,
.kvdb-news h5 a{
    color:#0b2a5b !important;
    font-size:15px !important;
    font-weight:700 !important;
    line-height:1.45 !important;
    text-transform:none !important;
    transition:.25s;
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.kvdb-news .post-title a:hover,
.kvdb-news h5 a:hover{color:#c8102e !important;}

/* Ngày dạng đầy đủ (tab Đấu thầu) */
.kvdb-news .post-meta{
    color:#c8102e !important;
    font-weight:600 !important;
    font-size:12px !important;
}

/* 6. Card cao bằng nhau */
.kvdb-news .row.large-columns-4{
    display:flex !important;
    flex-wrap:wrap;
    align-items:stretch !important;
}
.kvdb-news .post-item{display:flex !important;}
.kvdb-news .post-item > .col-inner{width:100%;display:flex;}
.kvdb-news .post-item .box{
    display:flex !important;
    flex-direction:column;
    width:100%;
}
.kvdb-news .post-item .box-text{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
}

/* 7. Nút "Xem thêm tin" */
.kvdb-news .button.primary.is-outline{
    border-color:#1455a8 !important;
    color:#1455a8 !important;
    margin-top:15px;
    border-radius:10px !important;
}
.kvdb-news .button.primary.is-outline:hover{
    background:#1455a8 !important;
    color:#fff !important;
}


/* ════════════════════════════════════════════════════
   RESPONSIVE - TABLET (≤ 849px)
   ════════════════════════════════════════════════════ */
@media (max-width:849px){


    /* Tin tức: card 2 cột */
    .kvdb-news .post-title{min-height:auto;}
}

/* RESPONSIVE - MOBILE (≤ 549px) */
@media (max-width:549px){

    /* ===== Tin tức: cách xa khối  ===== */
    .kvdb-news{
        margin:35px 10px 0 !important;   /* 35px khoảng cách phía trên */
    }
    .kvdb-news > h4{font-size:18px !important;}

    /* ===== Tab: hiện hết, xuống nhiều hàng (KHÔNG cuộn) ===== */
    .kvdb-news ul.nav{
        flex-wrap:wrap !important;       /* cho phép xuống hàng */
        overflow-x:visible !important;   /* bỏ cuộn ngang */
        gap:6px !important;
        padding-bottom:0 !important;
    }
    .kvdb-news ul.nav > li{
        flex:0 0 auto !important;
        margin:0 !important;
    }
    .kvdb-news ul.nav > li > a{
        font-size:12px !important;
        padding:6px 12px !important;
    }

    /* Card tin */
    .kvdb-news .post-title{min-height:auto;}
    .kvdb-news .image-cover{padding-top:56% !important;}
}


   
/* ==========================================================================
   3. SLIDER (Trang chủ)
   ========================================================================== */

/* 3.1 Ken Burns - ảnh zoom chậm ------------------------------------------ */
.slider .flickity-slider > .cell .img,
.slider .flickity-slider > .cell .ux-banner {
    overflow: hidden;
}

.slider .flickity-slider > .cell.is-selected img,
.slider .flickity-slider > .cell.is-selected .bg {
    animation: kenburns 6s ease-out forwards;
}

@keyframes kenburns {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.15) translate(-2%, -1%); }
}

/* 3.2 Text fade-in / slide-up -------------------------------------------- */
.slider .flickity-slider > .cell .text-box,
.slider .flickity-slider > .cell h1,
.slider .flickity-slider > .cell h2,
.slider .flickity-slider > .cell h3,
.slider .flickity-slider > .cell .button,
.slider .flickity-slider > .cell p {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.slider .flickity-slider > .cell.is-selected h1,
.slider .flickity-slider > .cell.is-selected h2,
.slider .flickity-slider > .cell.is-selected h3 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.slider .flickity-slider > .cell.is-selected p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.7s;
}

.slider .flickity-slider > .cell.is-selected .button {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1s;
}

/* 3.3 Overlay mờ trên ảnh ------------------------------------------------ */
.slider .flickity-slider > .cell .ux-banner::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg,
                rgba(0, 50, 100, 0.4) 0%,
                rgba(0, 50, 100, 0.1) 50%,
                rgba(0, 50, 100, 0.4) 100%);
}

.slider .flickity-slider > .cell .ux-banner > * {
    position: relative;
    z-index: 2;
}

/* 3.4 Bullet pagination -------------------------------------------------- */
.slider .flickity-page-dots {
    bottom: 30px;
}

.slider .flickity-page-dots .dot {
    width: 12px;
    height: 12px;
    margin: 0 6px;
    background: transparent;
    border: 2px solid #fff;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.slider .flickity-page-dots .dot.is-selected {
    width: 30px;
    background: #fff;
    border-radius: 6px;
    opacity: 1;
}



/* ==========================================================================
   5. TRANG CHỦ - THƯ VIỆN MEDIA
   ========================================================================== */

/* 5.1 Container tổng */
.media-wrapper > .col-inner {
    box-sizing: border-box;
   padding: 30px 15px 10px 15px !important;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(26, 61, 124, 0.1);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* 5.2 Tiêu đề "THƯ VIỆN MEDIA" */
.media-title h2 {
    position: relative;
    margin: 0 0 15px 0 !important;
    padding: 0 0 12px 15px !important;
    color: #1a3d7c !important;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.media-title h2::after {
    content: "";
    position: absolute;
    left: 15px;
    bottom: 0;
    width: 50px;
    height: 3px;
    background: #1a3d7c;
    border-radius: 2px;
}

/* 5.3 Link "Xem thêm ➜" */
.media-more {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

.media-more p {
    margin: 0 !important;
}

.media-more a {
    display: inline-block;
    padding: 6px 14px;
    color: #1a3d7c !important;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-decoration: none !important;
    border: 1.5px solid transparent;
    border-radius: 3px;
    transition: all 0.25s ease;
}

.media-more a strong {
    color: #1a3d7c !important;
    font-weight: 600;
    transition: color 0.25s ease;
}

.media-more a:hover {
    background: #1a3d7c;
    border-color: #1a3d7c;
}

.media-more a:hover,
.media-more a:hover strong {
    color: #ffffff !important;
}

/* 5.4 Grid ảnh — target tất cả banner con */
.media-grid .banner {
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.media-grid .banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(26, 61, 124, 0.2);
}

.media-grid .banner .banner-bg img {
    transition: transform 0.6s ease;
}

.media-grid .banner:hover .banner-bg img {
    transform: scale(1.06);
}

/* 5.5 Responsive */
@media (max-width: 849px) {
    .media-wrapper > .col-inner {
        padding: 20px !important;
    }

    .media-title h2 {
        font-size: 20px;
        padding-left: 0 !important;
    }

    .media-title h2::after {
        left: 0;
    }
}


/* ==========================================================================
   8. TRANG MEDIA (.media-page)
   ========================================================================== */

/* 8.1 Tiêu đề trang ------------------------------------------------------ */
.media-page h2,
.media-page .section-content > h2 {
    display: inline-block !important;
    margin: 10px 0 25px 0 !important;
    padding: 0 0 12px 0 !important;
    background: transparent !important;
    color: #1a3d7c !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border-bottom: 3px solid #1a3d7c !important;
}

.media-page .media-page-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: #1a3d7c;
    font-size: 24px;
    font-weight: 700;
}

.media-page .media-page-title::before {
    content: "▶";
    color: #1a73d6;
    font-size: 22px;
}

/* 8.2 Thanh tiêu đề mục (H3) -------------------------------------------- */
.media-page h3,
.media-page .section-content > h3,
.media-page .media-title-bar,
.media-page .media-section-title .ux-text,
.media-page .media-section-title p {
    display: block !important;
    margin: 5px 0 20px 0 !important;
    padding: 12px 25px !important;
    background: linear-gradient(90deg, #1a73d6 0%, #0d4f9e 100%) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.8px !important;
    text-align: left !important;
    text-transform: uppercase !important;
    border-left: 5px solid #ffc107 !important;
    border-radius: 4px !important;
    box-shadow: 0 3px 10px rgba(26, 115, 214, 0.25) !important;
}

.media-page h3::before {
    content: "▶ " !important;
    margin-right: 8px !important;
    color: #ffc107 !important;
    font-size: 14px !important;
}

.media-page h3 a,
.media-page h3 a:link,
.media-page h3 a:visited {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    font: inherit !important;
    text-decoration: none !important;
    border: none !important;
}

.media-page h3 a:hover,
.media-page h3 a:focus {
    color: #ffc107 !important;
    text-decoration: none !important;
    opacity: 0.95;
    transition: color 0.2s ease;
}

.media-page .media-section-title {
    margin-top: 30px !important;
}

/* 8.3 Card video --------------------------------------------------------- */
.media-page .post-item .box-blog-post {
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid #ececec !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

.media-page .post-item .box-blog-post:hover {
    transform: translateY(-3px) !important;
    border-color: #1a73d6 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}

.media-page .post-item .box-image {
    position: relative !important;
}

.media-page .post-item .box-image::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 5 !important;
    width: 54px !important;
    height: 54px !important;
    background-color: rgba(220, 53, 69, 0.9) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 26px 26px !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    transition: all 0.3s ease;
}

.media-page .post-item .box-image:hover::after {
    background-color: rgba(220, 53, 69, 1);
    transform: translate(-50%, -50%) scale(1.1);
}

.media-page .post-item .box-text {
    padding: 12px 14px 14px !important;
}

.media-page .post-item .post-title a {
    color: #222 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    transition: color 0.2s ease;
}

.media-page .post-item .post-title a:hover {
    color: #1a73d6 !important;
}

.media-page .post-item .post-meta,
.media-page .post-item .from_the_blog_meta {
    margin-bottom: 6px;
    color: #888 !important;
    font-size: 12px !important;
}

.media-page .post-item .post-meta::before {
    content: "🕒 ";
    font-size: 11px;
}

.media-page .post-item .post-views {
    float: right;
    color: #888;
    font-size: 12px;
}

.media-page .post-item .from_the_blog_excerpt,
.media-page .post-item .badge.post-date {
    display: none;
}

/* 8.4 Responsive --------------------------------------------------------- */
@media (max-width: 549px) {
    .media-page .media-title-bar,
    .media-page .media-section-title .ux-text,
    .media-page .media-section-title p {
        padding: 8px 14px !important;
        font-size: 14px !important;
    }
}


/* ==========================================================================
   9. TRANG BLOG SINGLE (body.single-post)
   ========================================================================== */

/* 9.1 Container width 1500px + tỷ lệ 8-4 -------------------------------- */
@media (min-width: 850px) {
    body.single-post #content .row.row-large.row-divided,
    body.single-post #content > .row-large {
        max-width: 1500px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

    .row-large.row-divided > .large-9.col {
        flex-basis: 66.6667% !important;
        max-width: 66.6667% !important;
    }

    .row-large.row-divided > .post-sidebar.large-3.col {
        flex-basis: 33.3333% !important;
        max-width: 33.3333% !important;
    }
}

@media (max-width: 849px) {
    .row-large.row-divided > .large-9.col,
    .row-large.row-divided > .post-sidebar.large-3.col {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
}

/* 9.2 Entry header ------------------------------------------------------- */
body.single-post .entry-header {
    position: relative;
    margin-bottom: 30px !important;
    padding: 20px 20px 25px !important;
    background: linear-gradient(135deg, #f5f8fc 0%, #ffffff 100%);
    border-bottom: 3px solid #1a3d7c;
    border-radius: 6px 6px 0 0;
}

body.single-post .entry-header::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #1a3d7c 0%, #2c5aa0 50%, #1a3d7c 100%);
    border-radius: 6px 6px 0 0;
}

/* 9.3 Category badge ---------------------------------------------------- */
body.single-post .entry-header .entry-category {
    display: inline-block;
    margin-bottom: 15px !important;
    padding: 0 !important;
}

body.single-post .entry-header .entry-category a {
    display: inline-block;
    padding: 6px 16px;
    background: #1a3d7c;
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(26, 61, 124, 0.25);
    transition: all 0.25s ease;
}

body.single-post .entry-header .entry-category a:hover {
    background: #15336a;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(26, 61, 124, 0.35);
}

/* 9.4 Tiêu đề H1 -------------------------------------------------------- */
body.single-post .entry-header .entry-title {
    max-width: 900px;
    margin: 0 auto 18px !important;
    color: #1a3d7c !important;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.3px;
}

/* 9.5 Divider ----------------------------------------------------------- */
body.single-post .entry-header .entry-divider.is-divider {
    width: 60px !important;
    height: 3px !important;
    margin: 18px auto !important;
    background: #1a3d7c !important;
    border-radius: 2px;
    opacity: 1;
}

/* 9.6 Meta -------------------------------------------------------------- */
body.single-post .entry-header .entry-meta {
    margin-top: 12px !important;
    color: #666 !important;
    font-size: 12px !important;
    letter-spacing: 0.5px;
}

body.single-post .entry-header .entry-meta .posted-on {
    color: #666;
}

body.single-post .entry-header .entry-meta .posted-on a {
    color: #1a3d7c !important;
    font-weight: 600;
    transition: color 0.2s ease;
}

body.single-post .entry-header .entry-meta .posted-on a:hover {
    color: #15336a !important;
    text-decoration: underline;
}

body.single-post .entry-header .entry-meta .byline {
    margin-left: 12px;
    padding-left: 12px;
    color: #666;
    border-left: 1px solid #ddd;
}

body.single-post .entry-header .entry-meta .meta-author a,
body.single-post .entry-header .entry-meta .vcard a {
    color: #1a3d7c !important;
    font-weight: 600;
    transition: color 0.2s ease;
}

body.single-post .entry-header .entry-meta .meta-author a:hover {
    color: #15336a !important;
}

/* 9.7 Responsive -------------------------------------------------------- */
@media (max-width: 849px) {
    body.single-post .entry-header {
        padding: 20px 15px !important;
    }

    body.single-post .entry-header .entry-title {
        font-size: 22px;
        line-height: 1.4;
    }

    body.single-post .entry-header .entry-category a {
        padding: 5px 12px;
        font-size: 10px;
    }

    body.single-post .entry-header .entry-meta {
        font-size: 11px !important;
    }

    body.single-post .entry-header .entry-meta .byline {
        display: block;
        margin-top: 6px;
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }
}

@media (max-width: 549px) {
    body.single-post .entry-header .entry-title {
        font-size: 19px;
    }
}

/* Hộp tác giả bài viết */
.entry-author.author-box {
  background: #f6f8fb;
  border: 1px solid #e6eaf0;
  border-radius: 10px;
  padding: 20px 24px;
  margin: 30px 0;
}

/* Avatar tròn, viền nhẹ */
.entry-author .blog-author-image img {
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  width: 90px;
  height: 90px;
  object-fit: cover;
}

/* Tên tác giả */
.entry-author .author-name {
  color: #0a1f44;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: 0.5px;
}

/* Mô tả tác giả */
.entry-author .author-desc {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

/* Căn giữa avatar theo chiều dọc với nội dung */
.entry-author .flex-row.align-top {
  align-items: center;
}

/* Widget Tin xem nhiều nhất */
.widget_post_views_counter_list_widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mỗi bài: ảnh trái - chữ phải */
.widget_post_views_counter_list_widget li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.widget_post_views_counter_list_widget li:last-child {
  border-bottom: none;
}

/* Ảnh thumbnail nhỏ, cố định kích thước */
.widget_post_views_counter_list_widget .post-thumbnail {
  flex: 0 0 128px !important;
}
.widget_post_views_counter_list_widget .post-thumbnail img {
  width: 129px;
  height: 72px;
  object-fit: cover;
  display: block;
}

/* Tiêu đề bài viết */
.widget_post_views_counter_list_widget .post-title {
  flex: 1;
  font-size: 13px;
  line-height: 1.4;
  color: #1a1a1a;
  font-weight: 500;
  text-decoration: none;
}
.widget_post_views_counter_list_widget .post-title:hover {
  color: #0a1f44;
}

/* Ẩn số lượt xem (1) cho gọn */
.widget_post_views_counter_list_widget .count {
  display: none;
}


/* ==========================================================================
   SECTION THƯ VIỆN VIDEO + HÌNH ẢNH (body.single-post)
   ========================================================================== */
   /* ===== THƯ VIỆN VIDEO - thu gọn cho cân đối ===== */

/* Giảm khoảng cách dọc giữa 2 hàng */
.media-video .row {
    margin-bottom: 0 !important;
}

/* Giảm khoảng hở dưới mỗi ô */
.media-video .post-item {
    padding-bottom: 14px !important;
}

/* Hàng cuối không thừa khoảng trống */
.media-video .row:last-child .post-item {
    padding-bottom: 0 !important;
}

/* Thu gọn phần chữ dưới ảnh */
.media-video .box-text {
    padding: 8px 6px 0 !important;
}

/* Tiêu đề gọn 2 dòng, cao đều nhau */
.media-video .post-title {
    margin: 0 !important;
    min-height: 0 !important;
}
.media-video .post-title a {
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size:14px;
}

/* Ẩn gạch divider thừa dưới tiêu đề */
.media-video .is-divider {
    display: none !important;
}

/* ===== NÚT PLAY CHO THƯ VIỆN VIDEO (.media-video) ===== */

/* Đảm bảo ảnh là gốc định vị */
.media-video .box-image {
    position: relative !important;
    overflow: hidden !important;
}

/* Lớp phủ tối nhẹ khi hover */
.media-video .box-image::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.15) !important;
    z-index: 1 !important;
    transition: background 0.3s ease !important;
    pointer-events: none !important;
}

/* Nút tròn play ở giữa */
.media-video .box-image::after {
    content: "▶" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 38px !important;
    height: 38px !important;
    line-height: 38px !important;
    text-align: center !important;
    font-size: 14px !important;
    color: #ffffff !important;
    background: rgba(229, 9, 20, 0.85) !important; /* màu đỏ */
    border-radius: 50% !important;
    padding-left: 3px !important; /* căn giữa tam giác */
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
    z-index: 2 !important;
    transition: all 0.3s ease !important;
    pointer-events: none !important;
    /*border: 1px solid rgba(255,255,255,0.9) !important;*/
}

/* Hiệu ứng hover */
.media-video .box:hover .box-image::before {
    background: rgba(0, 0, 0, 0.35) !important;
}
.media-video .box:hover .box-image::after {
    background: rgba(229, 9, 20, 1) !important;
    transform: translate(-50%, -50%) scale(1.15) !important;
}


@media (max-width:549px){
    .kvdb-dx-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
.kvdb-gallery-head{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #0b2a5b;padding-bottom:15px;margin-bottom:25px;}
.kvdb-gallery-title{color:#0b2a5b;font-size:18px;font-weight:800;text-transform:uppercase;}
.kvdb-gallery-all{color:#c8102e !important;font-size:15px;font-weight:600;white-space:nowrap;}
.kvdb-gallery-all:hover{text-decoration:underline;}
.kvdb-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.kvdb-gal-item {
  display: block;
  padding: 5px;
  border: 1px solid #d8e1ef;
  border-radius: 8px;
  background: #ffffff;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(11, 42, 91, 0.10);
  transition: all .3s ease;
}

.kvdb-gal-item img {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  object-position: center bottom;
  border-radius: 5px;
  display: block;
  transition: .3s ease;
}

.kvdb-gal-item:hover {
  border-color: #0b2a5b;
  box-shadow: 0 8px 20px rgba(11, 42, 91, 0.20);
  transform: translateY(-2px);
}

.kvdb-gal-item:hover img {
  transform: scale(1.03);
}

/* ===== THƯ VIỆN VIDEO - RESPONSIVE TABLET (≤ 849px) ===== */
@media (max-width: 849px) {
    /* Vẫn giữ 3 cột nhưng thu nhỏ chữ + nút play */
    .media-video .post-title a {
        font-size: 12px !important;
    }
    .media-video .box-image::after {
        width: 32px !important;
        height: 32px !important;
        line-height: 32px !important;
        font-size: 12px !important;
    }
}

/* ===== THƯ VIỆN VIDEO - RESPONSIVE MOBILE (≤ 549px) ===== */
@media (max-width: 549px) {
    /* Chuyển về 2 cột cho dễ xem */
    .media-video .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    .media-video .post-item {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-bottom: 12px !important;
    }

    /* Chữ tiêu đề gọn hơn */
    .media-video .post-title a {
        font-size: 14px !important;
        line-height: 1.3 !important;
        -webkit-line-clamp: 2 !important;
    }

    /* Nút play nhỏ vừa với ảnh mobile */
    .media-video .box-image::after {
        width: 34px !important;
        height: 34px !important;
        line-height: 34px !important;
        font-size: 12px !important;
    }

    /* Thu gọn phần chữ */
    .media-video .box-text {
        padding: 6px 4px 0 !important;
    }
}

/* ===== ĐIỆN THOẠI NHỎ (≤ 360px) - 1 cột nếu cần ===== */
@media (max-width: 360px) {
    .media-video .post-item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width:849px){.kvdb-gallery-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:549px){.kvdb-gal-item img{height:100px !important;}}
/* Bỏ khoảng trắng dưới row tin tức */

/* Bỏ padding-bottom của cột bao, GIỮ khoảng cách giữa các thẻ tin */
.kvdb-news > .col,
.kvdb-news .panel > .row > .col,
.kvdb-news .tab-panels{
    padding-bottom:10px !important;
}

/* Giữ nguyên padding cho thẻ tin để không dính nhau */
.kvdb-news .post-item{
    padding-bottom:15px !important;
}

/* ===== FOOTER MENU LIST ===== */
.kvdb-fmenu-title{
    color:#fff !important;
    font-size:16px !important;
    font-weight:700 !important;
    text-transform:uppercase;
    margin-bottom:14px !important;
    padding-bottom:8px;
    border-bottom:2px solid rgba(255,255,255,.25);
}

.kvdb-fmenu-list{
    list-style:none !important;
    margin:0 !important;
    padding:0 !important;
}

.kvdb-fmenu-list li{
    margin:0 0 10px 0 !important;
    padding:0 !important;
}

.kvdb-fmenu-list li a{
    color:#cfd8ec !important;
    font-size:15px !important;
    text-decoration:none !important;
    transition:.2s;
    display:inline-block;
    position:relative;
    padding-left:16px;
}

/* Dấu mũi tên/chấm đầu dòng */
.kvdb-fmenu-list li a:before{
    content:"›";
    position:absolute;
    left:0;
    color:#ffd54f;
    font-weight:700;
}

.kvdb-fmenu-list li a:hover{
    color:#fff !important;
    padding-left:20px;
}

/* ===== FOOTER - THÔNG TIN LIÊN HỆ ===== */
.kvdb-finfo{
    list-style:none !important;
    margin:0 !important;
    padding:0 !important;
}

.kvdb-finfo li{
    color:#cfd8ec !important;
    font-size:14px !important;
    line-height:1.6 !important;
    margin:0 0 12px 0 !important;
    padding:0 0 0 26px !important;
    position:relative;
}

/* Icon đầu dòng */
.kvdb-finfo{
    list-style:none !important;
    margin:0 !important;
    padding:0 !important;
}
.kvdb-finfo li{
    color:#cfd8ec !important;
    font-size:14px !important;
    line-height:1.6 !important;
    margin:0 0 12px 0 !important;
    padding:0 !important;
}
.kvdb-finfo li strong{
    color:#fff !important;
    font-weight:700 !important;
    margin-right:4px;
}
.footer-facebook-page.no-cover {
  width: 100%;
  max-width: 340px;
  margin-top: 15px;
}

/*Facebook footer page plugin */
.footer-facebook-page.no-cover .fb-page-card {
  display: block;
  padding: 14px;
  border-radius: 8px;
  background: #ffffff;
  color: #111111;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.footer-facebook-page.no-cover .fb-page-main {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 34px;
}

.footer-facebook-page.no-cover .fb-page-avatar {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #e5e5e5;
  background: #ffffff;
}

.footer-facebook-page.no-cover .fb-page-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-facebook-page.no-cover .fb-page-info {
  min-width: 0;
}

.footer-facebook-page.no-cover .fb-page-info strong {
  display: block;
  color: #000000;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
}

.footer-facebook-page.no-cover .fb-page-info span {
  display: block;
  margin-top: 4px;
  color: #555555;
  font-size: 13px;
  line-height: 1.3;
}

.footer-facebook-page.no-cover .fb-page-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 26px;
  height: 26px;
  line-height: 26px;
  border-radius: 50%;
  background: #1877f2;
  color: #ffffff;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  font-family: Arial, sans-serif;
}

.footer-facebook-page.no-cover .fb-page-button {
  margin-top: 14px;
  height: 34px;
  line-height: 34px;
  border-radius: 5px;
  background: #1877f2;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}

.footer-facebook-page.no-cover .fb-page-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.footer-facebook-page.no-cover .fb-page-card:hover .fb-page-button {
  background: #0f6be8;
}

/* ==========================================================================
   SƠ ĐỒ TỔ CHỨC (.kvdb-org)
   ========================================================================== */

.kvdb-org { max-width: 1200px; margin: 0 auto; }

/* ----- HÀNG ----- */
.kvdb-org-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    margin-bottom: 30px;
    align-items: stretch;
}

/* ----- KHUNG MỖI MỤC ----- */
.kvdb-org-block,
.kvdb-org-card.soft {
    border: 1px solid #e3e8f0;
    border-radius: 8px;
    padding: 15px 12px 28px;
    background: #fff;
}
.kvdb-org-card.soft {
    background: #f4f8fc;
    border-color: #f4f8fc;
}

/* ----- TIÊU ĐỀ MỤC ----- */
.kvdb-org-h {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1455a8;
    margin: 0 0 16px !important;
    line-height: 1.3 !important;
    display: flex;
    align-items: center;
    gap: 8px;
}
.kvdb-org-h .ico { color: #c8102e; }

.grp-title {
    text-align: center;
    font-weight: 700;
    color: #555;
    font-size: 16px;
    margin: 0 0 18px;
}

/* ==========================================================================
   MỤC 1 & 2: ảnh dọc, xếp lưới
   ========================================================================== */

.kvdb-people {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
}

.kvdb-person { text-align: center; }
.kvdb-person img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: fill;
    object-position: center 20%;
    border-radius: 5px;
    display: block;
    margin: 0 auto 8px;
    border: 1px solid #e3e8f0;
}
.kvdb-person .name {
    color: #1455a8;
    font-weight: 700;
    font-size: 15px;
    margin: 4px 0 2px;
}
.kvdb-person .role { color: #666; font-size: 15px; }

/* Tỉ lệ khung */
.kvdb-org-row.row-1 .kvdb-org-block:first-child { flex: 1 1 38%; }
.kvdb-org-row.row-1 .kvdb-org-block:last-child  { flex: 1 1 58%; }
.kvdb-org-row.row-2 .kvdb-org-card.soft { flex: 1 1 0; min-width: 0; }

/* MỤC 1: 3 ảnh / hàng */
.kvdb-org-row.row-1 .kvdb-org-block:first-child .kvdb-person {
    flex: 0 0 calc((100% - 2 * 24px) / 3);
    max-width: calc((100% - 2 * 24px) / 3);
}

/* MỤC 2: 5 ảnh / hàng */
.kvdb-org-row.row-1 .kvdb-org-block:last-child .kvdb-person {
    flex: 0 0 calc((100% - 4 * 16px) / 5);
    max-width: calc((100% - 4 * 16px) / 5);
}
.kvdb-org-row.row-1 .kvdb-org-block:last-child .kvdb-people { gap: 16px; }

/* ==========================================================================
   MỤC 3: dạng ngang - ảnh trái, info (tên + chức danh) 2 dòng bên phải
   ========================================================================== */

.kvdb-org-row.row-2 .kvdb-people {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
}
.kvdb-org-row.row-2 .kvdb-person {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
}

/* Ảnh (bọc trong thẻ a-lightbox), vuông bo góc nhẹ */
.kvdb-org-row.row-2 .kvdb-person a.image-lightbox {
    flex: 0 0 100px;
    width: 100px;
    height: 120px;
    display: block;
    border-radius: 6px;
    overflow: hidden;
}
.kvdb-org-row.row-2 .kvdb-person a.image-lightbox img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center 20%;
   
    border-radius: 6px;
    margin: 0;
    flex: none;
}

/* Cụm chữ xếp dọc 2 dòng */
.kvdb-org-row.row-2 .kvdb-person .info {
    flex: 1;
    min-width: 0;
}
.kvdb-org-row.row-2 .kvdb-person .name {
    margin: 0 0 4px;
    font-size: 15px;
    line-height: 1.3;
}
.kvdb-org-row.row-2 .kvdb-person .role {
    font-size: 15px;
    color: #666;
}

/* Gạch chân dưới tiêu đề card mục 3 */
.kvdb-org-row.row-2 .grp-title {
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 18px;
}
.kvdb-org-row.row-2 .grp-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background: #E5EAF1;
}



/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
    .kvdb-org-row.row-1 .kvdb-org-block:last-child .kvdb-person {
        flex: 0 0 calc((100% - 3 * 16px) / 4);
        max-width: calc((100% - 3 * 16px) / 4);
    }
}

@media (max-width: 849px) {
    .kvdb-org-row { flex-wrap: wrap; gap: 20px; }
    .kvdb-org-block,
    .kvdb-org-card.soft { flex: 1 1 100% !important; }

    .kvdb-org-row.row-1 .kvdb-org-block:first-child .kvdb-person {
        flex: 0 0 calc((100% - 2 * 20px) / 3);
        max-width: calc((100% - 2 * 20px) / 3);
    }
    .kvdb-org-row.row-1 .kvdb-org-block:last-child .kvdb-person {
        flex: 0 0 calc((100% - 3 * 16px) / 4);
        max-width: calc((100% - 3 * 16px) / 4);
    }
}

@media (max-width: 600px) {
    .kvdb-org-block,
    .kvdb-org-card.soft { padding: 16px 16px 22px; }
    .kvdb-people { gap: 14px; }
    .kvdb-org-row.row-1 .kvdb-org-block:last-child .kvdb-people { gap: 14px; }

    .kvdb-org-row.row-1 .kvdb-org-block:first-child .kvdb-person,
    .kvdb-org-row.row-1 .kvdb-org-block:last-child .kvdb-person {
        flex: 0 0 calc((100% - 2 * 14px) / 3);
        max-width: calc((100% - 2 * 14px) / 3);
    }

    .kvdb-org-h { font-size: 16px !important; }
    .kvdb-person .name { font-size: 13px; }
    .kvdb-person .role { font-size: 14px; }
}

@media (max-width: 400px) {
    .kvdb-org-row.row-1 .kvdb-org-block:first-child .kvdb-person,
    .kvdb-org-row.row-1 .kvdb-org-block:last-child .kvdb-person {
        flex: 0 0 calc((100% - 12px) / 2);
        max-width: calc((100% - 12px) / 2);
    }
    .kvdb-people,
    .kvdb-org-row.row-1 .kvdb-org-block:last-child .kvdb-people { gap: 12px; }
}



/* ===== TRANG GIỚI THIỆU CHUNG ===== */
.kvdb-intro {
    max-width: 1100px;
    margin: 0 auto;
}

/* Mỗi thẻ */
.kvdb-intro-card {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 24px;
    margin-bottom: 28px;
    background: #fff;
    border: 1px solid #eef1f6;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    transition: box-shadow .25s, transform .25s;
    color: inherit;
    text-decoration: none;
}
.kvdb-intro-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
    transform: translateY(-3px);
}

/* Cột ảnh */
.kvdb-intro-img {
    position: relative;
    flex: 0 0 42%;
    max-width: 42%;
}
.kvdb-intro-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* Nhãn ngày tháng góc trên trái */
.kvdb-date {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #fff;
    border: 1px solid #d8dee8;
    border-radius: 4px;
    padding: 8px 10px;
    text-align: center;
    font-size: 18px;
    line-height: 1.1;
    color: #0b2a5b;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.kvdb-date b {
    display: block;
    font-size: 18px;
    font-weight: 700;
}

/* Cột chữ */
.kvdb-intro-text {
    flex: 1;
}
.kvdb-intro-title {
    color: #0b2a5b !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 0 12px !important;
    line-height: 1.3 !important;
    transition: color .2s;
}
.kvdb-intro-card:hover .kvdb-intro-title {
    color: #c8102e !important;
}
.kvdb-intro-desc {
    color: #666;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .kvdb-intro-card {
        flex-direction: column;
        text-align: center;
        gap: 18px;
    }
    .kvdb-intro-img {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ==================================================
   TRANG /MEDIA - THƯ VIỆN ẢNH 4 CỘT
   Không ảnh hưởng gallery ở trang chủ
================================================== */

.kvdb-media-gallery .kvdb-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

/* Vì trang /media đã có tiêu đề THƯ VIỆN HÌNH ẢNH bên ngoài */
.kvdb-media-gallery .kvdb-gallery-head {
    display: none;
}

/* Ảnh */
.kvdb-media-gallery .kvdb-gal-item {
    width: 100%;
    overflow: hidden;
    border-radius: 5px;
}

/* Cố định tỷ lệ ảnh để 4 ô thẳng hàng giống khu video */
.kvdb-media-gallery .kvdb-gal-item img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
}

/* Tablet */
@media (max-width: 849px) {
    .kvdb-media-gallery .kvdb-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kvdb-media-gallery .kvdb-gal-item img {
        height: 200px;
    }
}

/* Mobile */
@media (max-width: 549px) {
    .kvdb-media-gallery .kvdb-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .kvdb-media-gallery .kvdb-gal-item img {
        height: 125px;
    }
}