@charset "UTF-8";

/**
 * Template Name: c10mt
 * Template URL: https://c10mt.com
 * Version: 0.0.1
 * Update: 25-Dec-2025
 * Author: Nguyễn Thanh Tâm
 * Description: C10 Modern Techniques (c10mt.com)
 * Logical order: VARIABLES → RESET → TYPOGRAPHY → LAYOUT → GLOBAL COMPONENTS → ENTRY CONTENT → C10MT COMPONENTS → PAGE OVERRIDES → UTILITIES → ADSENSE & STRUCTURED DATA → ACCESSIBILITY → PERFORMANCE → PRINT
 */

/* ==================
 * TABLE OF CONTENTS
 * ==================
 * 1. VARIABLES & SETTINGS
 * 2. RESET & NORMALIZATION
 * 3. TYPOGRAPHY & BASE ELEMENTS
 * 4. LAYOUT & GRID SYSTEM
 * 5. GLOBAL COMPONENTS
 * 5.1. Header & Navigation
 * 5.2. Hero Section
 * 5.3. Entry / Article Content Elements
 * 5.4. Author Info Box (Single Post)
 * 5.5. Breadcrumbs
 * 5.6. Footer
 * 5.7. Cookie Consent Banner
 * 5.8. Pagination
 * 6. C10MT-SPECIFIC COMPONENTS
 * 6.1. Parts List (Affiliate)
 * 6.2. How‑To Step Blocks & TOC
 * 6.3. Project Gallery / Before‑After
 * 6.4. Tools & Workshop Cards
 * 6.5. Affiliate CTA / Sticky Bar
 * 6.6. Ad Slot Placeholders
 * 6.7. Category Portal
 * 6.8. Post Grid & Cards
 * 6.9. Technicak Data Tables (Single Post)
 * 6.10. Technical References Section
 * 6.11. Alert Box & Callout Boxes
 * 6.12. Hero Article Image Override
 * 7. PAGE-SPECIFIC STYLES & OVERRIDES
 * 7.1. Homepage / Hero Variants
 * 7.2. Single Post / How‑To Layout
 * 7.3. Category Archive / Listing
 * 7.4. Search Results Page
 * 7.5. About Us / Team Page
 * 7.6. Contact Page
 * 7.7. FAQ Page
 * 7.8. Advertise Page
 * 7.9. Legal & Policy Pages (Privacy, TOS)
 * 7.10. 404 Error Page
 * 7.11. Roadmap / Project Series Pages
 * 7.12. Authors List Page
 * 7.13. Individual Author Profile
 * 8. UTILITIES & HELPER CLASSES
 * 9. ADSENSE & STRUCTURED DATA HELPERS
 * 10. ACCESSIBILITY HELPERS
 * 11. PERFORMANCE OVERRIDES (LCP CRITICAL)
 * 12. PRINT STYLES
 * ================= */

/* 1. VARIABLES & SETTINGS */
:root{
  /* Colors */
  --color-primary: #102039;
  --color-primary-rgb: 16,32,57;
  --color-primary-dark: #0056b3;
  --color-primary-light: #3395ff;
  --color-accent: #0d6efd;
  --color-accent-dark: #0b5ed7;
  --color-accent-rgb: 13,110,253;
  --color-progressive: #1B2D80;
  --color-white: #ffffff;
  --color-white-rgb: 255,255,255;
  --color-black: #000000;
  --color-black-rgb: 0,0,0;
  --color-dark: #1a1a1a;
  --color-dark-rgb: 26,26,26;
  --color-light: #f8f9fa;
  --color-grey: #596167;
  --color-grey-light: #868e96;
  --color-grey-lighter: #dee2e6;
  --color-grey-dark: #343a40;
  --color-text: #212529;
  --color-text-muted: rgba(0,0,0,0.65);
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-dark);
  --color-heading: var(--color-dark);
  --color-background: var(--color-white);
  --color-background-alt: var(--color-light);
  --color-border: var(--color-grey-lighter);
  --color-surface: var(--color-white);

  /* Header */
  --header-height-desktop: 70px;
  --header-height-mobile: 60px;
  --header-background: var(--color-primary);
  --header-background-scrolled: rgba(var(--color-primary-rgb),0.95);
  --header-shadow-scrolled: 0 2px 10px rgba(0,0,0,0.1);

  /* Typography */
  --font-family-base: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-family-heading: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-size-base: clamp(20px,1.8vw + 0.2rem,22px);
  --font-size-sm: clamp(13px,1.4vw,14px);
  --font-size-lg: clamp(18px,2vw,20px);
  --font-size-nav: clamp(16px,1.5vw,15px);
  --font-size-nav-mobile: clamp(16px,1.8vw,16px);
  --line-height-base: 1.7;
  --line-height-heading: 1.3;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 3rem;

  /* Radius / border */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.75rem;
  --border-width: 1px;

  /* Shadows */
  --box-shadow-sm: 0 0.125rem 0.25rem rgba(var(--color-dark-rgb),0.075);
  --box-shadow-md: 0 0.5rem 1rem rgba(var(--color-dark-rgb),0.1);
  --box-shadow-lg: 0 1rem 3rem rgba(var(--color-dark-rgb),0.125);
  --box-shadow-focus: 0 0 0 0.25rem rgba(var(--color-primary-rgb),0.5);

  /* Transitions */
  --transition-duration-fast: 0.15s;
  --transition-duration-base: 0.3s;
  --transition-duration-slow: 0.5s;
  --transition-timing-function: ease-in-out;
  --transition-base: all var(--transition-duration-base) var(--transition-timing-function);

  /* Layout */
  --container-max-width: 1200px;

  /* Z-index */
  --z-index-skip-link: 1081;
  --z-index-header: 1030;
  --z-index-overlay: 1035;
  --z-index-mobile-nav: 1040;
  --z-index-mobile-toggle: 1041;
  --z-index-modal-backdrop: 1050;
  --z-index-modal: 1060;
  --z-index-popover: 1070;
  --z-index-tooltip: 1080;
  --z-index-scroll-top: 1020;
}

/* 2. RESET & NORMALIZATION */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(var(--color-primary-rgb), 0.1);
  visibility: visible;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  padding-top: var(--header-height-mobile);
}

/* Desktop header offset */
@media (min-width: 1200px) {
  body { padding-top: var(--header-height-desktop); }
}

/* Images & media */
img, picture, svg, video { display: block; max-width: 100%; height: auto; }

/* Forms */
input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  border-radius: var(--border-radius-sm);
  border: var(--border-width) solid var(--color-border);
  padding: var(--space-sm) var(--space-md);
  transition: border-color var(--transition-duration-fast) var(--transition-timing-function),
              box-shadow var(--transition-duration-fast) var(--transition-timing-function);
  background-color: var(--color-white);
  color: var(--color-text);
}

input:focus, button:focus, select:focus, textarea:focus {
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: var(--box-shadow-focus);
}

input:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

/* Links */
a { color: var(--color-link); text-decoration: none; background-color: transparent; transition: var(--transition-base); }
a:hover { color: var(--color-link-hover); }
a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; box-shadow: var(--box-shadow-focus); border-radius: var(--border-radius-sm); }

/* Tables */
.table-responsive-wrapper { overflow-x: auto; margin-block: var(--space-xl); border-radius: var(--border-radius-md); box-shadow: var(--box-shadow-md); background-color: var(--color-surface); border: var(--border-width) solid var(--color-border); }
table { width: 100%; border-collapse: collapse; font-family: var(--font-family-base); color: var(--color-text); font-size: clamp(17px, 1.5vw, 18px); }
thead { background-color: var(--color-primary); color: var(--color-white); }
th, td { padding: var(--space-sm) var(--space-md); vertical-align: middle; }

/* 3. TYPOGRAPHY & BASE ELEMENTS */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  color: var(--color-heading);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

h1 { font-size: 30px; border-bottom: 1px solid var(--color-grey-light); padding-bottom: 10px; }
h2 { font-size: 25px; border-bottom: 1px solid var(--color-grey-light); padding-bottom: 10px; }
h3 { font-size: 24px; border-bottom: 1px solid var(--color-grey-light); padding-bottom: 10px; }
h4 { font-size: 23px; padding-bottom: var(--space-xs); }
h5 { font-size: 22px; padding-bottom: var(--space-xs); }
h6 { font-size: 21px; padding-bottom: var(--space-xs); }

p { margin-bottom: var(--space-md); }
p:last-child { margin-bottom: 0; }

/* Blockquote */
blockquote, .entry-content blockquote {
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
  background-color: var(--color-background-alt);
  border-left: 5px solid var(--color-primary);
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
  color: var(--color-text);
}

/* Lists */
ul, ol { margin-bottom: var(--space-md); padding-left: 1.25rem; }

/* 4. LAYOUT & GRID SYSTEM */
.container, .container-xl, .container-fluid {
  width: 100%;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  margin-left: auto;
  margin-right: auto;
}
.container { max-width: var(--container-max-width); }

.site-main { padding-top: var(--space-xxs); padding-bottom: var(--space-xl); }

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(-.5 * var(--space-md));
  margin-left: calc(-.5 * var(--space-md));
}

.row > * {
  flex-shrink: 0;
  max-width: 100%;
  padding-right: calc(.5 * var(--space-md));
  padding-left: calc(.5 * var(--space-md));
}

/* 5. GLOBAL COMPONENTS */

/* 5.1. Header & Navigation */
.header {
  height: var(--header-height-mobile);
  background-color: var(--header-background);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-index-header);
  transition: all var(--transition-duration-base);
  padding: 0;
}

.header.scrolled { 
  background-color: var(--header-background-scrolled); 
  box-shadow: var(--header-shadow-scrolled); 
}

.header .container-fluid, 
.header .container-xl { 
  height: 100%; 
  display: flex; 
  align-items: center; 
  position: relative; 
}

/* Logo & Sitename */
.header .logo { 
  display: flex; 
  align-items: center; 
  flex-shrink: 0; 
  transition: opacity var(--transition-duration-base); 
  text-decoration: none;
}

/* Xử lý ảnh logo: Áp dụng class cụ thể để tránh ảnh hưởng các ảnh khác */
.header .logo img.header-logo-img {
  /* Kích thước linh hoạt theo header nhưng không quá nhỏ */
  max-height: calc(var(--header-height-mobile) - 15px);
  width: auto;
  margin-right: var(--space-sm);
  display: block;
  /* Chuyển logo màu tối sang trắng để nổi bật trên nền xanh đen */
  filter: brightness(0) invert(1); 
  transition: all var(--transition-duration-base);
}

.header .logo:hover img.header-logo-img {
  transform: scale(1.05);
}

.header .sitename { 
  font-size: clamp(1.2rem, 2.5vw, 1.5rem); 
  font-weight: var(--font-weight-bold); 
  color: var(--color-white); 
  margin: 0; 
  white-space: nowrap; 
}

/* Desktop nav */
@media (min-width: 1200px) {
  .header { height: var(--header-height-desktop); }
  
  /* Điều chỉnh logo cho desktop to hơn một chút */
  .header .logo img.header-logo-img { 
    max-height: calc(var(--header-height-desktop) - 20px); 
  }

  .navmenu { margin-left: auto; }
  .navmenu ul { list-style: none; display: flex; align-items: center; gap: var(--space-sm); margin: 0; padding: 0; }
  .navmenu li { position: relative; }
  .navmenu a { 
    color: var(--color-white); 
    padding: var(--space-sm); 
    font-size: var(--font-size-nav); 
    font-family: var(--font-family-heading); 
    font-weight: var(--font-weight-medium); 
    text-transform: capitalize; 
    display: block; 
    border-radius: var(--border-radius-sm); 
    transition: var(--transition-base); 
  }
  
  .navmenu a::before { 
    content: ''; position: absolute; bottom: 5px; left: 50%; 
    transform: translateX(-50%); width: 0; height: 2px; 
    background-color: var(--color-white); transition: width var(--transition-duration-base); 
  }
  
  .navmenu a:hover, .navmenu a.active { 
    color: var(--color-white); 
    background-color: var(--nav-link-hover-bg, var(--color-primary-dark)); 
    transform: translateY(-2px); 
  }
  
  .navmenu a:hover::before, .navmenu a.active::before { 
    width: calc(100% - var(--space-md) * 2); 
  }
  .mobile-nav-toggle { display: none; }
}

/* Mobile nav */
@media (max-width: 1199.98px) {
  .navmenu ul {
    display: block;
    position: fixed;
    top: var(--header-height-mobile);
    right: -100%;
    width: clamp(250px, 75vw, 320px);
    height: calc(100vh - var(--header-height-mobile));
    background-color: var(--color-surface);
    border-left: var(--border-width) solid var(--color-border);
    box-shadow: -3px 0 15px rgba(var(--color-dark-rgb), 0.15);
    padding: var(--space-lg) 0;
    z-index: var(--z-index-mobile-nav);
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    pointer-events: none;
    transition: right var(--transition-duration-base), opacity var(--transition-duration-base), visibility 0s var(--transition-duration-base);
  }
  
  body.mobile-nav-active .navmenu ul {
    right: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: right var(--transition-duration-base), opacity var(--transition-duration-base), visibility 0s 0s;
  }
  
  .navmenu a { 
    color: var(--color-dark); 
    padding: var(--space-md) var(--space-lg); 
    font-size: var(--font-size-nav-mobile); 
    display: block; 
    border-bottom: var(--border-width) solid var(--color-border); 
  }
  
  .mobile-nav-toggle { 
    display: flex; background: none; border: none; 
    color: var(--color-white); font-size: 28px; width: 44px; height: 44px; 
    align-items: center; justify-content: center; cursor: pointer; 
    z-index: var(--z-index-mobile-toggle); 
  }
  
  body.mobile-nav-active::before { 
    content: ""; 
    position: fixed; 
    top: var(--header-height-mobile); 
    left: 0; right: 0; bottom: 0; 
    z-index: var(--z-index-overlay); 
    opacity: 0; /* Chỉnh về 0 để không hiện màu tối */
    visibility: hidden; /* Ẩn đi để nhìn xuyên thấu hoàn toàn */
    pointer-events: none;
  }
}

/* ===============================================
 * 5.2. HERO SECTION - REFACTORED & RESPONSIVE FIX
 * =============================================== */

/* --- 5.2.1. Main Container & Background --- */
.index-page .hero-section-container { 
    position: relative; 
    overflow: hidden; 
    background: radial-gradient(circle at 50% 50%, #1a2a44 0%, var(--color-dark) 100%);
    display: flex;
    align-items: center;
}

.index-page .hero { 
    width: 100%; 
    min-height: calc(90vh - var(--header-height-mobile)); 
    padding: var(--space-xxl) 0; 
    display: flex; 
    align-items: center; 
    color: var(--color-white); 
}

/* --- 5.2.2. Typography (Hierarchy) --- */
.index-page .hero h1 { 
    font-family: var(--font-family-heading); 
    font-weight: 800;
    font-size: clamp(2.2rem, 5vw, 3.2rem); 
    line-height: 1.1; 
    letter-spacing: -0.02em;
    color: var(--color-white); 
    margin-bottom: var(--space-md); 
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.index-page .hero p { 
    font-size: clamp(1rem, 1.8vw, 1.125rem); 
    line-height: 1.6; 
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-xl); 
    max-width: 580px;
}

/* --- 5.2.3. Search Form (Interactive) --- */
.index-page .hero-search-form {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    padding: 6px 6px 6px 25px;
    max-width: 600px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.index-page .hero-search-form:focus-within {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--color-accent);
    box-shadow: 0 15px 35px rgba(13, 110, 253, 0.3);
    transform: translateY(-2px);
}

.index-page .hero-search-form input[type="search"] {
    flex: 1;
    background: transparent !important;
    border: none !important;
    color: var(--color-white) !important;
    font-size: 1rem;
    padding: 10px 0;
    outline: none !important;
    box-shadow: none !important;
}

.index-page .hero-search-form input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.index-page .hero-search-form button {
    background: var(--color-accent);
    color: var(--color-white);
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.index-page .hero-search-form button:hover {
    background: var(--color-accent-dark);
    transform: scale(1.1);
}

/* --- 5.2.4. Visual Elements (The Car) --- */
.index-page .hero-img {
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1200px;
}

.index-page .hero-img img {
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6));
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hiệu ứng bồng bềnh mượt mà */
.index-page .hero-img .animated {
    animation: floating-car 5s ease-in-out infinite;
    will-change: transform;
}

@keyframes floating-car {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-15px) rotate(1deg); }
}

.index-page .hero-img:hover img {
    transform: scale(1.03) rotate(-1deg);
    filter: drop-shadow(0 30px 60px rgba(13, 110, 253, 0.3));
}

/* --- 5.2.5. RESPONSIVE SYSTEM (Tablet & Mobile Fix) --- */

/* A. Desktop & Large Screens (Từ 1200px trở lên) */
@media (min-width: 1200px) {
    .index-page .hero { 
        min-height: calc(100vh - var(--header-height-desktop)); 
    }
    .index-page .hero-img img {
        max-width: 550px; /* Khống chế ảnh không quá to trên màn hình lớn */
    }
}

/* B. TABLET ZONE (Từ 768px đến 1199px) - ĐÂY LÀ PHẦN FIX LỖI BẠN GẶP */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .index-page .hero {
        flex-direction: column; /* Chuyển sang dạng chồng hàng để có không gian */
        text-align: center;
        padding: var(--space-xl) 0;
        min-height: auto;
    }

    .index-page .hero-img {
        order: -1; /* Đưa ảnh lên trên chữ */
        margin-bottom: var(--space-xl);
        width: 100%;
    }

    .index-page .hero-img img {
        max-width: 500px; /* Giới hạn kích thước ảnh vuông trên Tablet để không chiếm hết trang */
        margin: 0 auto;
    }

    .index-page .hero h1 {
        font-size: 2.8rem;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .index-page .hero p {
        margin-left: auto;
        margin-right: auto;
        font-size: 1.1rem;
        max-width: 700px;
    }

    .index-page .hero-search-form {
        margin: 0 auto;
        width: 80%; /* Thu gọn thanh tìm kiếm trên tablet cho cân đối */
    }
}

/* C. MOBILE ZONE (Dưới 768px) */
@media (max-width: 767.98px) {
    .index-page .hero { 
        padding: var(--space-xl) 0 var(--space-xxl); 
        text-align: center;
        flex-direction: column;
    }

    .index-page .hero-img {
        order: -1;
        margin-bottom: var(--space-lg);
    }

    .index-page .hero-img img {
        max-width: 85%; /* Ảnh chiếm gần hết chiều ngang điện thoại */
        border-radius: 20px;
    }

    .index-page .hero-img .animated {
        animation: none; /* Tắt chuyển động để mượt mà hơn trên điện thoại */
    }

    .index-page .hero h1 {
        font-size: clamp(1.8rem, 8vw, 2.1rem);
    }

    .index-page .hero-search-form {
        margin: 0 auto;
        width: 100%;
        padding: 4px 4px 4px 18px;
    }

    .index-page .hero-search-form button {
        width: 42px;
        height: 42px;
    }
}

/* 5.3 Entry / Article Content Elements */
.entry-content { 
    font-size: var(--font-size-base); 
    line-height: var(--line-height-base); 
    color: var(--color-text); 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 1200px; 
    padding: 0 var(--space-md); 
}

.entry-content p { 
    margin-bottom: var(--space-lg); 
    text-align: left; 
    hyphens: auto; 
}

.entry-content h2, .entry-content h3, .entry-content h4 { 
    font-family: var(--font-family-heading); 
    color: var(--color-heading); 
    font-weight: var(--font-weight-medium); 
    margin-top: var(--space-xxl); 
    margin-bottom: var(--space-md); 
    scroll-margin-top: 100px; 
}

/* Ảnh đại diện Hero (Section 5.3) */
.entry-image { 
    margin-top: var(--space-lg); 
    margin-bottom: var(--space-xl); 
    text-align: center; 
}

.entry-image img { 
    display: block; 
    width: 100%; 
    max-width: 1200px; 
    height: auto; 
    aspect-ratio: 16 / 9; 
    object-fit: cover; 
    margin: 0 auto; 
    border-radius: var(--border-radius-lg); 
    box-shadow: var(--box-shadow-lg); 
}

.entry-image figcaption { 
    max-width: 800px; 
    margin: var(--space-md) auto 0; 
    font-size: 0.9rem; 
    color: #555; 
    font-style: italic; 
    line-height: 1.6; 
}

/* 5.3.1. Technical Article Figures (In-body images) */
.article-figure {
    margin: var(--space-xl) 0;
    border: 1px solid var(--color-border);
    padding: 10px;
    border-radius: 8px;
    background-color: #fafafa;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

.article-figure img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    margin: 0 auto;
    content-visibility: auto; 
}

.article-figure figcaption {
    font-style: italic;
    text-align: center;
    margin-top: 14px;
    color: #555; 
    font-size: 0.9rem;
    line-height: 1.6;
    font-family: var(--font-family-base);
    padding: 0 10px;
}

.article-figure figcaption strong {
    color: var(--color-primary);
}

/* 5.4. Author Info Box */

.author-info-box {
    margin: 30px 0;
    padding: 25px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 15px; /* Khoảng cách giữa các hàng */
}

/* Hàng 1: Tiêu đề bài viết (Merge 3 cột) */
.author-info-box .info-row-title {
    display: flex;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

/* Hàng 2 & 3: Lưới 3 cột bằng nhau để thẳng hàng biên trái */
.author-info-box .info-row-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Chia 3 phần bằng nhau tuyệt đối */
    gap: 20px;
    align-items: center;
}

.author-info-box .info-subitem {
    display: flex;
    align-items: baseline; /* Giúp chữ label và value ngang chân nhau */
    gap: 8px;
}

/* Label: In đậm, đen, không xuống dòng */
.author-info-box .info-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
}

/* Value: Chữ xám đậm, thanh mảnh hơn */
.author-info-box .info-value {
    font-size: 0.95rem;
    color: #444;
    font-weight: 400;
}

/* Badge Chuyên mục (Category) */
.author-info-box .category-meta-summary a {
    background-color: #e7f1ff;
    color: #0d6efd;
    padding: 3px 12px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.2s;
}

.author-info-box .category-meta-summary a:hover {
    background-color: #0d6efd;
    color: #fff;
}

/* --- Responsive cho Tablet & Mobile --- */

/* Tablet: Vẫn giữ 3 cột nhưng bóp hẹp gap */
@media (max-width: 1199px) {
    .author-info-box .info-row-grid { gap: 10px; }
}

/* Mobile: Xếp dọc hoàn toàn để không bị vỡ chữ */
@media (max-width: 767px) {
    .author-info-box .info-row-grid {
        grid-template-columns: 1fr; /* Chuyển về 1 cột */
        gap: 10px;
    }
    .author-info-box .info-subitem {
        justify-content: space-between; /* Đẩy label sang trái, value sang phải */
        border-bottom: 1px solid #fafafa;
        padding-bottom: 5px;
    }
}

/* 5.5 Breadcrumbs - Modern - Responsive */

.breadcrumb-meta {
    display: block;
    width: 100%;
    padding: var(--space-md) 0;
    margin-bottom: var(--space-sm);
    background-color: transparent; /* Giữ sự thanh thoát cho giao diện */
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 0.88rem; /* Nhỏ hơn text body một chút để phân cấp thông tin */
    font-weight: 500;
}

/* Các item trong breadcrumb */
.breadcrumb-item {
    display: flex;
    align-items: center;
    color: var(--color-grey-light);
}

/* Tạo dấu gạch chéo hoặc mũi tên phân cách */
.breadcrumb-item + .breadcrumb-item {
    padding-left: var(--space-xs);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›"; /* Sử dụng ký tự chevron cho cảm giác hiện đại */
    float: left;
    padding-right: var(--space-xs);
    color: var(--color-grey-light);
    font-size: 1.2rem;
    line-height: 1;
}

/* Style cho các liên kết */
.breadcrumb-item a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-duration-fast);
}

.breadcrumb-item a:hover {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Trạng thái trang hiện tại (Active) */
.breadcrumb-item.active {
    color: var(--color-grey);
    font-weight: 400;
    pointer-events: none; /* Không cho click vào trang hiện tại */
}

/* --- Tối ưu Responsive --- */
@media (max-width: 767.98px) {
    .breadcrumb-meta {
        padding: var(--space-sm) 0;
    }
    
    .breadcrumb {
        font-size: 0.8rem;
    }
    
    /* Trên mobile nếu breadcrumb quá dài sẽ tự động xuống dòng gọn gàng */
    .breadcrumb-item {
        line-height: 2;
    }
}

/* 5.6. FOOTER - FINAL SYNCED & ISOLATED STYLE */

.site-footer { 
    background-color: var(--color-dark); 
    color: var(--color-grey-light); 
    font-size: 14px; 
    padding: var(--space-xl) 0; 
    border-top: 3px solid var(--color-primary); 
    margin-top: var(--space-xxl); 
}

/* --- 5.6.1. Footer Navigation --- */
#custom-footer { 
    margin-bottom: var(--space-lg); 
    padding-bottom: var(--space-md); 
    border-bottom: 1px solid var(--color-grey-dark); 
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    list-style: none;
    padding: 0;
    margin: 0 auto;
}

.footer-links a {
    color: var(--color-grey-light);
    text-decoration: none;
    transition: var(--transition-base);
    font-weight: 500;
}

.footer-links a:hover {
    color: var(--color-white);
}

/* --- 5.6.2. Company Info & Copyright --- */
.site-info {
    text-align: center;
    padding: var(--space-md) 0;
}

.inside-site-info p {
    margin-bottom: var(--space-sm);
    line-height: 1.6;
}

.inside-site-info strong {
    color: var(--color-white);
    display: block;
    margin-bottom: 5px;
}

.inside-site-info .copyright {
    display: block;
    font-size: 0.85rem;
    opacity: 0.8;
}

/* --- 5.6.3. Legal Disclaimer (Isolated Fix) --- 
   Sử dụng selector kép để chặn 100% ảnh hưởng từ mục 7.9 */
.site-footer .footer-legal-notice {
    font-size: 0.8rem !important; /* Ép kích thước nhỏ chuyên nghiệp */
    line-height: 1.6 !important;
    color: var(--color-grey-light) !important;
    text-align: justify;
    hyphens: auto;
    max-width: 1000px;
    margin: 20px auto 0;
    padding: 15px;
    border-top: 1px dashed var(--color-grey-dark);
}

/* Reset lại strong trong Footer (Ngăn chặn gạch chân từ trang Disclaimer) */
.site-footer .footer-legal-notice strong {
    text-decoration: none !important; 
    color: var(--color-accent) !important;
    display: inline !important; /* Trả về inline thay vì block như site-info */
    font-weight: 700;
}

/* --- 5.6.4. Footer Responsive --- */
@media (max-width: 767.98px) {
    .footer-links { 
        gap: var(--space-sm); 
        flex-direction: column; 
        align-items: center; 
    }
    .site-footer .footer-legal-notice { 
        text-align: left; 
    }
}

/* 5.7 Cookie Consent Banner - UX Optimized */
.cookie-consent {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 20px;
    border-radius: 12px;
    box-shadow: var(--box-shadow-lg);
    z-index: 9999; /* Đảm bảo luôn trên cùng */
    visibility: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.cookie-consent.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.cookie-consent .content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: var(--container-max-width);
    margin: 0 auto;
}

.cookie-consent .left-side p {
    margin: 0;
    font-size: 14px;
    color: var(--color-dark);
    line-height: 1.5;
}

.cookie-consent .right-side {
    display: flex;
    gap: 10px;
}

.cookie-consent .btn {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.cookie-consent .deny-btn {
    background: #f1f3f5;
    color: var(--color-grey);
    border: 1px solid #dee2e6;
}

.cookie-consent .accept-btn {
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
}

@media (max-width: 767.98px) {
    .cookie-consent .content-wrapper { flex-direction: column; text-align: center; }
    .cookie-consent { bottom: 10px; left: 10px; right: 10px; padding: 15px; }
}

/* 5.8 Pagination (simple) */
.pagination { display: flex; gap: var(--space-sm); list-style: none; padding: 0; margin: var(--space-lg) 0; }
.pagination li a { display: inline-block; padding: 0.5rem 0.75rem; border-radius: var(--border-radius-sm); background: var(--color-background-alt); color: var(--color-text); text-decoration: none; border: var(--border-width) solid var(--color-border); }
.pagination li a:hover { background: var(--color-primary); color: var(--color-white); }

/* 6. C10MT-SPECIFIC COMPONENTS */

/* 6.1. Parts List (Affiliate) */
.parts-list {
  background: linear-gradient(180deg, rgba(var(--color-primary-rgb),0.03), transparent);
  border: 1px solid var(--color-border);
  padding: var(--space-md);
  border-radius: var(--border-radius-md);
  display: grid;
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
}
.parts-list .part-item { display: flex; align-items: center; gap: var(--space-md); }
.parts-list .part-thumb { width: 64px; height: 48px; flex-shrink: 0; border-radius: 6px; overflow: hidden; box-shadow: var(--box-shadow-sm); }
.parts-list .part-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.parts-list .part-meta { flex: 1; min-width: 0; }
.parts-list .part-meta .part-title { font-weight: var(--font-weight-semibold); color: var(--color-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parts-list .part-meta .part-desc { color: var(--color-grey); font-size: var(--font-size-sm); margin-top: 4px; }
.parts-list .part-meta .part-price { color: var(--color-grey); font-size: var(--font-size-sm); margin-top: 2px; }
.parts-list .part-cta { margin-left: auto; flex-shrink: 0; }
.parts-list .part-cta a { background: var(--color-accent); color: var(--color-white); padding: 0.45rem 0.75rem; border-radius: var(--border-radius-sm); font-weight: var(--font-weight-medium); text-decoration: none; display: inline-block; }

/* 6.2. How‑To TOC - Platinum Tier Interactive */
.article-toc {
    background-color: #f8fafd;
    border: 1px solid var(--color-border);
    border-left: 5px solid var(--color-primary);
    border-radius: var(--border-radius-md);
    padding: var(--space-lg);
    margin: var(--space-xl) 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 12px;
    margin-bottom: 15px;
}

.toc-title {
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.toc-title::before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    border-radius: 2px;
}

#toc-toggle-btn {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-primary);
    padding: 6px 8px;
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.18s ease;
}

.toc-list, .toc-sublist { list-style: none; padding: 0; margin: 0; }
.toc-item-h2 { margin-top: 8px; }

.toc-link-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 6px;
    transition: var(--transition-base);
    padding: 2px;
}

.toc-list a {
    display: block;
    padding: 8px 12px;
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
}

/* Hiệu ứng trượt mục con */
.toc-sublist {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-left: 20px;
    border-left: 1px solid var(--color-grey-lighter);
    margin-left: 22px;
    transition: max-height 0.36s cubic-bezier(.4,0,.2,1), opacity 0.28s ease;
}

.has-children.is-open .toc-sublist {
    opacity: 1;
    margin-top: 5px;
    margin-bottom: 10px;
}

.sub-toggle {
    background: none;
    border: none;
    color: var(--color-grey);
    padding: 8px 12px;
    cursor: pointer;
    transition: transform 0.24s ease;
}

.has-children.is-open .sub-toggle { transform: rotate(45deg); color: var(--color-primary); }

@media (min-width: 992px) {
    .article-toc.toc-collapsed #toc-list { display: block !important; }
    #toc-toggle-btn { display: none; }
}

/* 6.3. Project Gallery / Before‑After */
.project-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); margin: var(--space-lg) 0; }
.project-gallery .gallery-item { border-radius: var(--border-radius-md); overflow: hidden; background: var(--color-surface); box-shadow: var(--box-shadow-md); display: flex; flex-direction: column; }
.project-gallery .gallery-item img { width: 100%; height: 160px; object-fit: cover; display: block; }
.project-gallery .gallery-caption { padding: var(--space-sm); font-size: var(--font-size-sm); color: var(--color-grey); }
.gallery-before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gallery-before-after img { height: 180px; object-fit: cover; width: 100%; display: block; }
@media (max-width: 700px) { .gallery-before-after { grid-template-columns: 1fr; } .project-gallery .gallery-item img { height: 140px; } }

/* 6.4. Tools & Workshop Cards */
.tool-card { border: 1px solid var(--color-border); border-radius: var(--border-radius-md); padding: var(--space-md); background: var(--color-surface); box-shadow: var(--box-shadow-sm); display: flex; gap: var(--space-md); align-items: center; }
.tool-card img { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; }
.tool-card .tool-meta { flex: 1; }
.tool-card .tool-title { font-weight: var(--font-weight-semibold); color: var(--color-heading); }
.tool-card .tool-price { color: var(--color-grey); font-size: var(--font-size-sm); }
.tool-card .tool-cta a { background: var(--color-accent); color: var(--color-white); padding: 0.4rem 0.65rem; border-radius: 6px; text-decoration: none; font-weight: var(--font-weight-medium); }

/* 6.5. Affiliate CTA / Sticky Bar */
.affiliate-sticky {
  position: sticky;
  bottom: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  color: var(--color-white);
  border-radius: 12px;
  box-shadow: var(--box-shadow-lg);
  z-index: var(--z-index-scroll-top);
}
.affiliate-sticky a { color: var(--color-white); font-weight: var(--font-weight-semibold); text-decoration: none; }
@media (min-width: 768px) { .affiliate-sticky { display: none; } }

/* 6.6. Ad Slot Placeholders */
.ad-slot {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--color-primary-rgb), 0.02);
  border: 1px dashed var(--color-border);
  border-radius: var(--border-radius-sm);
  margin: var(--space-lg) 0;
}
@media (min-width: 992px) { .ad-slot { min-height: 250px; } }
@media (max-width: 480px) { .ad-slot { min-height: 60px; } }

.ad-inline { width: 100%; display: flex; align-items: center; justify-content: center; margin: var(--space-lg) 0; }
.ad-inline .ad-slot { width: 100%; max-width: 970px; }

/* ===============================================
 * 6.7. CATEGORY PORTAL - REFACTORED (GLOBAL vs HOMEPAGE)
 * =============================================== */

/* --- 6.7.1. Section Layout --- */
#category-portal .row { 
    gap: 0; 
}

/* --- 6.7.2. Base Card Structure (GLOBAL) --- 
   Đảm bảo card luôn có khung xương đúng ở mọi trang con */
.category-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px; /* Bo góc mặc định cho trang con */
    box-shadow: var(--box-shadow-sm);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}

.category-card .card-body {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 300px;
    width: 100%;
}

.category-card a.stretched-link { 
    position: absolute; 
    inset: 0; 
    z-index: 2; 
    text-indent: -9999px; 
}

/* --- 6.7.3. Homepage Enhancements (Chỉ áp dụng trang chủ) --- */
.index-page #category-portal {
    background: radial-gradient(circle at 50% 100%, rgba(13, 110, 253, 0.03) 0%, transparent 70%);
}

.index-page .category-card {
    background: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 24px; /* Bo góc lớn đồng bộ với Hero Image */
}

/* Hiệu ứng nổi lên & quét sáng khi hover */
.index-page .category-card.is-linked:hover {
    transform: translateY(-12px);
    border-color: var(--color-accent);
    box-shadow: 0 25px 50px -12px rgba(16, 32, 57, 0.15);
}

.index-page .category-card::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-25deg);
    transition: 0.75s;
    z-index: -1;
}

.index-page .category-card:hover::after {
    left: 125%;
}

/* --- 6.7.4. Icon & Graphics --- */
.category-icon {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--color-accent-rgb), 0.08);
    color: var(--color-accent);
    font-size: 1.6rem;
    margin-bottom: var(--space-md);
    transition: all 0.4s ease;
}

/* Biến icon thành hình vuông bo góc (Squircle) trên trang chủ */
.index-page .category-icon {
    width: 80px;
    height: 80px;
    background: rgba(13, 110, 253, 0.05);
    border-radius: 20px;
}

/* FIX: Xử lý lỗi chìm màu khi hover */
.index-page .category-card:hover .category-icon {
    background: var(--color-accent);
    transform: rotate(-5deg) scale(1.1);
}

.index-page .category-card:hover .category-icon i {
    color: var(--color-white) !important;
}

/* Trạng thái chưa kích hoạt */
.category-card:not(.is-linked) {
    background-color: var(--color-light);
    border-style: dashed;
    opacity: 0.7;
}

/* --- 6.7.5. Typography & Lists (Sử dụng màu đen #000 cho Trang chủ) --- */
.index-page .category-card .card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 0.5rem;
    color: #000000 !important;
}

.index-page .category-card .card-text {
    color: #000000 !important;
    font-size: 1rem;
    line-height: 1.5;
    margin-top: 0.5rem;
    opacity: 0.9;
}

.index-page .category-card ul {
    margin-top: auto;
    padding: 1.5rem 0 0 0;
    list-style: none;
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.index-page .category-card ul li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #000000 !important;
    padding-bottom: 12px;
    font-size: 16px;
    font-weight: 500;
}

/* --- 6.7.6. Responsive Design --- */
@media (max-width: 991.98px) {
    .category-card .card-body { 
        min-height: 260px; 
        padding: var(--space-md); 
    }
}

/* 6.8. GLOBAL POST GRID & CARDS (Platinum Standard) */

.c10mt-post-grid {
    display: grid;
    gap: var(--space-lg); /* Tăng gap một chút để lưới thoáng hơn */
    grid-template-columns: 1fr;
    margin-bottom: var(--space-xl);
}

@media (min-width: 768px) { .c10mt-post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .c10mt-post-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card {
    background-color: var(--color-surface);
    border-radius: 20px; /* Tăng lên 20px để đồng bộ với ảnh chuyên mục */
    border: 1px solid rgba(16, 32, 57, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease, border-color 0.3s ease;
    text-decoration: none; /* Đảm bảo không có gạch chân nếu bọc toàn thẻ bằng <a> */
}

/* Hiệu ứng Hover & Focus-within (Cho người dùng dùng bàn phím) */
.post-card:hover, 
.post-card:focus-within {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(16, 32, 57, 0.1);
    border-color: var(--color-accent);
}

.post-card .post-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; 
    overflow: hidden;
    background-color: #f0f2f5;
}

.post-card .post-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

.post-card:hover .post-image-container img {
    transform: scale(1.1); /* Phóng to nhẹ khi hover */
}

/* Badge chuyên mục: Tối ưu tương phản */
.post-category-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 2;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 6px;
    letter-spacing: 1px;
    pointer-events: none; /* Badge không cản trở việc click vào ảnh */
}

.post-card .card-body {
    padding: var(--space-lg);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.post-card .entry-title {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 var(--space-sm);
    color: var(--color-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

/* Khi hover vào Card thì tiêu đề đổi màu nhẹ */
.post-card:hover .entry-title {
    color: var(--color-accent);
}

.post-card .entry-summary {
    font-size: 1rem;
    color: #000000; /* Màu đen sắc nét theo yêu cầu của bạn */
    line-height: 1.6;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: 0.85; /* Giảm nhẹ opacity để phân cấp thông tin so với tiêu đề */
}

/* 6.9. Technical Data Tables (Single Post) */

/* 6.9.1. Container bao ngoài (Wrapper) - Tối ưu chống tràn */
.single-post .table-responsive-wrapper {
    position: relative;
    margin: var(--space-xl) 0;
    border-radius: var(--border-radius-md);
    box-shadow: var(--box-shadow-md);
    border: 1px solid var(--color-border);
    overflow: auto; /* Cho phép cuộn ngang và dọc nếu cần */
    background-color: var(--color-white);
    -webkit-overflow-scrolling: touch;
}

/* 6.9.2. Cấu trúc bảng - Chuyển sang separate để hỗ trợ Sticky */
.single-post .entry-content table {
    width: 100%;
    min-width: 700px; /* Đảm bảo bảng đủ rộng để đọc thông số kỹ thuật */
    border-collapse: separate; /* Bắt buộc để Sticky Header hoạt động */
    border-spacing: 0;
    margin: 0;
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.5;
}

/* Caption - Tiêu đề bảng */
.single-post .entry-content table caption {
    caption-side: top;
    text-align: left;
    font-weight: var(--font-weight-bold);
    font-size: 1.1rem;
    color: var(--color-primary);
    padding: 12px 15px;
    border-left: 4px solid var(--color-accent);
    background-color: rgba(var(--color-primary-rgb), 0.02);
}

/* 6.9.3. Định dạng Header (Sticky) */
.single-post .entry-content thead th {
    position: sticky;
    top: 0; /* Giữ header ở đỉnh khi cuộn */
    z-index: 20; /* Cao hơn các ô td */
    background-color: var(--color-primary);
    color: var(--color-white);
    text-align: left;
    padding: 15px var(--space-md);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--color-accent);
    border-right: 1px solid rgba(255,255,255,0.1);
}

/* 6.9.4. Định dạng các ô dữ liệu (Td) */
.single-post .entry-content td {
    padding: 12px var(--space-md);
    vertical-align: middle;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
}

/* Reset margin cho thẻ p trong bảng */
.single-post .entry-content td p,
.single-post .entry-content th p {
    margin: 0 !important;
}

/* 6.9.5. Cột đầu tiên (Sticky Key Column) */
.single-post .entry-content td:first-child {
    position: sticky;
    left: 0; /* Giữ cột đầu tiên khi cuộn ngang */
    z-index: 10;
    font-weight: 700;
    text-align: center;
    background-color: #f8fafd; /* Màu nền riêng cho cột key */
    color: var(--color-primary);
    width: 200px; /* Độ rộng cố định cho cột key */
    border-right: 2px solid var(--color-accent);
}

/* 6.9.6. Hiệu ứng dòng & Hover (Zebra Stripes) */
.single-post .entry-content tbody tr:nth-child(even) td {
    background-color: #fafafa;
}

/* Sửa lỗi đè màu của cột Sticky khi dùng Zebra */
.single-post .entry-content tbody tr:nth-child(even) td:first-child {
    background-color: #f1f4f8; 
}

/* Hover effect */
@media (min-width: 992px) {
    .single-post .entry-content tbody tr:hover td {
        background-color: rgba(var(--color-accent-rgb), 0.06);
        transition: background-color 0.18s ease;
    }
}

/* 6.9.7. Tối ưu Mobile */
@media (max-width: 767px) {
    .single-post .entry-content td {
        white-space: nowrap; /* Tránh vỡ dòng dữ liệu kỹ thuật */
    }
    /* Ẩn bớt border-right ở cột cuối để sạch hơn */
    .single-post .entry-content td:last-child, 
    .single-post .entry-content th:last-child {
        border-right: none;
    }
}

/* Accessibility: Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .single-post .entry-content thead th {
        background-color: #0a1424;
    }
    .single-post .entry-content td:first-child {
        background-color: #1a1a1a;
        color: var(--color-white);
    }
    .single-post .table-responsive-wrapper {
        background-color: #121212;
    }
}

/* Print Friendly */
@media print {
    .single-post .entry-content thead th {
        position: static;
        background-color: #eee !important;
        color: #000 !important;
    }
    .single-post .entry-content td:first-child {
        position: static;
    }
}

/* 6.10. TECHNICAL REFERENCES SECTION */

/* Khung bao ngoài của section */
.single-post .references {
    margin-top: var(--space-xxl); /* Khoảng cách rộng với nội dung bài viết */
    padding: var(--space-lg);
    background-color: #f8fafd; /* Màu nền xanh xám nhẹ chuyên nghiệp */
    border: 1px solid var(--color-border);
    border-left: 5px solid var(--color-primary); /* Nhấn mạnh bằng thanh màu dọc */
    border-radius: var(--border-radius-sm);
}

/* Tiêu đề của phần tham khảo */
.single-post .references-title {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    font-size: 1.1rem;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
}

/* Định dạng danh sách số thứ tự */
.single-post .references ol {
    margin-bottom: 0;
    padding-left: 1.5rem;
}

.single-post .references li {
    font-size: 0.95rem;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
    line-height: 1.6;
}

.single-post .references li:last-child {
    margin-bottom: 0;
}

/* Style cho các liên kết trong phần tham khảo */
.single-post .references a {
    color: #000 !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent;
    transition: var(--transition-base);
}

.single-post .references a:hover {
    color: var(--color-primary-dark) !important;
    border-bottom-color: var(--color-primary-dark);
}

/* Tối ưu cho Mobile */
@media (max-width: 767.98px) {
    .single-post .references {
        padding: var(--space-md);
        margin-left: -15px;
        margin-right: -15px;
        border-radius: 0;
        border-right: none;
    }
}

/* 6.11. ALERT & CALLOUT BOXES (SINGLE POST) */

.single-post .alert {
    position: relative;
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-xl);
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    font-size: 1rem;
    line-height: 1.6;
}

/* Kiểu dáng Alert Info (Màu xanh chuyên nghiệp) */
.single-post .alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

/* Tiện ích Border-start (Dấu gạch đứng bên trái) */
.single-post .border-start {
    border-left-style: solid !important;
}

.single-post .border-4 {
    border-left-width: 5px !important; /* Độ dày thanh nhấn mạnh */
}

/* Nhấn mạnh màu sắc cho thanh bên trái của Alert Info */
.single-post .alert-info.border-start {
    border-left-color: var(--color-primary) !important; 
}

/* Tối ưu link bên trong Alert Box */
.single-post .alert a {
    font-weight: var(--font-weight-bold);
    color: #055160;
    text-decoration: underline;
    transition: var(--transition-base);
}

.single-post .alert a:hover {
    color: var(--color-accent);
}

/* 6.12. HERO ARTICLE IMAGE OVERRIDE (LCP FIX) */

/* Ghi đè giới hạn 500px để hiển thị full 1200px (khớp container) */
.single-post .entry-image-hero {
    max-width: 1200px; 
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.single-post .entry-image-hero img {
    max-width: 100% !important; /* Phá vỡ giới hạn 500px */
    max-height: none !important; /* Phá vỡ giới hạn 500px */
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* Giữ đúng tỉ lệ của 1920x1080 */
    object-fit: cover;
    border-radius: var(--border-radius-md);
}

/* Mở rộng figcaption cho khớp với ảnh lớn */
.single-post .entry-image-hero figcaption {
    max-width: 100% !important;
    text-align: center;
    margin-top: var(--space-md);
    font-size: 1rem;
}

/* Điều chỉnh khoảng cách trên Mobile */
@media (max-width: 767.98px) {
    .single-post .entry-image-hero {
        margin-top: 0;
        margin-bottom: var(--space-lg);
    }
    .single-post .entry-image-hero img {
        border-radius: 0; /* Ảnh tràn viền trên mobile nhìn sẽ chuyên nghiệp hơn */
    }
}

/* 7. PAGE-SPECIFIC STYLES & OVERRIDES */

/* 7.1. Homepage / Hero Variants & Testimonials */
.index-page .home-hero .hero { 
    min-height: calc(70vh - var(--header-height-mobile)); 
}

/* --- Testimonial Card Base --- */
.index-page .testimonial-card {
    background: var(--color-white);
    border-radius: 20px !important;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%; /* Đảm bảo các card cao bằng nhau trong row */
}

/* Hiệu ứng trang trí dấu nháy kép chìm phía sau */
.index-page .testimonial-card::before {
    content: '"';
    position: absolute;
    top: -10px;
    right: 20px;
    font-size: 8rem;
    color: rgba(var(--color-accent-rgb), 0.05);
    font-family: serif;
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}

.index-page .testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
    background: linear-gradient(to bottom, #ffffff, #fcfdff);
}

/* --- Testimonial Content --- */
.index-page .testimonial-card .blockquote {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

.index-page .testimonial-card .blockquote p {
    color: var(--color-dark);
    line-height: 1.6;
    font-style: italic;
    font-size: 0.95rem;
    position: relative;
    z-index: 1;
    margin-bottom: 0;
}

/* --- Testimonial Footer (Metadata) --- */
.index-page .testimonial-card .blockquote-footer {
    display: flex;
    align-items: center;
    flex-wrap: nowrap; /* Ép nằm trên 1 dòng */
    background: transparent;
    color: var(--color-grey);
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding-top: 1.2rem !important;
    margin-top: auto !important; /* Đẩy xuống đáy card */
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Icon xác thực chuyên nghiệp */
.index-page .testimonial-card .blockquote-footer i,
.index-page .testimonial-card .bi-person-check-fill {
    font-size: 1rem;
    margin-right: 8px;
    color: var(--color-accent);
    flex-shrink: 0;
}

/* Tên người đánh giá */
.index-page .testimonial-card .blockquote-footer strong {
    color: var(--color-primary);
    font-weight: 700;
    margin-right: 8px;
}

/* Chức danh/Nghề nghiệp với dấu phân cách */
.index-page .testimonial-card .blockquote-footer em {
    font-style: normal;
    font-size: 0.8rem;
    opacity: 0.7;
    padding-left: 8px;
    border-left: 1px solid var(--color-grey-lighter);
    display: inline-block;
    color: var(--color-grey);
}

/* --- Mobile Responsive --- */
@media (max-width: 480px) {
    .index-page .testimonial-card .blockquote-footer {
        font-size: 0.68rem;
        padding-top: 1rem !important;
    }
    
    .index-page .testimonial-card .blockquote-footer em {
        padding-left: 6px;
        margin-left: 0;
    }
}

/* 7.2. SINGLE POST / HOW‑TO LAYOUT & MEDIA (NO SIDEBAR) */

/* --- 7.2.1. Main Content Container --- 
   Khung bao quanh toàn bộ bài viết, khớp 1200px với Header */
.single-post .entry-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    line-height: 1.8;
    color: var(--color-text);
}

/* --- 7.2.2. Full-Width Typography --- 
   Mở rộng toàn bộ văn bản ra 1200px theo yêu cầu để tạo 
   không gian nghiên cứu kỹ thuật rộng rãi. */
.single-post .entry-content > p, 
.single-post .entry-content > h2, 
.single-post .entry-content > h3,
.single-post .entry-content > h4,
.single-post .entry-content > h5,
.single-post .entry-content > h6,
.single-post .entry-content > ul,
.single-post .entry-content > ol,
.single-post .entry-content > blockquote,
.single-post .entry-content > .references,
.single-post .author-info-box {
    max-width: 100%; /* Kế thừa toàn bộ 1200px từ entry-content */
    margin-bottom: var(--space-lg);
}

/* --- 7.2.3. Stealth Backlinks (Ngụy trang link) --- 
   Link ẩn hoàn toàn trong văn bản #000000 để bẫy đối thủ copy bài. */
.entry-content a {
    color: #000000 !important;
    text-decoration: none !important;
    font-weight: inherit;
    cursor: text;
    transition: none;
}

.entry-content a:hover {
    cursor: pointer;
    color: #000000 !important;
}

/* --- 7.2.4. Visual Media Fix (Strict 1200px) --- */
.entry-content img,
.entry-content .full-width-img {
    width: 100%;
    max-width: 1200px;
    margin: var(--space-xl) auto;
    display: block;
    border-radius: var(--border-radius-md);
    clear: both;
}

/* --- 7.2.5. YouTube Video Responsive Fix (Bulletproof) --- */
.video-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: var(--space-xl) auto;
    background-color: #000;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    
    /* Sử dụng aspect-ratio (Chuẩn hiện đại 2025) */
    aspect-ratio: 16 / 9; 
}

/* Fallback cho trình duyệt cũ không hỗ trợ aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
    .video-container {
        height: 0;
        padding-bottom: 56.25%;
    }
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* --- 7.2.5. YouTube Video Responsive Fix (Full Fix) --- 
   Sử dụng kỹ thuật "Intrinsic Ratio" để ghi đè kích thước cố định (560x315) 
   của YouTube, ép video luôn đạt tỉ lệ 16:9 trên mọi thiết bị. */
.video-container {
    position: relative;
    width: 100%;
    max-width: 1200px; /* Khớp với giới hạn của website */
    margin: var(--space-xl) auto; /* Sử dụng biến space đồng bộ */
    background-color: #000;
    border-radius: var(--border-radius-md); /* Dùng biến đồng bộ với ảnh */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    
    /* QUAN TRỌNG: Tạo khung tỉ lệ 16:9 */
    height: 0;
    padding-bottom: 56.25%; /* 9 chia 16 = 0.5625 */
}

/* Fix lỗi ghi đè cho iframe nhúng trực tiếp từ YouTube */
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important; /* Ghi đè width="560" */
    height: 100% !important; /* Ghi đè height="315" */
    border: 0;
}

/* --- 7.2.6. Responsive Adjustments --- */
@media (max-width: 1199.98px) {
    .single-post .entry-content {
        padding: 0 var(--space-sm); /* Giảm padding trên Mobile để tăng diện tích hiển thị */
    }
}

/* --- 7.2.7. Article Sectioning (hasPart) --- */
.single-post section[itemprop="hasPart"] {
    margin-bottom: var(--space-xxl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--color-border);
}

.single-post section[itemprop="hasPart"]:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 7.3. CATEGORY PAGE OVERRIDES (Platinum Standard) */

/* Header Box: Đồng bộ bo góc và hiệu ứng chiều sâu */
.category-page .category-header-box {
    background: var(--color-primary); 
    padding: var(--space-xl);
    border-radius: 24px; /* Giữ 24px cho container */
    margin-bottom: var(--space-xl);
    color: var(--color-white);
    box-shadow: 0 20px 40px rgba(16, 32, 57, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Ảnh chuyên mục: Áp dụng clamp() để tự co giãn trên Mobile */
.category-page .category-main-img {
    width: clamp(240px, 30vw, 320px);
    height: auto;
    aspect-ratio: 1 / 1; 
    object-fit: cover;
    border-radius: 20px;
    border: 5px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.4s ease, border-color 0.4s ease;
}

.category-page .category-main-img:hover {
    transform: scale(1.02);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Tiêu đề: Tối ưu khoảng cách */
.category-page .category-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    margin-bottom: var(--space-md);
    color: #ffffff;
    line-height: 1.1;
}

/* Mô tả: Tương phản cực cao và khoảng cách dòng thoáng */
.category-page .category-description {
    font-size: clamp(1.1rem, 2vw, 1.2rem); /* Responsive font-size */
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.98);
}

.category-page .category-description a {
    color: #fff; 
    font-weight: 700;
    transition: color 0.3s ease;
}

.category-page .category-description a:hover {
    color: #4dabff;
}

/* Stats Row: Chuyển sang Flexbox để căn chỉnh hoàn hảo */
.category-page .category-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: var(--space-lg);
}

/* Info-subitem: Nâng cấp thành các Badge tương tác */
.category-page .info-subitem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: default;
}

.category-page .info-subitem:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

/* Khắc phục độ tương phản cho Icon */
.category-page .bi-patch-check-fill {
    color: #00f2ff; /* Màu Cyan sáng hơn để đạt chuẩn WCAG trên nền tối */
    font-size: 1.1rem;
}

.category-page .bi-eye-fill {
    color: rgba(255, 255, 255, 0.8); /* Tăng độ sáng icon mắt */
}

/* Tối ưu hóa Post Grid */
.category-page .c10mt-post-grid {
    margin-top: 3.5rem;
}

/* Căn chỉnh lại Header trên Mobile */
@media (max-width: 991.98px) {
    .category-page .category-header-box {
        text-align: center;
        padding: var(--space-lg);
    }
    .category-page .category-stats-row {
        justify-content: center;
    }
}

/* 7.4. Search Results Page */
.search-results .result-item { padding: var(--space-md); border-bottom: var(--border-width) solid var(--color-border); }

/* 7.5. ABOUT US / TEAM PAGE */

/* --- 7.5.1. Global Page Settings --- */
.about-us-page {
    background-color: var(--color-white);
    overflow-x: hidden;
}

/* Khoảng cách rộng rãi giữa các section */
.about-us-page .py-5 {
    padding-top: var(--space-xxl) !important;
    padding-bottom: var(--space-xxl) !important;
}

/* Đường kẻ phân cách rõ hơn */
.about-us-page section {
    position: relative;
    border-bottom: 1px solid rgba(0,0,0,0.06); /* tăng nhẹ độ tương phản */
}

/* --- 7.5.2. Zebra Striping Layout --- */
#company-story-vision { background-color: var(--color-white); }

#mission-details { 
    background-color: #eef2f5 !important; /* màu xám xanh rõ hơn */
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

#team-section { 
    background-color: var(--color-white) !important; 
}

#user-benefits { 
    background-color: #f1f3f5; /* khác biệt rõ hơn với mission-details */
}

/* --- 7.5.3. Header & Hero Section --- */
.about-header {
    padding: var(--space-xxl) 0;
    background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
}

.about-header h1 {
    color: var(--color-primary);
    letter-spacing: -1px;
    margin-bottom: var(--space-md);
}

/* --- 7.5.4. Executive Team Cards --- */
.team-member.card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid rgba(0,0,0,0.08) !important; /* tăng nhẹ độ rõ */
    height: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.team-member.card:hover {
    transform: translateY(-6px); /* giảm độ nhảy */
    box-shadow: 0 16px 32px rgba(16, 32, 57, 0.15) !important;
    border-color: var(--color-primary) !important;
}

/* Avatar */
.team-avatar-img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    filter: grayscale(20%);
    transition: filter 0.3s ease;
}

.team-member.card:hover .team-avatar-img {
    filter: grayscale(0%);
}

/* Typography */
.team-member .card-title {
    font-size: 1.3rem; /* tăng nhẹ */
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 4px;
}

.team-member .text-muted {
    font-size: 0.9rem !important;
    line-height: 1.4;
    margin-bottom: 12px;
    color: #000000 !important;
}

.team-member .card-text {
    font-size: 1rem; /* ~16px, dễ đọc hơn */
    line-height: 1.6;
    color: #555;
    margin-top: auto;
    font-weight: 400;
}

/* Card Body */
.team-member.card .card-body {
    padding: 1.75rem 1.5rem !important;
}

/* --- 7.5.5. Mission Icons & User Benefits --- */
#user-benefits .border {
    border: 1px solid #e0e0e0 !important;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Text */
#user-benefits p {
    font-size: 1rem !important; /* ~16px */
    line-height: 1.6;
    color: #555;
    margin-bottom: 0;
    font-weight: 400;
}

#user-benefits h4 {
    font-size: 1.3rem; /* rõ hơn */
    font-weight: 700;
    color: var(--color-primary);
}

/* Icon */
#user-benefits i {
    display: inline-block;
    padding: 15px;
    background: rgba(var(--color-primary-rgb), 0.08);
    border-radius: 50%; /* đồng bộ bo tròn */
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

/* Hover effect */
#user-benefits .border:hover {
    border-color: var(--color-primary) !important;
    background-color: #ffffff;
    transform: translateY(-5px);
}

#user-benefits .border:hover i {
    background-color: var(--color-primary);
    color: var(--color-white) !important;
}

/* 7.6. CONTACT PAGE - TECHNICAL SUPPORT STYLE */

.contact-page {
    background-color: var(--color-white);
}

/* Header trang liên hệ */
.contact-header {
    margin-bottom: var(--space-xxl);
}

.contact-header h1 {
    color: var(--color-primary); /* #102039 */
    letter-spacing: -1px;
}

/* --- 7.6.1. Trụ sở kỹ thuật (Left Column) --- */
.contact-info-card {
    background-color: #f8fafd !important; /* Xanh xám nhạt kiểu bản vẽ kỹ thuật */
    border: 1px solid rgba(var(--color-primary-rgb), 0.08) !important;
    transition: transform 0.3s ease;
}

.contact-info-card i {
    color: var(--color-accent) !important; /* Màu xanh nổi bật cho icon */
}

/* Khối link tài nguyên nhanh */
.quick-links-box {
    background-color: var(--color-white);
    border: 1px solid #e9ecef !important;
}

.quick-links-box a {
    text-decoration: none;
    font-size: 0.95rem;
    color: var(--color-text);
    transition: all 0.2s ease;
}

.quick-links-box a:hover {
    color: var(--color-accent) !important;
    padding-left: 5px; /* Hiệu ứng dịch chuyển nhẹ khi hover */
}

/* --- 7.6.2. Form liên hệ chuyên dụng (Right Column) --- */
.contact-form-wrapper {
    background-color: var(--color-white);
    border: 1px solid #eee !important;
}

/* Tinh chỉnh đoạn thông báo phản hồi trong Contact Page */
.contact-form-wrapper em {
    font-style: normal;
    color: #666;
    font-size: 0.95rem;
}

.contact-info-card .border-primary {
    border-left-color: var(--color-accent) !important;
    background-color: rgba(var(--color-primary-rgb), 0.02);
}

/* Tinh chỉnh nhãn (Label) */
.contact-form-wrapper .form-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 8px;
}

/* Tinh chỉnh ô nhập liệu (Input/Select/Textarea) */
.contact-form-wrapper .form-control,
.contact-form-wrapper .form-select {
    border: 1px solid #d1d9e0;
    padding: 12px 16px;
    font-size: 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* Hiệu ứng Focus chuẩn UX 2025 */
.contact-form-wrapper .form-control:focus,
.contact-form-wrapper .form-select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), 0.1);
    outline: none;
}

/* Nút bấm gửi tin nhắn */
.contact-form-wrapper .btn-primary {
    background-color: var(--color-primary);
    border: none;
    border-radius: 8px;
    padding: 14px 20px;
    font-size: 1.1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-form-wrapper .btn-primary:hover {
    background-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--color-primary-rgb), 0.2) !important;
}

/* --- 7.6.3. Bản đồ & Responsive --- */
.contact-page iframe {
    filter: grayscale(10%) contrast(1.1); /* Giảm màu bản đồ cho chuyên nghiệp */
    border-radius: 12px;
}

@media (max-width: 991.98px) {
    .contact-info-card {
        margin-bottom: 30px;
    }
    
    .contact-header h1 {
        font-size: 2.5rem;
    }
}

/* --- 7.6.4. Contact Guidelines (VNLibs Inspired) --- */
.contact-guidelines .guideline-box {
    transition: all 0.3s ease;
    border: 1px solid #eee; /* Đường viền mặc định nhẹ */
}

.contact-guidelines .guideline-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

.contact-guidelines h5 {
    font-size: 1.2rem;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
}

.contact-guidelines ul li {
    font-size: 1rem; /* Đồng nhất 16px với toàn trang */
    line-height: 1.5;
    color: #555;
    align-items: flex-start;
}

.contact-guidelines ul li i {
    font-size: 1.2rem;
    margin-top: -2px;
}

/* Tinh chỉnh màu sắc thành công/cảnh báo theo tông màu kỹ thuật */
.border-success { border-left-color: #28a745 !important; }
.border-danger { border-left-color: #dc3545 !important; }

/* Link trong guideline vẫn tuân thủ Stealth Link nhưng có màu xanh nhẹ để nhận diện */
.contact-guidelines a {
    color: var(--color-accent) !important;
    text-decoration: underline !important;
}

/* 7.7. FAQ Page */
.faq-item { border-bottom: var(--border-width) solid var(--color-border); padding: var(--space-md) 0; }
.faq-item summary { cursor: pointer; font-weight: var(--font-weight-semibold); }

/* 7.8. Advertise Page */
.advertise-cta { background: linear-gradient(90deg, rgba(var(--color-primary-rgb),0.06), transparent); padding: var(--space-md); border-radius: var(--border-radius-md); }

/* 7.9. LEGAL & POLICY PAGES */

.legal-page .entry-content {
  /* tăng nhẹ max-width để phù hợp legal text dài */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem; /* giảm cảm giác chật ở mép */
}

/* Paragraphs & Lists */
.legal-page .entry-content p,
.legal-page .entry-content li {
  font-size: 1.25rem !important; /* ~18px, đúng kỳ vọng */
  line-height: 1.75;
  color: #333;
  margin-bottom: 1.25rem;
  font-weight: 400;
  text-align: left;
}

/* Section Headings (H2) */
.legal-page .entry-content h2 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: 2rem;
  margin-bottom: 1rem;
  border-bottom: 1.5px solid #e6e8ea;
  padding-bottom: 6px;
  display: inline-flex; /* giữ baseline tự nhiên hơn flex block */
  align-items: baseline;
  gap: 10px; /* thay thế margin-right ở icon */
}

/* Icons in headings */
.legal-page .entry-content h2 i {
  color: var(--color-accent, var(--color-primary));
  font-size: 1.1em; /* nhỉnh hơn text một chút */
  line-height: 1;
  vertical-align: middle;
}

/* Strong & Emphasis */
.legal-page .entry-content strong {
  color: #222; /* bớt gắt hơn #000 */
  font-weight: 700;
  text-decoration: none;
}

.legal-page .entry-content em {
  font-style: italic; /* trả về đúng semantics */
  background-color: transparent; /* bỏ nền để giảm noise */
  border: 0; 
  padding: 0; 
  border-radius: 0;
  color: inherit; /* giữ màu theo ngữ cảnh */
}

/* Lists: tighten spacing between items */
.legal-page .entry-content ul,
.legal-page .entry-content ol {
  margin-left: 1rem;
  margin-bottom: 1.25rem;
}

.legal-page .entry-content li > strong {
  color: #222;
}

/* Sections rhythm (optional) */
.legal-page section {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Highlight blocks (e.g., ATTENTION) */
.legal-page .entry-content .border-start {
  border-left-width: 4px !important;
}

/* Accessibility: ensure color contrast on light backgrounds */
.legal-page .entry-content .bg-light {
  background-color: #f8f9fb !important; /* hơi lạnh để phân biệt */
  border-color: #dfe3e8 !important;
}

/* Prevent unexpected inheritance from other pages */
.about-us-page .entry-content,
.about-us-page section,
.about-us-page h2 {
  /* no overrides here — keep About styles isolated */
}

/* If Bootstrap Icons are used, ensure consistency */
.bi {
  font-variant-ligatures: none;
  speak: none;
}


/* 7.10. 404 Error Page */
.error-404 { text-align: center; padding: var(--space-xxl) 0; }

/* 7.11. Roadmap / Project Series Pages */
.roadmap { display: grid; gap: var(--space-md); }

/* ===============================================
 * 7.12. AUTHORS LIST PAGE (Technical Soft-Square)
 * =============================================== */

.author-grid-section .section-title-authors {
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-weight: 800;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: var(--space-xl);
}

.authors-page .author-card {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(16, 32, 57, 0.08);
    background: var(--color-white);
    border-radius: 16px; /* Bo góc hiện đại cho toàn thẻ */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.authors-page .author-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(16, 32, 57, 0.12);
    border-color: var(--color-accent);
}

/* AVATAR: Hiển thị trọn vẹn ảnh 1024x1024 */
.author-avatar-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; /* Khóa tỉ lệ vuông hoàn hảo */
    overflow: hidden;
    background-color: #f0f2f5;
}

.author-avatar-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.authors-page .author-card:hover .author-avatar-wrapper img {
    transform: scale(1.08);
}

.authors-page .card-body {
    padding: var(--space-lg);
    text-align: left; /* Căn trái chuẩn chuyên gia kỹ thuật */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.authors-page .author-name-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 0.35rem;
    line-height: 1.2;
}

.authors-page .author-specialty {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 0;
    line-height: 1.4;
}

/* 7.13. INDIVIDUAL AUTHOR PROFILE (Authority Layout) */

.author-page .author-profile-header {
    background: linear-gradient(180deg, #f8fafd 0%, #ffffff 100%);
    padding: var(--space-xxl) 0 var(--space-xl);
    border-bottom: 1px solid #eee;
    text-align: center;
}

.author-page .author-avatar-main {
    width: 280px; /* Hiển thị chân dung lớn sắc nét */
    height: 280px;
    margin: 0 auto var(--space-lg);
    border-radius: 20px;
    overflow: hidden;
    border: 6px solid var(--color-white);
    box-shadow: var(--box-shadow-lg);
}

.author-page .author-avatar-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===============================================
 * 8. UTILITIES & HELPER CLASSES
 * =============================================== */

/* --- 8.1. Layout & Display Helpers --- */
.u-hidden { display: none !important; }
.u-center { text-align: center !important; }
.u-flex { display: flex !important; }
.u-gap-sm { gap: var(--space-sm) !important; }

/* --- 8.2. Typography Helpers --- */
.kicker { 
    font-size: var(--font-size-sm); 
    color: var(--color-grey); 
    text-transform: uppercase; 
    letter-spacing: 0.06em; 
    font-weight: 600;
}

/* FIX: Chỉ ép màu đen cho text-muted tại Trang Chủ để bảo vệ các trang con */
.index-page .text-muted { 
    color: #000000 !important; 
    opacity: 0.8; /* Giữ lại một chút độ trong suốt để vẫn có cảm giác 'muted' nhẹ */
}

/* --- 8.3. Spacing Helpers --- */
.mt-sm { margin-top: var(--space-sm) !important; }
.mt-md { margin-top: var(--space-md) !important; }
.mb-md { margin-bottom: var(--space-md) !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

/* --- 8.4. Accessibility Helpers (Quan trọng cho Google AdSense) --- */
/* Phục vụ người dùng dùng phím Tab và hỗ trợ SEO */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    left: 12px;
    top: 12px;
    width: auto;
    height: auto;
    z-index: var(--z-index-skip-link);
    background: var(--color-white);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--box-shadow-md);
    color: var(--color-primary);
    font-weight: 700;
}

/* Ẩn văn bản với trình duyệt nhưng vẫn giữ cho Robot Google đọc được */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- 8.5. Homepage Section Backgrounds (Zebra Striping) --- 
   Sắp xếp theo thứ tự xuất hiện trên trang chủ */

.index-page #manifesto, 
.index-page #start-journey, 
.index-page #testimonials {
    background-color: var(--color-white); /* Nền trắng sạch sẽ */
}

.index-page #commitment, 
.index-page #category-portal, 
.index-page #why-c10mt {
    background-color: #f8f9fa; /* Nền xám kỹ thuật cực nhẹ */
    border-top: 1px solid rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* 9. ADSENSE & STRUCTURED DATA HELPERS */
/* Schema marker classes for server-side injection of JSON-LD */
.schema-howto { /* marker for HowTo schema injection */ }
.schema-product { /* marker for Product schema injection */ }

/* ARIA roles hint (CSS-only markers) */
[role="list"] { list-style: none; padding: 0; margin: 0; }

/* 10. ACCESSIBILITY HELPERS */
/* Focus ring improvements */
:focus { outline-offset: 2px; }

/* 11. PERFORMANCE OVERRIDES (LCP CRITICAL) */
/* Kích thước chữ tối thiểu để tránh CLS (Cumulative Layout Shift) */
:root { --critical-font-size: 16px; }

/* Image lazy-loading visual - Tối ưu hiệu ứng xuất hiện */
img[loading="lazy"] { 
    opacity: 0; 
    transform: translateY(10px); 
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; 
    will-change: opacity, transform;
}

/* Khi ảnh đã tải xong hoặc JS thêm class .loaded */
img[loading="lazy"].loaded { 
    opacity: 1; 
    transform: translateY(0); 
}

/* Fallback: Nếu trình duyệt không hỗ trợ hiệu ứng hoặc để an toàn cho SEO */
@media (prefers-reduced-motion: reduce) {
    img[loading="lazy"] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Tối ưu Shadow cho thiết bị yếu */
@media (max-width: 767.98px) { 
    .box-shadow-md, .box-shadow-lg { box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; } 
}

/* 12. PRINT STYLES */
@media print {
  body { background: #fff; color: #000; }
  .header, .navmenu, .affiliate-sticky, .ad-slot { display: none !important; }
  .entry-content { max-width: 100%; }
}

/* Small responsive tweaks */
@media (max-width: 991.98px) {
  .entry-content { padding: 0 var(--space-sm); }
  .author-info-box .info-item-group { grid-template-columns: 1fr; }
  .parts-list .part-thumb { width: 56px; height: 42px; }
  .parts-list .part-cta a { padding: 0.35rem 0.6rem; }
}

/* End of file */