/* =========================================================
   CKC AUTO - Giao diện mới (nạp sau cùng trong templates/layout/css.php)
   Bổ sung cho Bootstrap 5.3: màu thương hiệu, font, các khối riêng
   Thiết kế gốc: Figma CKC (khung 1440px, nội dung 1320px)
   ========================================================= */

/* ---------- 1. Biến màu & font ---------- */
:root {
  --ckc-red: #eb1c24;          /* đỏ thương hiệu */
  --ckc-red-2: #e51a24;        /* đỏ phụ (badge, gạch chân) */
  --ckc-blue: #0262b1;         /* xanh chủ đạo */
  --ckc-sky: #519ede;          /* xanh nhạt */
  --ckc-navy: #052d5d;         /* xanh đậm (tiêu đề) */
  --ckc-ink: #0b2545;          /* chữ tiêu đề thẻ */
  --ckc-menu: #183852;         /* chữ menu */
  --ckc-slate: #435a77;        /* chữ mô tả */
  --ckc-muted: #475569;
  --ckc-line: #e2e8f0;
  --ckc-bg-soft: #f8fafc;
  --ckc-green: #047857;

  --ff-main: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-alt: "Plus Jakarta Sans", var(--ff-main);

  /* Ghi đè biến Bootstrap */
  --bs-body-font-family: var(--ff-main);
  --bs-body-color: var(--ckc-slate);
  --bs-primary: var(--ckc-blue);
  --bs-primary-rgb: 2, 98, 177;
  --bs-danger: var(--ckc-red);
  --bs-danger-rgb: 235, 28, 36;
  --bs-link-color: var(--ckc-blue);
  --bs-link-color-rgb: 2, 98, 177;
  --bs-link-hover-color: var(--ckc-red);
  --bs-link-hover-color-rgb: 235, 28, 36;
}

body {
  font-family: var(--ff-main);
  color: var(--ckc-slate);
  font-size: 14px;
  background: #fff;
}

a { text-decoration: none; transition: color .2s, background-color .2s, border-color .2s; }
img { max-width: 100%; }

/* Container rộng 1320px nội dung (giống bản Figma 1440 - 2x60) */
@media (min-width: 1400px) {
  .container { max-width: 1344px; }
}

/* Gutter 20px cho các lưới thẻ (giống khoảng cách trong thiết kế) */
.g-20 { --bs-gutter-x: 20px; --bs-gutter-y: 20px; }

.ff-alt { font-family: var(--ff-alt); }
.text-ckc-red { color: var(--ckc-red) !important; }
.text-ckc-blue { color: var(--ckc-blue) !important; }
.text-ckc-navy { color: var(--ckc-navy) !important; }

/* ---------- 2. Nút dùng chung ---------- */
.btn-ckc {
  --bs-btn-font-weight: 700;
  --bs-btn-font-size: 14px;
  --bs-btn-padding-x: 28px;
  --bs-btn-padding-y: 13px;
  --bs-btn-border-radius: 1000px;
  letter-spacing: .05em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-ckc-red {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ckc-red);
  --bs-btn-border-color: var(--ckc-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #c9141b;
  --bs-btn-hover-border-color: #c9141b;
  --bs-btn-active-bg: #b01218;
  --bs-btn-active-border-color: #b01218;
  --bs-btn-active-color: #fff;
}
.btn-ckc-outline-red {
  --bs-btn-color: var(--ckc-red);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--ckc-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ckc-red);
  --bs-btn-hover-border-color: var(--ckc-red);
  --bs-btn-active-bg: var(--ckc-red);
  --bs-btn-active-color: #fff;
}
.btn-ckc-glass {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgba(255, 255, 255, .1);
  --bs-btn-border-color: rgba(255, 255, 255, .25);
  --bs-btn-hover-color: var(--ckc-navy);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-color: var(--ckc-navy);
  backdrop-filter: blur(2px);
}
.btn-ckc-outline-white {
  --bs-btn-color: #fff;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: var(--ckc-red);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-color: var(--ckc-red);
}
/* Nút nhỏ "Xem thêm" (chữ thường, cao 42px) */
.btn-pill-sm {
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: 14px;
  --bs-btn-padding-x: 26px;
  --bs-btn-padding-y: 11px;
  --bs-btn-border-radius: 1000px;
  letter-spacing: -.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Nút "Xem tất cả" (tiêu đề tin tức) */
.btn-view-all {
  --bs-btn-font-weight: 500;
  --bs-btn-font-size: 14px;
  --bs-btn-padding-x: 22px;
  --bs-btn-padding-y: 9px;
  --bs-btn-border-radius: 1000px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- 3. Tiêu đề section ---------- */
.section-eyebrow {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.section-title {
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -1px;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ckc-red);
  margin-bottom: 0;
}
.section-title.is-sm { font-size: 26px; letter-spacing: 0; }
.section-bar {             /* gạch ngang 40x3 dưới tiêu đề */
  display: block;
  width: 40px;
  height: 3px;
  background: var(--ckc-red-2);
  margin-top: 10px;
}
.section-head.text-center .section-bar { margin-inline: auto; }

/* Tiêu đề kiểu "C.K.C COMPANY LIMITED" + gạch xanh */
.kicker {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ckc-blue);
  margin-bottom: 0;
}
.kicker::after {
  content: "";
  display: block;
  width: 25px;
  height: 2px;
  background: var(--ckc-blue);
  margin: 12px 0;
}

/* ---------- 4. Topbar ---------- */
.topbar {
  background: var(--ckc-blue);
  font-size: 12px;
  line-height: 16px;
  padding: 10px 0;
}
.topbar .tb-label { color: var(--ckc-sky); }
.topbar .tb-value { color: #fff; font-family: var(--ff-alt); }
.topbar .tb-sep { color: var(--ckc-sky); margin: 0 6px; }
.topbar .tb-eco { font-size: 11px; }
.topbar .tb-eco a { color: #cbd5e1; }
.topbar .tb-eco a:hover { color: #fff; }
.topbar .tb-eco .tb-active {
  background: var(--ckc-sky);
  color: #fff;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

/* ---------- 5. Header / menu chính ---------- */
.site-header {
  background: #fff;
  box-shadow: 0 4px 30px rgba(0, 0, 0, .07);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.site-header .navbar { padding: 13px 0; }
.site-header .navbar-brand img { height: 56px; width: auto; max-width: 160px; object-fit: contain; }
.site-header .nav-link {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ckc-menu);
  padding: 8px 0 !important;
  position: relative;
}
.site-header .navbar-nav { gap: 40px; }
.site-header .nav-link:hover,
.site-header .nav-link.active { color: var(--ckc-blue); }
.site-header .nav-link.active::after {   /* gạch chân mục đang mở */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--ckc-red);
}
.site-header .nav-home { color: var(--ckc-blue); font-size: 20px; line-height: 1; }
.site-header .navbar-toggler { border: 0; font-size: 28px; color: var(--ckc-blue); box-shadow: none; }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  height: 600px;
  overflow: hidden;
  background: var(--ckc-navy);
  color: #fff;
}
.hero.hero-sm { height: 450px; }
.hero-slider,
.hero-slider .owl-stage-outer,
.hero-slider .owl-stage,
.hero-slider .owl-item,
.hero-slide { height: 100%; }
.hero-slide { position: relative; overflow: hidden; }
/* Trước khi Owl khởi tạo: chỉ hiện slide đầu, tránh nháy chồng các slide */
.hero-slider:not(.owl-loaded) { display: block; }
.hero-slider:not(.owl-loaded) .hero-slide:not(:first-child) { display: none; }
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Lớp phủ gradient xanh đậm bên trái (rộng 850/1440) */
.hero-overlay {
  position: absolute;
  inset: 0 auto 0 0;
  width: 59%;
  background: linear-gradient(270deg,
    rgba(5, 45, 93, 0) 0%,
    rgba(5, 45, 93, .35) 22%,
    rgba(5, 45, 93, .61) 38%,
    rgba(5, 45, 93, .9) 64%,
    #052d5d 83%);
}
.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-inner { max-width: 663px; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(6px);
  color: #e2e8f0;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.hero-badge .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ckc-red-2); flex: none; }
.hero-title {
  font-weight: 700;
  font-size: 46px;
  line-height: 1.24;
  letter-spacing: -1.1px;
  text-transform: uppercase;
  color: #fff;
  margin: 20px 0;
}
.hero-desc {
  font-size: 16px;
  line-height: 28px;
  letter-spacing: .5px;
  color: #e2e8f0;
  margin-bottom: 0;
}
.hero-desc strong { color: #fff; }
.hero-actions { margin-top: 59px; display: flex; flex-wrap: wrap; gap: 11px; }
.hero-sm .hero-actions { margin-top: 39px; }

/* Nút điều hướng slider (Owl) dạng ô vuông trắng mờ */
.hero-slider .owl-nav button.owl-prev,
.hero-slider .owl-nav button.owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #fff !important;
  font-size: 20px !important;
  background: rgba(255, 255, 255, .12) !important;
  border-radius: 4px;
  z-index: 3;
  transition: background .2s;
}
.hero-slider .owl-nav button.owl-prev { left: 11px; }
.hero-slider .owl-nav button.owl-next { right: 11px; }
.hero-slider .owl-nav button:hover { background: rgba(255, 255, 255, .3) !important; }
.hero-slider .owl-nav.disabled { display: none; }
/* Chấm chuyển slide dạng gạch 24x4 */
.hero-slider .owl-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 3;
}
.hero-slider .owl-dots.disabled { display: none; }
.hero-slider .owl-dot span { display: block; width: 24px; height: 4px; background: #fff; opacity: .2; transition: opacity .2s; }
.hero-slider .owl-dot.active span { opacity: 1; }

/* ---------- 7. Breadcrumb ---------- */
.ckc-breadcrumb {
  background: #e6f1f7;
  border-top: 1px solid #d2e5ee;
  border-bottom: 1px solid #d2e5ee;
  padding: 7px 0;
}
.ckc-breadcrumb .breadcrumb { margin: 0; font-size: 14px; --bs-breadcrumb-divider: "|"; --bs-breadcrumb-item-padding-x: .6rem; }
.ckc-breadcrumb .breadcrumb-item a { color: #000; font-weight: 300; }
.ckc-breadcrumb .breadcrumb-item.active { color: #000; font-weight: 500; }
.ckc-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #000; }

/* ---------- 8. Nền mây nhạt (dùng cho About / Lĩnh vực) ---------- */
.bg-soft-cloud {
  position: relative;
  isolation: isolate;
}
.bg-soft-cloud::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: min(100%, 760px);      /* chỉ phủ phần đầu section, mờ dần xuống trắng */
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, #fff 100%),
    url("../images/ckc/bg-soft.webp") center top / cover no-repeat;
}

/* ---------- 9. About (Hành trình phát triển) ---------- */
.about-section { padding: 75px 0; }
@media (min-width: 1200px) { .about-media { flex: 0 0 716px; max-width: 716px; } }
.about-img { width: 100%; height: 550px; object-fit: cover; border-radius: 16px; }
.about-title { font-weight: 700; font-size: 32px; letter-spacing: -1px; line-height: 1.3; text-transform: uppercase; color: var(--ckc-red); }
.about-text { font-size: 14px; line-height: 21px; color: var(--ckc-slate); }
.quote-box {
  background: #fff;
  border-left: 4px solid var(--ckc-red-2);
  border-radius: 8px;
  padding: 16px 20px 16px 16px;
  font-weight: 600;
  font-style: italic;
  font-size: 14px;
  line-height: 20px;
  color: var(--ckc-navy);
  box-shadow: inset 0 0 0 1px rgba(229, 26, 36, .0);
}

/* ---------- 10. Timeline (Các cột mốc) ---------- */
.timeline-section { padding: 60px 0 60px; position: relative; }
.timeline-section .glow-line {
  height: 3px;
  max-width: 824px;
  margin: 0 auto 40px;
  background: linear-gradient(90deg, rgba(81, 158, 222, 0), var(--ckc-sky), rgba(81, 158, 222, 0));
  filter: blur(4px);
}
.timeline-card {
  height: 100%;
  min-height: 340px;
  padding: 45px 24px 24px;
  border-radius: 12px;
  border: 1px solid var(--ckc-line);
  background: linear-gradient(180deg, #fff 0%, rgba(254, 242, 242, .3) 100%), var(--ckc-bg-soft);
  display: flex;
  flex-direction: column;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.timeline-card.is-red { border-color: rgba(229, 26, 36, .5); }
.timeline-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(5, 45, 93, .08); }
.timeline-year { font-weight: 700; font-size: 30px; line-height: 36px; color: var(--ckc-navy); margin: 0; }
.timeline-card.is-red .timeline-year,
.timeline-card.is-red .timeline-tag,
.timeline-card.is-red .timeline-icon { color: var(--ckc-red); }
.timeline-icon { font-size: 22px; color: var(--ckc-navy); }
.timeline-card h4 { font-weight: 700; font-size: 16px; line-height: 24px; color: var(--ckc-navy); margin: 30px 0 10px; }
.timeline-card p { font-family: var(--ff-alt); font-size: 13px; line-height: 1.5; color: var(--ckc-slate); margin-bottom: 24px; }
.timeline-card p strong { color: var(--ckc-ink); }
.timeline-card hr { border-color: rgba(81, 158, 222, .2); opacity: 1; margin: 0 0 30px; margin-top: auto; }
.timeline-tag { font-weight: 700; font-size: 14px; line-height: 16.5px; letter-spacing: .3px; text-transform: uppercase; color: var(--ckc-navy); }

/* ---------- 11. Slider ngang dùng chung (scroll-snap) ---------- */
.ckc-slider { position: relative; }
.ckc-slider .slider-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.ckc-slider .slider-track::-webkit-scrollbar { display: none; }
.ckc-slider .slider-item {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 20px * (var(--per-view, 4) - 1)) / var(--per-view, 4));
}
/* Nút tròn trắng 40px hai bên */
.slider-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--ckc-blue);
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .07);
  transition: background .2s, color .2s;
}
.slider-btn:hover,
.slider-btn.is-solid { background: var(--ckc-blue); color: #fff; }
.slider-btn.is-solid:hover { background: var(--ckc-navy); }
.slider-btn:disabled { opacity: .45; cursor: default; }
.ckc-slider > .slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.ckc-slider > .slider-prev { left: -20px; }
.ckc-slider > .slider-next { right: -20px; }

/* ---------- 12. Lĩnh vực hoạt động ---------- */
.fields-section { padding: 60px 0; }
.fields-title { font-weight: 700; font-size: 30px; letter-spacing: -1px; text-transform: uppercase; color: var(--ckc-red); }
.field-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  height: 550px;
  border-radius: 12px;
  overflow: hidden;
  padding: 0 25px 20px;
  color: #fff;
  isolation: isolate;
}
.field-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .5s;
}
.field-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(2, 98, 177, 0) 35%, var(--ckc-blue) 100%);
}
.field-card:hover img { transform: scale(1.05); }
.field-card h3 { font-weight: 700; font-size: 24px; letter-spacing: -1px; text-transform: uppercase; color: #fff; margin-bottom: 10px; }
.field-offset { margin-top: 80px; }   /* thẻ thứ 2 lệch xuống 80px */
@media (min-width: 1200px) {
  .fields-intro { flex: 0 0 384px; max-width: 384px; margin-right: 52px; }   /* cột chữ rộng 384px như thiết kế */
  .news-section .col-event { flex: 0 0 55.36%; max-width: 55.36%; }          /* ảnh sự kiện rộng 720px */
}

/* ---------- 13. Thương hiệu + bộ lọc + thẻ sản phẩm ---------- */
.products-section { padding: 60px 0; }
.brand-card {
  display: block;
  height: 100%;
  text-align: center;
  padding: 16px;
  background: #fff;
  border: .5px solid #dce5ed;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: border-color .2s, box-shadow .2s;
}
.brand-card:hover { border-color: var(--ckc-red); box-shadow: 0 6px 20px rgba(5, 45, 93, .08); }
.brand-card .bc-name { font-weight: 800; font-size: 18px; line-height: 28px; color: var(--ckc-navy); display: block; }
.brand-card .bc-name.is-red { color: var(--ckc-red); }
.brand-card .bc-sub { font-weight: 500; font-size: 12px; line-height: 15px; color: var(--ckc-slate); text-transform: uppercase; display: block; margin-top: 2px; }

.filter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.filter-btn {
  font-weight: 600;
  font-size: 13px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--ckc-navy);
  background: #fff;
  border: 1px solid var(--ckc-line);
  border-radius: 4px;
  padding: 10px 20px;
  transition: all .2s;
}
.filter-btn:hover { border-color: var(--ckc-red); color: var(--ckc-red); }
.filter-btn.active {
  background: var(--ckc-red);
  border-color: var(--ckc-red);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.product-card {
  height: 100%;
  background: #fff;
  border: .5px solid #d8e4ee;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .25s, transform .25s;
}
.product-card:hover { box-shadow: 0 14px 34px rgba(5, 45, 93, .1); transform: translateY(-3px); }
.product-media { position: relative; padding: 20px; }
.product-media img { width: 100%; aspect-ratio: 386 / 216; object-fit: cover; display: block; }
.p-badge {
  position: absolute;
  font-weight: 700;
  font-size: 10px;
  line-height: 15px;
  text-transform: uppercase;
  color: #fff;
  border-radius: 4px;
  padding: 2px 8px;
}
.p-badge.tl { top: 12px; left: 12px; padding: 4px 10px; }
.p-badge.tr { top: 12px; right: 12px; }
.bg-ckc-navy { background: var(--ckc-navy) !important; }
.bg-ckc-red { background: var(--ckc-red) !important; }
.bg-ckc-green { background: var(--ckc-green) !important; }
.bg-ckc-blue { background: var(--ckc-blue) !important; }

.product-body { padding: 0 24px 24px; display: flex; flex-direction: column; flex: 1; }
.product-line { font-weight: 600; font-size: 12px; line-height: 16.5px; text-transform: uppercase; color: var(--ckc-red); margin-bottom: 4px; }
.product-name { font-weight: 700; font-size: 18px; line-height: 28px; color: var(--ckc-navy); margin-bottom: 8px; }
.spec-table { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 8px; }
.spec-table > div {
  text-align: center;
  padding: 10px 4px;
  border: .5px solid rgba(67, 90, 119, .1);
}
.spec-table span { display: block; font-size: 12px; line-height: 16px; color: var(--ckc-slate); }
.spec-table strong { display: block; font-size: 14px; line-height: 16px; color: var(--ckc-navy); }
.spec-table strong.is-red { color: var(--ckc-red); }
.product-desc { font-size: 13px; line-height: 19.5px; color: var(--ckc-slate); margin-bottom: 24px; }
.product-actions { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.product-actions .btn { --bs-btn-font-size: 13px; --bs-btn-padding-y: 9px; letter-spacing: 0; }
.product-empty { display: none; }
@media (max-width: 575.98px) {
  .product-actions { flex-wrap: nowrap; }
  .product-actions .btn { flex: 1 1 0; justify-content: center; --bs-btn-padding-x: 10px; }
}

.btn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 48px;
  background: #f3f9ff;
  border: 1px solid #ebf6ff;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--ckc-blue);
}
.btn-more:hover { background: var(--ckc-blue); color: #fff; }

/* ---------- 14. Showroom (nền xanh) ---------- */
.showroom-section { background: var(--ckc-blue); padding: 80px 0; color: #fff; }
.showroom-section .section-title { color: #fff; }
.showroom-section .section-bar { background: #fff; }
.showroom-section .lead-text { font-size: 14px; line-height: 20px; color: #fff; max-width: 370px; }
.showroom-card {
  height: 100%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.showroom-card .sr-media { padding: 20px 20px 20px; }
.showroom-card .sr-media img { width: 100%; height: 216px; object-fit: cover; display: block; }
.showroom-card .sr-body { padding: 0 24px 24px; display: flex; flex-direction: column; flex: 1; }
.sr-tag { font-weight: 700; font-size: 10px; text-transform: uppercase; color: #fff; padding: 4px 10px; border-radius: 4px; }
.sr-icon { font-size: 18px; }
.sr-name { font-weight: 700; font-size: 18px; color: var(--ckc-ink); margin: 8px 0 8px; }
.sr-info { list-style: none; padding: 0; margin: 0 0 16px; font-size: 12px; line-height: 18px; color: var(--ckc-muted); }
.sr-info li { display: flex; gap: 8px; margin-bottom: 8px; }
.sr-info li i { color: var(--ckc-ink); font-size: 11px; margin-top: 3px; }
.sr-info strong { color: var(--ckc-ink); font-family: var(--ff-alt); font-weight: 700; }
.sr-info .hotline,
.sr-info .hotline strong { color: var(--ckc-red); }
.sr-map { margin-top: auto; font-weight: 600; font-size: 12px; color: var(--ckc-red-2); display: inline-flex; align-items: center; gap: 6px; }
.sr-map:hover { color: var(--ckc-blue); }

/* ---------- 15. Sự kiện & Tin tức ---------- */
.news-section { background: var(--ckc-bg-soft); padding: 80px 0; }
.news-head-title { font-weight: 700; font-size: 30px; letter-spacing: .3px; text-transform: uppercase; color: var(--ckc-red); margin: 0; }
.event-main img { width: 100%; height: 396px; object-fit: cover; border-radius: 6px; display: block; }
.event-meta { font-size: 12px; line-height: 16px; color: var(--ckc-slate); margin: 20px 0 8px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.event-meta i { color: var(--ckc-red-2); margin-right: 4px; }
.event-meta .cat { font-weight: 600; text-transform: uppercase; color: var(--ckc-red-2); }
.event-title { font-weight: 700; font-size: 20px; line-height: 30px; color: #0f2d59; margin-bottom: 10px; }
.event-title a { color: inherit; }
.event-title a:hover { color: var(--ckc-red); }
.event-desc { font-size: 16px; line-height: 24px; color: var(--ckc-slate); margin: 0; }
.news-item { display: flex; gap: 20px; }
.news-item + .news-item { margin-top: 13px; }
.news-item .thumb { flex: 0 0 241px; height: 129px; border-radius: 6px; overflow: hidden; }
.news-item .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.news-item:hover .thumb img { transform: scale(1.06); }
.news-cat { font-weight: 500; font-size: 11px; line-height: 16.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--ckc-red); margin-bottom: 6px; }
.news-title { font-weight: 700; font-size: 14px; line-height: 19.25px; color: #0f2d59; margin-bottom: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-title a { color: inherit; }
.news-title a:hover { color: var(--ckc-red); }
.news-meta { font-size: 11px; line-height: 16.5px; color: var(--ckc-slate); }
.news-meta a { font-weight: 600; color: var(--ckc-blue); }

/* ---------- 16. Hình ảnh / Video ---------- */
.media-section { padding: 60px 0 0; }
.media-title { font-weight: 700; font-size: 30px; letter-spacing: .3px; text-transform: uppercase; color: var(--ckc-red); margin: 0; }
.media-thumb { display: block; position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 429 / 282; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.media-thumb:hover img { transform: scale(1.05); }
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .3);
  color: var(--ckc-red);
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px;
}

/* ---------- 17. Đối tác ---------- */
.partners-section { padding: 60px 0; }
.partners-section .section-title { margin-bottom: 26px; }
.partner-logo {
  height: 115px;
  border: .5px solid #d3dae5;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  transition: box-shadow .2s, border-color .2s;
}
.partner-logo:hover { border-color: var(--ckc-sky); box-shadow: 0 6px 18px rgba(5, 45, 93, .08); }
.partner-logo img { max-height: 90px; width: 100%; object-fit: contain; }

/* ---------- 18. CTA đỏ (Giới thiệu) ---------- */
.cta-red {
  background: var(--ckc-red);
  border-radius: 12px;
  padding: 24px;
  color: #fff;
}
.cta-red .cta-icon { font-size: 50px; line-height: 1; }
.cta-red h3 { font-weight: 700; font-size: 20px; line-height: 24px; text-transform: uppercase; color: #fff; margin-bottom: 4px; }
.cta-red p { font-size: 14px; margin: 0; }
.cta-red .btn-ckc { --bs-btn-border-width: 1.3px; }

/* ---------- 19. Trang Giới thiệu ---------- */
.intro-section { padding: 80px 0; }
.intro-nav { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 8px; }
.intro-nav a {
  display: block;
  padding: 12px 26px;
  border-radius: 1000px;
  border: .6px solid var(--ckc-slate);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ckc-slate);
}
.intro-nav a.is-red { border-color: var(--ckc-red); color: var(--ckc-red); }
.intro-nav a:hover { border-color: var(--ckc-red); color: var(--ckc-red); }
.intro-nav a.active { background: var(--ckc-red); border-color: var(--ckc-red); color: #fff; }
.intro-h { font-weight: 700; font-size: 28px; letter-spacing: -1px; line-height: 1.3; text-transform: uppercase; color: #000; margin-bottom: 22px; }
.intro-block { scroll-margin-top: 120px; margin-bottom: 40px; }
.intro-block p { font-size: 14px; line-height: 21px; }

/* Sơ đồ hệ sinh thái: logo tròn xoay quanh tâm */
.eco-orbit {
  position: relative;
  width: 445px;
  height: 437px;
  margin: 30px auto;
  max-width: 100%;
}
.eco-orbit .ring {
  position: absolute;
  left: 55px;
  top: 50px;
  width: 336px;
  height: 336px;
  border-radius: 50%;
  border: 5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #0262b1, #5fb7ff, #0262b1) border-box;
  opacity: .25;
}
.eco-center {
  position: absolute;
  left: 125px;
  top: 120px;
  width: 197px;
  height: 197px;
  border-radius: 50%;
  background: rgba(242, 246, 249, .4);
  padding: 12px;
}
.eco-center .l2,
.eco-center .l3 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eco-center .l2 { background: #f2f6f9; padding: 13px; }
.eco-center .l3 { background: #fff; padding: 11px; }
.eco-center .core {
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background: linear-gradient(180deg, #0867d2, #04356c);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.eco-center .core img { width: 97px; }
.eco-node {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(242, 246, 249, .4);
  padding: 9px;
}
.eco-node span {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #e7eef4;
  padding: 7px;
}
.eco-node img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
  padding: 14px;
}

/* Hai trụ cột chiến lược */
.pillar-card {
  height: 100%;
  border-radius: 12px;
  padding: 48px 32px;
  border: 1px solid var(--ckc-line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  position: relative;
  overflow: hidden;
  background: #fff;
}
.pillar-card::before {          /* vạch xanh 6px trên đầu thẻ trắng */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--ckc-blue);
}
.pillar-card.is-blue { background: var(--ckc-blue); border-color: var(--ckc-blue); color: #fff; }
.pillar-card.is-blue::before { content: none; }
.pillar-icon { width: 48px; height: 48px; border-radius: 4px; background: rgba(0, 63, 122, .1); color: var(--ckc-navy); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 24px; }
.pillar-card.is-blue .pillar-icon { background: rgba(255, 255, 255, .1); color: #fff; }
.pillar-no { font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--ckc-navy); margin-bottom: 16px; }
.pillar-card h3 { font-weight: 700; font-size: 20px; line-height: 30px; text-transform: uppercase; color: var(--ckc-ink); margin-bottom: 16px; }
.pillar-card ul { list-style: none; padding: 0; margin: 0 0 24px; }
.pillar-card li { display: flex; gap: 6px; font-size: 14px; line-height: 21px; color: var(--ckc-slate); margin-bottom: 20px; }
.pillar-card li i { font-size: 13px; color: var(--ckc-navy); margin-top: 1px; }
.pillar-goal { font-weight: 600; font-size: 16px; line-height: 24px; color: var(--ckc-ink); margin: 0; }
.pillar-card.is-blue .pillar-no,
.pillar-card.is-blue h3,
.pillar-card.is-blue li,
.pillar-card.is-blue li i,
.pillar-card.is-blue .pillar-goal { color: #fff; }

/* ---------- 20. Form báo giá (Sản phẩm) ---------- */
.quote-section { background: #edf3fa; padding: 70px 0; }
.quote-box-wrap {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .1), 0 10px 15px rgba(0, 0, 0, .1);
}
@media (min-width: 992px) { .quote-col-info { flex: 0 0 41.75%; max-width: 41.75%; } }   /* cột xanh rộng 551/1320 */
.quote-info { background: var(--ckc-blue); color: #fff; padding: 40px; height: 100%; }
.quote-info .q-badge { display: inline-block; background: var(--ckc-red-2); border: .3px solid #fff; border-radius: 4px; padding: 4px 10px; font-weight: 700; font-size: 10px; line-height: 15px; text-transform: uppercase; }
.quote-info h3 { font-weight: 800; font-size: 26px; line-height: 1.5; text-transform: uppercase; color: #fff; margin: 12px 0 8px; }
.quote-info .q-desc { font-size: 13px; line-height: 19.5px; margin-bottom: 20px; }
.q-contact { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.q-contact .ic { width: 32px; height: 32px; border-radius: 4px; background: rgba(81, 158, 222, .2); color: var(--ckc-sky); display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.q-contact small { display: block; font-size: 11px; line-height: 16px; color: #b0c0d6; }
.q-contact strong { display: block; font-size: 14px; line-height: 20px; color: #fff; }
.quote-info hr { border-color: #2680cb; opacity: 1; margin: 16px 0 12px; }
.quote-info .q-note { font-size: 11px; margin: 0; }
.quote-form { padding: 40px; }
.quote-form .form-label { font-weight: 700; font-size: 12px; line-height: 16px; text-transform: uppercase; color: var(--ckc-ink); margin-bottom: 4px; }
.quote-form .form-control,
.quote-form .form-select {
  background-color: var(--ckc-bg-soft);
  border: 1px solid var(--ckc-line);
  border-radius: 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--ckc-ink);
  padding: 11px 14px;
}
.quote-form .form-control::placeholder { color: var(--ckc-slate); }
.quote-form .form-control:focus,
.quote-form .form-select:focus { border-color: var(--ckc-sky); box-shadow: 0 0 0 .2rem rgba(81, 158, 222, .2); }
.quote-form .btn-submit {
  width: 100%;
  background: var(--ckc-red-2);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 12px;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.quote-form .btn-submit:hover { background: #c9141b; }

/* ---------- 21. Footer ---------- */
.site-footer {
  background: var(--ckc-blue);
  border-top: 4px solid var(--ckc-red-2);
  color: #fff;
  padding: 60px 0 16px;
}
.f-brand { display: flex; align-items: center; gap: 19px; margin-bottom: 30px; }
.f-brand .f-logo { height: 52px; width: auto; filter: brightness(0) invert(1); }   /* logo trắng */
.f-brand .f-divider { width: 1px; height: 49px; background: #fff; }
.f-brand .f-name { font-weight: 700; font-size: 24px; letter-spacing: -.02em; line-height: 1; }
.f-brand .f-group { background: var(--ckc-sky); border-radius: 5px; font-weight: 700; font-size: 12px; letter-spacing: .02em; padding: 2px 8px; margin-left: 14px; }
.f-brand .f-company { font-weight: 600; font-size: 16px; letter-spacing: .02em; margin-top: 11px; text-transform: uppercase; }
.f-about { font-size: 14px; line-height: 22px; margin-bottom: 26px; }
.f-legal {
  background: rgba(81, 158, 222, .2);
  border: 1px solid rgba(81, 158, 222, .4);
  border-radius: 8px;
  padding: 12px;
  font-family: var(--ff-alt);
  font-size: 14px;
  line-height: 16px;
}
.f-legal p { margin-bottom: 6px; }
.f-legal p:last-child { margin: 0; font-size: 12px; line-height: 18px; }
.f-title { font-weight: 700; font-size: 17px; letter-spacing: .7px; text-transform: uppercase; color: #fff; margin-bottom: 12px; }
.f-branch { margin-bottom: 16px; font-size: 14px; line-height: 21px; }
.f-branch strong { display: block; }
.f-branch span { color: #cbd5e1; }
.f-links { list-style: none; padding: 0; margin: 0 0 12px; }
.f-links li { margin-bottom: 8px; }
.f-links a { font-size: 14px; line-height: 21px; color: #cbd5e1; }
.f-links a:hover { color: #fff; }
.f-hotline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ckc-red-2);
  border: .5px solid #fff;
  border-radius: 4px;
  padding: 6px 12px;
  font-family: var(--ff-alt);
  font-weight: 700;
  font-size: 12px;
  color: #fff;
}
.f-hotline:hover { background: #fff; color: var(--ckc-red); }
.f-bottom { border-top: .5px solid #2680cb; margin-top: 45px; padding-top: 14px; font-size: 13px; color: var(--ckc-sky); }
.f-bottom strong { color: #fff; font-weight: 400; }
.f-bottom a { color: var(--ckc-sky); }
.f-bottom a:hover { color: #fff; }

/* ---------- 22. Responsive ---------- */
@media (max-width: 1399.98px) {
  .site-header .navbar-nav { gap: 24px; }
}
@media (max-width: 1199.98px) {
  /* Menu thu gọn trên tablet/mobile */
  .site-header .navbar-nav { gap: 0; padding: 12px 0; }
  .site-header .nav-link { padding: 12px 0 !important; border-bottom: 1px solid var(--ckc-line); }
  .site-header .nav-link.active::after { display: none; }
  .hero-overlay { width: 100%; background: linear-gradient(90deg, #052d5d 0%, rgba(5, 45, 93, .75) 60%, rgba(5, 45, 93, .35) 100%); }
  .ckc-slider > .slider-prev { left: -8px; }
  .ckc-slider > .slider-next { right: -8px; }
  .field-card { height: 460px; }
  .intro-nav { position: static; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 991.98px) {
  .hero { height: auto; min-height: 560px; }
  .hero.hero-sm { min-height: 420px; }
  .hero-content { padding-top: 70px; padding-bottom: 80px; }
  .hero-title { font-size: 36px; }
  .about-img { height: auto; aspect-ratio: 716 / 550; }
  .field-offset { margin-top: 0; }
  .ckc-slider .slider-item { flex-basis: calc((100% - 20px) / 2); }
  .eco-orbit { transform: scale(.85); transform-origin: top center; margin-bottom: -40px; }
}
@media (max-width: 767.98px) {
  body { font-size: 14px; }
  .hero-title { font-size: 28px; }
  .hero-desc { font-size: 14px; line-height: 24px; }
  .hero-actions { margin-top: 32px; }
  .hero-slider .owl-nav { display: none; }   /* mobile: vuốt + chấm */
  .section-title, .fields-title, .news-head-title, .media-title { font-size: 24px; }
  .about-title { font-size: 24px; }
  .intro-h { font-size: 22px; }
  .about-section, .timeline-section, .fields-section, .products-section,
  .showroom-section, .news-section, .intro-section, .partners-section { padding: 48px 0; }
  .ckc-slider .slider-item { flex-basis: 85%; }
  .ckc-slider > .slider-btn { display: none; }
  .news-item .thumb { flex-basis: 130px; height: 90px; }
  .news-title { margin-bottom: 6px; }
  .event-main img { height: 230px; }
  .event-title { font-size: 17px; line-height: 26px; }
  .event-desc { font-size: 14px; }
  .quote-info, .quote-form { padding: 24px; }
  .eco-orbit { transform: scale(.7); margin-bottom: -120px; margin-top: 0; }
  .cta-red { text-align: center; }
  .f-brand { flex-wrap: wrap; }
}
@media (max-width: 400px) {
  .eco-orbit { transform: scale(.62); margin-bottom: -160px; margin-left: -40px; }
}


/* =========================================================
   23. Bổ sung khi tích hợp CMS
   ========================================================= */
body { font-family: var(--ff-main); }
.text-ckc-sky { color: var(--ckc-sky) !important; }
.site-main { display: block; }

/* Menu con (desktop hover, mobile luôn hiện dạng danh sách) */
.site-header .dropdown-hover { position: relative; }
.site-header .nav-sub {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  min-width: 230px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(5, 45, 93, .12);
}
.site-header .nav-sub a { display: block; padding: 8px 18px; font-size: 14px; font-weight: 500; color: var(--ckc-menu); }
.site-header .nav-sub a:hover { color: var(--ckc-red); background: var(--ckc-bg-soft); }
@media (min-width: 1200px) {
  .site-header .nav-sub {
    position: absolute;
    top: 100%;
    left: -18px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all .2s;
    z-index: 10;
  }
  .site-header .dropdown-hover:hover > .nav-sub { opacity: 1; visibility: visible; transform: none; }
}
@media (max-width: 1199.98px) {
  .site-header .nav-sub { box-shadow: none; padding: 0 0 8px 16px; min-width: 0; }
  .site-header .nav-sub a { padding: 6px 0; }
}

/* Breadcrumb do class BreadCrumbs sinh ra (ol.breadcrumb + span) */
.ckc-breadcrumb .breadcrumb-item a span { color: inherit; }
.ckc-breadcrumb .breadcrumb-item.active a { color: #000; font-weight: 500; pointer-events: none; }

/* Mô tả CKEditor trong các khối */
.hero-desc p, .about-text p, .lead-text p, .q-desc p, .q-note p, .f-about p { margin-bottom: .5em; }
.hero-desc p:last-child, .about-text p:last-child, .lead-text p:last-child, .q-desc p:last-child, .q-note p:last-child { margin-bottom: 0; }
.f-legal p { margin-bottom: 6px; }
.timeline-desc { font-family: var(--ff-alt); font-size: 13px; line-height: 1.5; color: var(--ckc-slate); margin-bottom: 24px; }
.timeline-desc strong, .timeline-desc b { color: var(--ckc-ink); }
.timeline-icon { width: 24px; height: 24px; object-fit: contain; }
.vehicle-intro { max-width: 780px; font-size: 14px; line-height: 1.5; }
.product-name a { color: inherit; }
.product-name a:hover { color: var(--ckc-red); }
.product-media { display: block; }
.product-desc.text-split { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.event-desc.text-split, .news-card-desc.text-split { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.event-meta a.cat:hover { color: var(--ckc-blue); }
.q-contact a { color: inherit; }
.q-contact a:hover strong { text-decoration: underline; }
.f-company { white-space: normal; }

/* Thẻ tin (trang danh sách tin) */
.news-page .section-title { font-size: 28px; }
.news-card { height: 100%; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); border: .5px solid #d8e4ee; display: flex; flex-direction: column; transition: box-shadow .25s, transform .25s; }
.news-card:hover { box-shadow: 0 14px 34px rgba(5, 45, 93, .1); transform: translateY(-3px); }
.news-card-thumb { display: block; aspect-ratio: 429 / 282; overflow: hidden; }
.news-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.news-card:hover .news-card-thumb img { transform: scale(1.05); }
.news-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.news-card .news-title { -webkit-line-clamp: 2; margin-bottom: 8px; font-size: 16px; line-height: 1.45; }
.news-card-desc { font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
.news-more { margin-top: auto; font-weight: 600; font-size: 13px; color: var(--ckc-red); display: inline-flex; gap: 6px; align-items: center; }
.news-more:hover { color: var(--ckc-blue); }

/* Chi tiết tin */
.title-detail-main { font-weight: 700; font-size: 28px; line-height: 1.35; color: var(--ckc-navy); margin-bottom: 12px; }
.news-sidebar { background: var(--ckc-bg-soft); border-radius: 12px; padding: 20px; }
.news-sidebar-title { font-weight: 700; font-size: 18px; text-transform: uppercase; color: var(--ckc-red); margin-bottom: 16px; }
.news-sidebar .news-item .thumb { flex: 0 0 120px; height: 72px; }
.news-sidebar .news-title { font-size: 14px; margin-bottom: 4px; }
.sticky-inside { position: sticky; top: 110px; }

/* Chi tiết xe + thư viện ảnh (dùng chung cho chi tiết lĩnh vực) */
.pd-gallery .pd-main { position: relative; display: block; border-radius: 12px; overflow: hidden; background: var(--ckc-bg-soft); }
.pd-gallery .pd-main img { width: 100%; aspect-ratio: 19 / 12; object-fit: cover; display: block; }
.pd-gallery .pd-main .p-badge.tl { top: 16px; left: 16px; }
.pd-gallery .pd-main .p-badge.tr { top: 16px; right: 16px; }
.pd-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 10px; }
.pd-thumbs a { display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--ckc-line); }
.pd-thumbs img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform .3s; }
.pd-thumbs a:hover img { transform: scale(1.06); }
.pd-title { font-weight: 700; font-size: 30px; line-height: 1.3; color: var(--ckc-navy); margin-bottom: 8px; }
.pd-code { font-size: 14px; margin-bottom: 16px; }
.pd-specs { margin: 16px 0 20px; }
.pd-specs > div { padding: 14px 6px; }
.pd-specs strong { font-size: 16px; }
.pd-desc { font-size: 14px; line-height: 1.6; }
.pd-content { border-top: 1px solid var(--ckc-line); padding-top: 32px; }
.pd-content-title { font-weight: 700; font-size: 22px; text-transform: uppercase; color: var(--ckc-red); margin-bottom: 20px; }

/* Danh sách ý trong thẻ trụ cột (CKEditor: ul > li) */
.pillar-list ul { list-style: none; padding: 0; margin: 0 0 24px; }
.pillar-list li { position: relative; padding-left: 22px; font-size: 14px; line-height: 21px; color: var(--ckc-slate); margin-bottom: 20px; }
.pillar-list li::before { content: "\f058"; font-family: "Font Awesome 6 Pro"; font-weight: 400; position: absolute; left: 0; top: 1px; font-size: 13px; color: var(--ckc-navy); }
.pillar-card.is-blue .pillar-list li, .pillar-card.is-blue .pillar-list li::before { color: #fff; }
.pillar-icon img { width: 20px; height: 20px; object-fit: contain; }
.pillar-card.is-blue .pillar-icon img { filter: brightness(0) invert(1); }

/* Phân trang (Functions::pagination) */
.pagination-home .pagination { justify-content: center; gap: 6px; }
.pagination-home .page-link { border-radius: 6px !important; color: var(--ckc-navy); border-color: var(--ckc-line); min-width: 38px; text-align: center; }
.pagination-home .active > .page-link, .pagination-home .page-link.active { background: var(--ckc-red); border-color: var(--ckc-red); color: #fff; }

/* Nội dung bài viết (CKEditor) */
.content-detail { font-size: 15px; line-height: 1.7; color: #333; }
.content-detail img { max-width: 100%; height: auto !important; }
.content-detail h2, .content-detail h3 { color: var(--ckc-navy); font-weight: 700; margin: 1.2em 0 .6em; }
.content-detail a { color: var(--ckc-blue); text-decoration: underline; }
.content-detail iframe { max-width: 100%; }

/* Nút liên hệ nổi */
.contactFix { position: fixed; right: 0; bottom: 120px; z-index: 50; transition: right .3s; }
.contactFix .item {background: var(--color-main);padding: 6px 14px 6px 8px;border-radius: 30px 0 0 30px;box-shadow: 0 4px 14px rgba(0, 0, 0, .12);color: var(--ckc-navy);font-weight: 600;font-size: 14px;}
.contactFix .item img { width: 32px; height: 32px; }
.contactFix.hide { right: -108px; }

@media (max-width: 767.98px) {
  .title-detail-main, .pd-title { font-size: 22px; }
  .pd-thumbs { grid-template-columns: repeat(4, 1fr); }
  .sticky-inside { position: static; }
}

/* AOS: hiệu ứng fade-left/right dịch phần tử 100px trước khi chạy, chặn tràn ngang trên mobile
   (dùng clip thay vì hidden để không làm hỏng position: sticky) */
html, body { overflow-x: clip; }

/* Hero mobile: chiều cao auto, các slide dài/ngắn khác nhau -> kéo mọi slide cao bằng slide dài nhất */
@media (max-width: 991.98px) {
  .hero-slider .owl-stage { display: flex; }
  .hero-slider .owl-item { display: flex; height: auto; }
  .hero-slide { width: 100%; min-height: 560px; height: auto; }
}

/* ---------- Trang Thư viện hình ảnh / video (giống khối trang chủ) ---------- */
.media-name { margin: 12px 0 0; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--ckc-navy); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.media-count { position: absolute; right: 10px; bottom: 10px; padding: 4px 10px; border-radius: 9999px; background: rgba(5, 45, 93, .75); color: #fff; font-size: 13px; font-weight: 600; }