/**
 * iDesign Mobile Enhancements & UI/UX Standardization
 * Strictly isolated for Mobile Viewports (<= 767.98px)
 * Based on docs/MOBILE_DESIGN_SPECS_AND_TOKENS.md
 */

@media screen and (max-width: 767.98px) {
  :root {
    --mb-page-gutter: 16px;
    --mb-space-1: 4px;
    --mb-space-2: 8px;
    --mb-space-3: 12px;
    --mb-space-4: 16px;
    --mb-space-6: 24px;
    --mb-space-8: 32px;
    --mb-surface-base: #FFFFFF;
    --mb-surface-dark: #111111;
    --mb-border-subtle: #EAEAEA;
    --mb-text-primary: #1A1A1A;
    --mb-text-secondary: #666666;
    --mb-brand-yellow: #FCC82D;
  }

  /* ==========================================================================
     1. GLOBAL RESET & ERADICATE ALL DIRTY GREY BACKGROUNDS
     ========================================================================== */
  html {
    overflow-x: hidden !important;
    background-color: #000000 !important;
  }

  body {
    overflow-x: hidden !important;
    background-color: #000000 !important;
    padding-top: 70px !important;
  }

  /* Toàn bộ container trang và panel chuyển về nền trắng tinh tế (#FFFFFF) */
  #panel,
  .slideout-panel,
  .main,
  .site-main,
  .page,
  .content-area,
  .entry-content,
  .grid-layout,
  .main-cate,
  .must-try,
  .nsfw,
  .main-section,
  .lastest-post,
  .featured-post,
  .box--special,
  .category-post,
  .single-post,
  .archive,
  .category,
  .search-results {
    background-color: #FFFFFF !important;
  }

  /* Khử triệt để màu xám xi măng / xám xanh (#e2e2e2, #f2f4f6, #f2f2f2) trên mọi section */
  [class*="section"],
  [class*="layout"],
  [class*="box-"] {
    background-color: #FFFFFF !important;
  }

  /* ==========================================================================
     2. MASTER UNIFIED 16PX HORIZONTAL AXIS (ĐỒNG NHẤT 100% TRỤC CẢ 2 MÉP MÀN HÌNH)
     ========================================================================== */
  /* Reset toàn bộ padding của các Section bao ngoài về 0 */
  .grid-layout,
  .main-section,
  .lastest-post,
  .nsfw,
  .must-try,
  .category-post {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* Đưa toàn bộ container về padding 16px duy nhất */
  .container,
  .container-fluid,
  .grid-layout .container,
  .main-section .container,
  .lastest-post .container,
  .nsfw .container,
  .must-try .container,
  .category-post .container {
    padding-left: var(--mb-page-gutter) !important;
    padding-right: var(--mb-page-gutter) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }

  /* Triệt tiêu triệt để padding kép của inner wrappers */
  .grid-layout__inner,
  .col-left,
  .col-right {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Triệt tiêu padding trong của mọi heading để neo chính xác theo lề 16px của container */
  .main-heading,
  .lastest-post .main-heading,
  .main-section.nsfw .main-heading,
  .must-try .head,
  .category-post .main-heading,
  .section-title,
  .title-section,
  .module-title,
  .sidetitle {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: var(--mb-space-4) !important;
  }

  /* Loạt bài (.nsfw): Nằm ngoài .container nên cần padding 16px ở thẻ bọc */
  .main-section.nsfw {
    padding-left: var(--mb-page-gutter) !important;
    padding-right: var(--mb-page-gutter) !important;
  }

  /* Khối slider Mới viết: Đệm thẳng hàng 16px */
  .lastest-post .swiper,
  .lastest-post .swiper-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Toàn bộ danh sách card bài viết căn đều theo lề 16px */
  .list-posts,
  .archive-post-list,
  .category-posts-grid,
  .must-try .list,
  .category-post .list,
  .nsfw .list {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ==========================================================================
     3. HEADER & STICKY HEADER
     ========================================================================== */
  .header, #main-header {
    height: 70px !important;
    background-color: #000000 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
  }

  #main-header .container,
  .header .container {
    padding-left: 0px !important;
    padding-right: var(--mb-page-gutter) !important;
    max-width: 100% !important;
  }

  .header__inner {
    height: 70px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    position: relative !important;
  }

  /* Logo Initial State: Flush Left (Sát mép trái 0px), Nền vàng #FCC82D, Họa tiết đen */
  .header .logo {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 75px !important;
    height: 70px !important;
    background-color: #FCC82D !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 300ms ease, color 300ms ease !important;
    z-index: 1001 !important;
  }

  .header .logo svg {
    color: #000000 !important;
    fill: #000000 !important;
    transition: color 300ms ease, fill 300ms ease !important;
  }

  /* Logo When Scrolled Down: Nền đen #000000, Họa tiết SVG bên trong màu trắng #FFFFFF */
  .header.scroll-down .logo {
    background-color: #000000 !important;
  }

  .header.scroll-down .logo svg {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
  }

  .hambuger, #btn-search-trigger {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ==========================================================================
     4. HERO BANNER POLISH
     ========================================================================== */
  .banner--home .banner__image_mb {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .banner--home .item::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 65% !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .banner--home .banner__caption {
    position: absolute !important;
    bottom: var(--mb-page-gutter) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 3 !important;
    padding: 0 var(--mb-page-gutter) !important;
  }

  .banner--home .banner__title a {
    color: #FFFFFF !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .banner--home .banner__note {
    color: var(--mb-brand-yellow) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin-bottom: var(--mb-space-1) !important;
    z-index: 3 !important;
    position: relative !important;
  }

  .banner--home .banner__note a {
    color: var(--mb-brand-yellow) !important;
  }

  /* ==========================================================================
     5. SECTIONS CLEANUP & HARMONIC SPACING
     ========================================================================== */
  /* Mới viết */
  .lastest-post {
    padding-top: var(--mb-space-6) !important;
    padding-bottom: var(--mb-space-6) !important;
    border-bottom: 1px solid var(--mb-border-subtle) !important;
  }

  .lastest-post .item,
  .lastest-post .swiper-slide {
    background-color: #FFFFFF !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  .lastest-post .item__image {
    background-color: #F8F8F8 !important;
    border: 1px solid #EEEEEE !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }

  .lastest-post .item__caption {
    background-color: #FFFFFF !important;
    padding: 12px 4px 4px !important;
  }

  .lastest-post .swiper-pagination-bullet {
    background: #CCCCCC !important;
    opacity: 0.6 !important;
  }

  .lastest-post .swiper-pagination-bullet-active {
    background: var(--mb-brand-yellow) !important;
    opacity: 1 !important;
    width: 18px !important;
    border-radius: 4px !important;
  }

  /* Loạt bài (.nsfw), Must-try, Category-post (Thiết kế, Nghệ thuật, Sáng tạo) */
  .main-section.nsfw,
  .must-try,
  .category-post {
    padding-top: var(--mb-space-8) !important;
    padding-bottom: var(--mb-space-8) !important;
    margin-top: 0 !important;
    border-bottom: 1px solid var(--mb-border-subtle) !important;
  }

  /* Category-post: Danh sách bài viết dạng hàng ngang phẳng, phân cách bằng border-bottom nhẹ */
  .category-post .item {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--mb-border-subtle) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    padding: 14px 0 !important;
  }

  .category-post .item:last-child {
    border-bottom: none !important;
  }

  .category-post .item__image {
    background-color: transparent !important;
    border: none !important;
    border-radius: 4px !important;
  }

  .main-section.nsfw .item,
  .must-try .item {
    background-color: #FFFFFF !important;
    border-radius: 8px !important;
    margin-bottom: var(--mb-space-5) !important;
    overflow: hidden !important;
    border: 1px solid var(--mb-border-subtle) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
  }

  .main-section.nsfw .item__image,
  .must-try .item__image {
    background-color: #F8F8F8 !important;
  }

  .main-section.nsfw .item__caption,
  .must-try .item__caption {
    background-color: #FFFFFF !important;
    padding: 14px 16px 16px !important;
  }

  /* ==========================================================================
     6. CARD & LIST POSTS 1-COL
     ========================================================================== */
  .archive-post-list .col-6,
  .category-posts-grid .col-6,
  .list-posts .col-6,
  .box--special .col-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: var(--mb-space-4) !important;
  }

  /* ==========================================================================
     7. BUTTON "XEM THÊM"
     ========================================================================== */
  .btn-see-more, .btn-view-more, a.view-more, .load-more-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: var(--mb-space-6) auto !important;
    width: calc(100% - 32px) !important;
    max-width: 320px !important;
    height: 44px !important;
    border-radius: 4px !important;
    background-color: var(--mb-brand-yellow) !important;
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    border: none !important;
    letter-spacing: 0.5px !important;
  }

  /* ==========================================================================
     8. CATEGORY & ARCHIVE HEADERS
     ========================================================================== */
  .category-header, .archive-header {
    background-color: var(--mb-surface-dark) !important;
    padding: var(--mb-space-6) var(--mb-page-gutter) !important;
  }

  /* ==========================================================================
     9. SINGLE POST RHYTHM & TYPOGRAPHY
     ========================================================================== */
  .single-post h1.entry-title, .single-post .post-title {
    font-size: 24px !important;
    line-height: 1.4 !important;
    margin-bottom: var(--mb-space-3) !important;
    padding-left: var(--mb-page-gutter) !important;
    padding-right: var(--mb-page-gutter) !important;
  }

  .single-post .post-meta {
    display: flex !important;
    align-items: center !important;
    gap: var(--mb-space-2) !important;
    font-size: 13px !important;
    color: var(--mb-text-secondary) !important;
    margin-bottom: var(--mb-space-5) !important;
    padding-left: var(--mb-page-gutter) !important;
    padding-right: var(--mb-page-gutter) !important;
  }

  .single-post .entry-content {
    padding-left: var(--mb-page-gutter) !important;
    padding-right: var(--mb-page-gutter) !important;
  }

  /* ==========================================================================
     10. PHASE 2 INTERACTIVE ENHANCEMENTS
     ========================================================================== */
  /* Floating Action Button Transition */
  .banner__action {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
  }

  .banner__action.fab-hidden {
    transform: translateY(100px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Faceted Search Filter Accordion Style */
  .idesign-facet-sidebar {
    border: 1px solid var(--mb-border-subtle) !important;
    border-radius: 8px !important;
    background: #FAFAFA !important;
    padding: var(--mb-space-4) !important;
    margin-bottom: var(--mb-space-6) !important;
  }

  .idesign-facet-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: var(--mb-space-2) !important;
  }

  .idesign-facet-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--mb-brand-yellow) !important;
    color: #000000 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    border: none !important;
    cursor: pointer !important;
  }

  .idesign-facet-toggle-btn svg {
    transition: transform 0.25s ease !important;
  }

  .idesign-facet-sidebar:not(.is-collapsed-mobile) .idesign-facet-toggle-btn svg {
    transform: rotate(180deg) !important;
  }

  /* When collapsed: hide all groups and filter options */
  .idesign-facet-sidebar.is-collapsed-mobile .idesign-facet-group,
  .idesign-facet-sidebar.is-collapsed-mobile .idesign-active-filters,
  .idesign-facet-sidebar.is-collapsed-mobile #idesign-facet-reset-all {
    display: none !important;
  }

  /* Thumbnail placeholders */
  .item__image,
  .featured-post .item__image {
    background-color: #F8F8F8 !important;
    border: 1px solid #EEEEEE !important;
  }

  /* ==========================================================================
     CLEAN BORDERLESS DESIGN & LOẠT BÀI ITEM GAPS (ANTI-OVERLAPPING BORDERS)
     ========================================================================== */
  /* 1. Loạt bài: Giãn cách 24px giữa các item, bo tròn ảnh nhẹ nhàng */
  .main-section.nsfw .swiper-slide,
  .main-section.nsfw .item {
    margin-bottom: var(--mb-space-6) !important;
  }

  .main-section.nsfw .item__caption {
    padding: 14px 16px 16px !important;
  }

  .main-section.nsfw .item__image {
    border-radius: 6px !important;
    overflow: hidden !important;
  }

  /* Bo góc ảnh nhẹ cho toàn bộ thumbnail */
  .item__image {
    border-radius: 6px !important;
    overflow: hidden !important;
  }

  /* ==========================================================================
     MOBILE CARD CATEGORY BADGE OVERLAY ON THUMBNAIL (REFINED & MINIMAL)
     ========================================================================== */
  .lastest-post .item,
  .post-item,
  .post-item.item,
  .must-try .item,
  .archive-post-list .item,
  .category-posts-grid .item {
    position: relative !important;
  }

  /* Định vị badge luôn bám sát lề ảnh thumbnail (top: 10px, left: 10px) */
  .lastest-post .item__note,
  .post-item .item__note,
  .must-try .item__note:first-of-type {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Khắc phục lỗi lệch lề trên trang Tag/Category do Bootstrap col gutter */
  .post-item[class*="col-"] .item__note,
  .col-lg-4.post-item .item__note {
    left: calc(var(--bs-gutter-x, 1.5rem) * 0.5 + 10px) !important;
    top: 10px !important;
  }

  /* Chỉ hiển thị duy nhất 1 badge chuyên mục đầu tiên, ẩn hoàn toàn các chuyên mục phụ & dấu gạch */
  .lastest-post .item__note a.item__link ~ a.item__link,
  .post-item .item__note a.item__link ~ a.item__link,
  .must-try .item__note:first-of-type li ~ li,
  .must-try .item__note:first-of-type span,
  .lastest-post .item__note span,
  .post-item .item__note span {
    display: none !important;
  }

  /* Thiết kế Badge tinh tế, thanh thoát theo chuẩn Editorial cao cấp (Apple / Linear) */
  .lastest-post .item__note a.item__link:first-child,
  .post-item .item__note a.item__link:first-child,
  .must-try .item__note:first-of-type li:first-child a {
    display: inline-flex !important;
    align-items: center !important;
    height: 22px !important;
    padding: 0 9px !important;
    background: rgba(18, 18, 18, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #FFFFFF !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12) !important;
    text-decoration: none !important;
    line-height: 1 !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
  }

  /* Điểm xuyết 1 chấm vàng nhỏ tinh tế đại diện cho iDesign brand */
  .lastest-post .item__note a.item__link:first-child::before,
  .post-item .item__note a.item__link:first-child::before,
  .must-try .item__note:first-of-type li:first-child a::before {
    content: '' !important;
    display: inline-block !important;
    width: 5px !important;
    height: 5px !important;
    background-color: var(--mb-brand-yellow) !important;
    border-radius: 50% !important;
    margin-right: 5px !important;
  }

  /* Reset UL trong must-try item__note */
  .must-try .item__note:first-of-type {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .must-try .item__note:first-of-type li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ==========================================================================
     UNIFIED READ TIME STYLE (ĐỒNG NHẤT STYLE SỐ PHÚT ĐỌC THEO CHUẨN LOẠT BÀI)
     ========================================================================== */
  /* Loạt bài mẫu chuẩn: font-size: 13px, line-height: 16px, color: #1A1A1A, margin-top: 6px */
  .item__note:last-child,
  .must-try .item__note:last-child,
  .lastest-post .item__note:last-child,
  .post-item .item__note:last-child,
  .nsfw .item__note,
  .category-post .item__note:last-child {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #444444 !important;
    font-weight: 500 !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: block !important;
    position: static !important;
  }

  .item__note:last-child li,
  .must-try .item__note:last-child li,
  .lastest-post .item__note:last-child li,
  .post-item .item__note:last-child li,
  .nsfw .item__note li,
  .category-post .item__note:last-child li {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #444444 !important;
    font-weight: 500 !important;
    display: inline-block !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ==========================================================================
     ẨN HOÀN TOÀN BADGE CHUYÊN MỤC TRÊN TRANG CHUYÊN MỤC (CATEGORY ARCHIVE)
     (Vì tiêu đề trang đã là chuyên mục, hiển thị thêm ở card sẽ bị trùng lặp dư thừa)
     ========================================================================== */
  body.category .item__note,
  body.category .post-item .item__note,
  .category-header ~ * .item__note,
  .archive.category .item__note {
    display: none !important;
  }

  /* ==========================================================================
     CATEGORY HERO / FEATURED BIG TOP POLISH (EDITORIAL ARTISTIC & BALANCED)
     Khắc phục lỗi padding lệch 90px/30px của theme cũ, căn đều 24px, căn giữa nghệ thuật
     ========================================================================== */
  .main-cate,
  .main-cate-big {
    background-color: #0A0A0A !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .main-cate .big {
    padding: 48px 24px !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Lớp phủ chuyển sắc điện ảnh mềm mại */
  .main-cate .big::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: radial-gradient(circle at center, rgba(15, 15, 15, 0.75) 0%, rgba(5, 5, 5, 0.92) 100%) !important;
    z-index: -1 !important;
  }

  .main-cate .big a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
    text-decoration: none !important;
  }

  /* Tiêu đề Chuyên mục mang tính chất nghệ thuật (Editorial Typography) */
  .main-cate .big h3 {
    font-family: 'Lora', 'Playfair Display', serif, system-ui !important;
    font-size: 22px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    text-align: center !important;
    letter-spacing: 0.3px !important;
    margin: 0 auto 16px auto !important;
    padding: 0 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    width: 100% !important;
  }

  /* Điểm xuyết 1 đường kẻ line vàng nhận diện thương hiệu ngắn ở giữa */
  .main-cate .big h3::after {
    content: '' !important;
    display: block !important;
    width: 32px !important;
    height: 2px !important;
    background-color: var(--mb-brand-yellow) !important;
    margin: 14px auto 0 auto !important;
    border-radius: 2px !important;
  }

  /* Đoạn mô tả mềm mại, căn đều 2 mép, dễ chịu với mắt đọc */
  .main-cate .big p {
    font-family: system-ui, -apple-system, sans-serif !important;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    text-align: center !important;
    font-weight: 400 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    max-width: 340px !important;
  }

  /* ==========================================================================
     EDITORIAL ARTISTIC SINGLE POST HEADER (ĐỒNG NHẤT TRỤC DỌC & NGHỆ THUẬT)
     Khắc phục lỗi lộn xộn, căn chỉnh trục 16px chuẩn, typography Serif tinh tế
     ========================================================================== */

  body.single .post--detail,
  body.single-post .post--detail,
  body.single .container-fluid,
  body.single-post .container-fluid,
  .post--detail .container-fluid.px-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }

  .post--detail {
    padding-top: var(--mb-space-6) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .post--detail .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .post--detail .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .post--detail .col-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 1. Khu vực Heading: Căn đều 16px hai bên */
  .post__heading {
    padding-left: var(--mb-page-gutter) !important;
    padding-right: var(--mb-page-gutter) !important;
    margin-bottom: var(--mb-space-3) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* Meta Date & Category: Thanh lịch, tinh tế */
  .post__heading ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #666666 !important;
    letter-spacing: 0.3px !important;
  }

  .post__heading ul li {
    display: inline-flex !important;
    align-items: center !important;
  }

  .post__heading .post__meta-date {
    color: #888888 !important;
    font-weight: 500 !important;
  }

  .post__heading ul a.item__link {
    color: #1A1A1A !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
  }

  .post__heading ul a.item__link:hover {
    color: var(--mb-brand-yellow) !important;
  }

  /* Ẩn bớt các chuyên mục phụ để hàng meta tinh gọn trên mobile */
  .post__heading ul li:nth-child(n+3) {
    display: none !important;
  }

  /* Cụm Share Button nhỏ nhắn, xếp ngay ngắn */
  .post__heading .share-social {
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
  }

  .post__heading .share-social a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background-color: #F5F5F5 !important;
    color: #333333 !important;
    margin-right: 6px !important;
    transition: background-color 0.2s ease !important;
  }

  /* 2. Tiêu đề H1: Chuẩn mực tạp chí nghệ thuật (Editorial Typography) */
  .post__title {
    font-family: 'Lora', 'Playfair Display', serif, system-ui !important;
    font-size: 24px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    color: #111111 !important;
    padding-left: var(--mb-page-gutter) !important;
    padding-right: var(--mb-page-gutter) !important;
    margin-top: var(--mb-space-3) !important;
    margin-bottom: var(--mb-space-4) !important;
    letter-spacing: -0.2px !important;
  }

  /* 3. Khối Tác giả & Số phút đọc: Gom cụm thẳng hàng, không phân tán */
  .post__author {
    padding-left: var(--mb-page-gutter) !important;
    padding-right: var(--mb-page-gutter) !important;
    margin-bottom: var(--mb-space-5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid var(--mb-border-subtle) !important;
    padding-bottom: 16px !important;
  }

  .post__author__inner {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .post__author__inner img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
  }

  .post__author__name a {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #222222 !important;
    text-decoration: none !important;
  }

  .post__min {
    font-size: 12.5px !important;
    color: #777777 !important;
    font-weight: 500 !important;
  }

  /* ==========================================================================
     MAGAZINE EDITORIAL CENTERED POST HEADER (ĐỒNG NHẤT 1 TRỤC GIỮA NGHỆ THUẬT)
     ========================================================================== */
  .post--detail {
    padding-top: var(--mb-space-6) !important;
  }

  /* 1. Meta (Ngày đăng + Chuyên mục): Căn giữa, typography thanh mảnh */
  .post__heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto 16px auto !important;
    padding: 0 var(--mb-page-gutter) !important;
    width: 100% !important;
  }

  .post__heading ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    color: #777777 !important;
    text-align: center !important;
  }

  /* Ẩn dấu gạch nối ngang giữa ngày và chuyên mục khi xếp tầng dọc */
  .post__heading ul li .mx-1,
  .post__heading ul li .mx-2 {
    display: none !important;
  }

  /* Dòng 1: Ngày tháng xuất bản */
  .post__heading ul li:first-child {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    order: 1 !important;
  }

  .post__heading ul .post__meta-date,
  .post__heading ul .updated {
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
  }

  /* Dòng 2: Chuyên mục (nằm ngay dưới ngày tháng) */
  .post__heading ul li:not(:first-child) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    order: 2 !important;
    margin-top: 2px !important;
  }

  .post__heading ul a.item__link {
    color: #111111 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.8px !important;
    text-decoration: none !important;
  }

  /* Share icons căn giữa, pill bo tròn cân đối */
  .post__heading .post__share {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 10px auto 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
    gap: 8px !important;
  }

  .post__heading .post__share li {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .post__heading .post__share a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background-color: #F5F5F5 !important;
    color: #444444 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
  }

  .post__heading .post__share .icon {
    display: block !important;
  }

  .post__heading .post__share .icon--facebook {
    width: 7px !important;
    height: 14px !important;
  }

  .post__heading .post__share .icon--share {
    width: 12px !important;
    height: 12px !important;
  }

  /* 2. Tiêu đề H1: Căn giữa nghệ thuật, font Serif Lora cao cấp */
  .post__title {
    font-family: 'Lora', 'Playfair Display', serif, system-ui !important;
    font-size: 24px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
    color: #111111 !important;
    text-align: center !important;
    margin: 12px auto 20px auto !important;
    padding: 0 var(--mb-page-gutter) !important;
    max-width: 360px !important;
    letter-spacing: -0.2px !important;
  }

  /* 3. Cụm Tác giả & Số phút đọc: Căn giữa thẳng trục với Tiêu đề và Meta */
  .post__author {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto 24px auto !important;
    padding: 0 var(--mb-page-gutter) 18px var(--mb-page-gutter) !important;
    border-bottom: 1px solid var(--mb-border-subtle) !important;
    width: 100% !important;
    gap: 6px !important;
  }

  .post__author__inner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .post__author__inner img {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
  }

  .post__author__name a {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #222222 !important;
    text-decoration: none !important;
  }

  .post__min {
    font-size: 12px !important;
    color: #888888 !important;
    font-weight: 500 !important;
    margin-top: 2px !important;
  }

  /* ==========================================================================
     10. DARK THEME OVERRIDES FOR MOBILE
     Override light mode background/color resets in dark mode
     ========================================================================== */
  body.dark-theme,
  body.dark-theme #panel,
  body.dark-theme .slideout-panel,
  body.dark-theme .main,
  body.dark-theme .site-main,
  body.dark-theme .page,
  body.dark-theme .content-area,
  body.dark-theme .entry-content,
  body.dark-theme .grid-layout,
  body.dark-theme .main-cate,
  body.dark-theme .must-try,
  body.dark-theme .nsfw,
  body.dark-theme .main-section,
  body.dark-theme .lastest-post,
  body.dark-theme .featured-post,
  body.dark-theme .box--special,
  body.dark-theme .category-post,
  body.dark-theme .single-post,
  body.dark-theme .archive,
  body.dark-theme .category,
  body.dark-theme .search-results,
  body.dark-theme [class*="section"],
  body.dark-theme [class*="layout"],
  body.dark-theme [class*="box-"] {
    background-color: #000000 !important;
  }

  /* 10.1. CARD & BOX BACKGROUNDS TRONG DARKMODE */
  body.dark-theme .must-try .item,
  body.dark-theme .must-try .swiper-slide,
  body.dark-theme .archive-post-list .item,
  body.dark-theme .category-posts-grid .item,
  body.dark-theme .list-posts .item {
    background-color: #121214 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  }

  /* Mới viết (.lastest-post): Thiết kế phẳng hoàn toàn, không viền đè hộp */
  body.dark-theme .lastest-post .item,
  body.dark-theme .lastest-post .swiper-slide,
  body.dark-theme .lastest-post .item__caption {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  body.dark-theme .lastest-post .item__image {
    border-radius: 6px !important;
    overflow: hidden !important;
    border: none !important;
  }

  body.dark-theme .lastest-post .item__caption {
    padding: 10px 0 0 0 !important;
  }

  /* Loạt bài (.nsfw): Giữ thiết kế phẳng, không viền đè hộp, padding thoáng đãng */
  body.dark-theme .main-section.nsfw .item,
  body.dark-theme .main-section.nsfw .swiper-slide,
  body.dark-theme .main-section.nsfw .item .img-wr,
  body.dark-theme .main-section.nsfw .item__image,
  body.dark-theme .main-section.nsfw .item__caption {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  body.dark-theme .main-section.nsfw .item__title {
    padding: 14px 0 0 0 !important;
    margin: 0 !important;
  }

  /* Category post: Card phẳng tinh tế, không border đè */
  body.dark-theme .category-post .item,
  body.dark-theme .category-post .swiper-slide {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  body.dark-theme .category-post .item__caption {
    background-color: transparent !important;
    border: none !important;
    padding: 8px 0 !important;
  }

  body.dark-theme .category-post .item__image {
    border-radius: 6px !important;
    overflow: hidden !important;
    border: none !important;
  }

  /* Caption và Info trong card */
  body.dark-theme .lastest-post .item__caption,
  body.dark-theme .must-try .item__caption,
  body.dark-theme .must-try .item__info {
    background-color: transparent !important;
    border: none !important;
  }

  /* Thumbnail wrapper */
  body.dark-theme .item__image,
  body.dark-theme .featured-post .item__image,
  body.dark-theme .lastest-post .item__image,
  body.dark-theme .main-section.nsfw .item__image,
  body.dark-theme .must-try .item__image,
  body.dark-theme .category-post .item__image {
    background-color: #18181B !important;
    border: none !important;
  }

  /* 10.2. TYPOGRAPHY TRONG DARKMODE */
  body.dark-theme .post__heading ul a.item__link {
    color: #FCC82D !important;
  }

  body.dark-theme .post__heading ul li {
    color: rgba(255, 255, 255, 0.4) !important;
  }

  body.dark-theme .post__heading ul .post__meta-date,
  body.dark-theme .post__heading ul .updated {
    color: rgba(255, 255, 255, 0.75) !important;
  }

  body.dark-theme .post__heading .post__share a {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  body.dark-theme .post__heading .post__share .icon {
    color: rgba(255, 255, 255, 0.85) !important;
    fill: rgba(255, 255, 255, 0.85) !important;
  }

  body.dark-theme .item__title,
  body.dark-theme .item__title a,
  body.dark-theme .item__desc,
  body.dark-theme .main-heading,
  body.dark-theme .post__title,
  body.dark-theme .post__heading,
  body.dark-theme .editor,
  body.dark-theme .editor p,
  body.dark-theme .editor strong {
    color: #FFFFFF !important;
  }

  body.dark-theme .post__author__name a {
    color: #FFFFFF !important;
  }

  body.dark-theme .post__min,
  body.dark-theme .item__note {
    color: #AAAAAA !important;
  }

  /* 10.3. ĐƯỜNG PHÂN CÁCH SECTION TINH TẾ (REFINED SUBTLE BORDERS) */
  body.dark-theme .lastest-post,
  body.dark-theme .main-section.nsfw,
  body.dark-theme .must-try,
  body.dark-theme .category-post {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  /* 10.4. NO-IMAGE PLACEHOLDER DARK THEME INVERT */
  body.dark-theme img[src*="idesign-no-img"] {
    filter: invert(0.92) hue-rotate(180deg) brightness(0.9) !important;
    background-color: #18181A !important;
  }
}