/*
 * Ghi đè main.css / responsive.css của theme cũ.
 *
 * QUAN TRỌNG: file này phải được nạp SAU main.css và responsive.css.
 * grid-shim.css thì ngược lại — nó cấp lưới nền nên phải nạp TRƯỚC. Nhiều quy
 * tắc ở đây có cùng độ ưu tiên với main.css, nên thứ tự nạp là thứ quyết định.
 */

/* ------------------------------------------------ Banner đầu trang
   main.css ép `height: 350px` cứng, đệm `150px 0 30px`, và đặt khối tiêu đề ở
   `top: 73%`. Tiêu đề chỉ cao 45px nên dư ra hơn 100px trống và lệch hẳn xuống. */
#breadcrumb-wrapper.breadcrumb-w-img {
    height: auto;
    min-height: 260px;
    padding: 56px 0;
    position: relative;
}

#breadcrumb-wrapper.breadcrumb-w-img .breadcrumb-content {
    top: 50%;
    left: 50%;
    bottom: auto;
    width: 100%;
    transform: translate(-50%, -50%);
}

@media (max-width: 849px) {
    #breadcrumb-wrapper.breadcrumb-w-img {
        min-height: 180px;
        padding: 40px 0;
        /* background-attachment: fixed không chạy ổn trên thiết bị cảm ứng. */
        background-attachment: scroll;
    }
}

/* ==================================================================== LOGO
   Theme ghim `.dragon-logo img { height: 56px }`. Logo Vương Gia là khối dọc
   (biểu tượng trên, chữ dưới) nên ở 56px trông rất nhỏ. Nâng chiều cao và cho
   thanh header giãn theo. */
.dragon-bar .dragon-logo img,
.dragon-logo img {
    height: 66px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.dragon-offcanvas .dragon-logo img {
    height: 52px;
}

@media (max-width: 849px) {
    .dragon-bar .dragon-logo img,
    .dragon-logo img { height: 50px; }
}

/* Chân trang dùng logo trên nền nâu đậm — logo có nền trắng nên bo góc và đệm
   nhẹ để không thành một mảng trắng cắt ngang. */
.dragon-footer__brand img {
    background: #fff;
    padding: 10px 14px;
    border-radius: 4px;
    height: auto;
    max-width: 210px;
    width: auto;
}

/* ============================================ THỐNG NHẤT TIÊU ĐỀ TOÀN SITE

   Gốc rễ: main.css của theme cũ có một dòng TOÀN CỤC
       h1,h2,h3,h4,h5,h6 { font-family: Lexend !important }
   Nó đè font lên MỌI tiêu đề của MỌI trang — kể cả những trang do theme mới
   dựng và không liên quan gì tới nội dung cũ. Vì có !important nên chỉ có thể
   hoá giải bằng một quy tắc cùng độ ưu tiên, cũng !important, và nạp sau. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--dragon-font, "Be Vietnam Pro", sans-serif) !important;
}

/* Theme mới dùng ba khối tiêu đề khác nhau cho ba loại trang, mỗi khối một cỡ:
   trang tin tức 48px, trang đơn 38,4px, banner trang cũ 34px. Kéo cả ba về cùng
   một thang để đi giữa các trang không thấy chữ to nhỏ nhảy loạn. */
.vs-blog-hero .vs-blog-hero__title,
.vs-single__hero .vs-single__title,
.vs-single__title {
    font-size: clamp(22px, 2.5vw, 34px);
    line-height: 1.25;
    letter-spacing: .05em;
    text-transform: uppercase;
}


   main.css của theme cũ đặt mọi tiêu đề bằng font Lexend, trong khi theme mới
   dùng Be Vietnam Pro cho phần còn lại — hai trang cạnh nhau trông như hai site.
   Đưa tất cả về một font, một thang cỡ chữ, một độ đậm. */
#breadcrumb-wrapper .breadcrumb-big h1,
#breadcrumb-wrapper .breadcrumb-big h2,
.blog-title h1,
.blog-title h2,
.blog-title h3,
.home-title h3,
.project .project-content h3,
.post-item h3,
.post-item h4 {
    font-family: var(--dragon-font, "Be Vietnam Pro", sans-serif) !important;
}

/* Cấp 1 — tiêu đề trang trên banner. Cùng thang cỡ với tiêu đề mục ở trang chủ.
   Phải dùng đúng chuỗi selector dài của main.css (ID + 4 class + thẻ), nếu ngắn
   hơn thì độ ưu tiên thấp hơn và cỡ chữ 32px của nó vẫn thắng. */
#breadcrumb-wrapper.breadcrumb-w-img .breadcrumb-content .breadcrumb-big h1,
#breadcrumb-wrapper.breadcrumb-w-img .breadcrumb-content .breadcrumb-big h2 {
    font-size: clamp(22px, 2.5vw, 34px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}

/* Cấp 2 — tiêu đề mục bên trong trang, ví dụ "Tìm kiếm dự án". */
.blog-title h1,
.blog-title h2,
.blog-title h3 {
    font-size: clamp(17px, 1.4vw, 21px);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dragon-primary, #4a2c17);
}

/* Cấp 3 — tên dự án / tên bài trên thẻ. main.css để độ đậm 400 nên nhìn nhạt
   hơn hẳn so với thẻ ở trang chủ. */
.project .project-content h3 {
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
}

.post-item h3,
.post-item h4 {
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
}

/* ------------------------------------------------ Cột sidebar bỏ trống
   Trang danh mục dự án dành sẵn một cột cho vùng widget "project-sidebar".
   Cấu hình widget lưu riêng theo từng theme nên sau khi đổi theme nó rỗng —
   cột vẫn chiếm 1/4 bề ngang và vài trăm pixel chiều cao.
   Ẩn cột rỗng, trả bề ngang cho nội dung. Thêm widget vào là tự hiện lại. */
#category-page .row > .col:not(:has(*)) {
    display: none;
}

#category-page .row > .col:not(:has(*)) + .col {
    width: 100%;
}