/*
Theme Name: CCN KAD - Cua Cuon Nhanh
Template: ccn
Description: Lop rieng cho cuacuonnhanh.com: bang mau KAD, pattern trang chu. Base theme "ccn" giu khung, khong sua o day.
Author: ThangLQ
Version: 1.0.0
Requires PHP: 8.2
Text Domain: ccn-kad
*/

/* bảng màu lấy từ site cũ (đo pixel trên ảnh chụp) */
:root {
  --ccn-base: #ffffff;
  --ccn-surface: #f6f8fc;
  --ccn-ink: #141414;
  --ccn-muted: #6b7280;
  --ccn-line: #e3e8ef;
  --ccn-navy: #060b30;
  --ccn-navy-2: #0d1f58;
  --ccn-blue: #1f5b96;
  --ccn-blue-bright: #29a9e1;
  --ccn-blue-light: #6fc1e4;
  --ccn-orange: #e28a31;
  --ccn-orange-dark: #d74e2d;
  --ccn-gradient-hero: linear-gradient(100deg, #060b30 0%, #0d1f58 55%, #1f5b96 100%);
}

/* tinh chỉnh nhỏ riêng site này */
.ccn-h2 { color: var(--ccn-blue); }
.ccn-hero h1 { text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.ccn-pagehead { background: var(--ccn-navy); }
.ccn-footer { background: #0d3a8e; }

/* --- tinh chỉnh theo giao diện cũ --- */
.ccn-logo__mark a { color: var(--ccn-ink); }
.ccn-logo__mark a:hover { color: var(--ccn-blue-bright); }
.ccn-post-body .wp-block-post-featured-image img { max-height: 480px; object-fit: cover; }
.ccn-single { padding-bottom: 40px; }
.ccn-pagehead h1 { text-transform: uppercase; }
/* ẩn icon giỏ hàng/đăng nhập của Woo ở header cho gọn như site cũ */
.ccn-header .wp-block-woocommerce-customer-account,
.ccn-header .wp-block-woocommerce-mini-cart { display: none; }

/* --- Hình thức giữ lại từ WPBakery --- */
.ccn-cols-equal > .wp-block-column { display: flex; flex-direction: column; }
.ccn-cols-middle { align-items: center; }
.ccn-cols-wide { max-width: none; }
.ccn-img-round img { border-radius: 14px; }
.ccn-img-round { overflow: hidden; border-radius: 14px; }
.ccn-img-shadow img { border-radius: 6px; box-shadow: 0 10px 26px rgba(6, 11, 48, .18); }
.ccn-btn .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; }
.ccn-btn__icon { flex: 0 0 auto; }
.ccn-btns.is-content-justification-center { justify-content: center; }
.ccn-btns.is-content-justification-right { justify-content: flex-end; }
.wp-block-separator { margin-left: auto; margin-right: auto; opacity: 1; }
.ccn-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.ccn-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Trang chủ: dải nhấn, đối tác, đánh giá, bước quy trình */
.ccn-band { background: linear-gradient(90deg, #060b30, #0d1f58 55%, #1f5b96); color: #fff; padding: 42px 0; }
.ccn-band .wp-block-heading { color: #fff; margin: 0; font-size: 26px; letter-spacing: .02em; }
.ccn-band .ccn-wrap { text-align: center; }
.ccn-partners { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; align-items: center; }
.ccn-partners .wp-block-image { margin: 0; background: #fff; border: 1px solid var(--ccn-line); border-radius: 10px; padding: 14px; }
.ccn-partners img { width: 100%; height: 64px; object-fit: contain; }
.ccn-review { display: flex; flex-direction: column; gap: 10px; }
.ccn-review .wp-block-image { margin: 0; }
.ccn-review img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.ccn-review__quote { font-size: 14.5px; color: #374151; font-style: italic; margin: 0; }
.ccn-review__name { margin: 0; font-size: 14px; }
.ccn-step img { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; margin-bottom: 10px; }
.ccn-step .wp-block-heading { color: var(--ccn-orange); font-size: 13px; letter-spacing: .08em; margin: 0 0 4px; }
@media (max-width: 1024px) { .ccn-partners { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ccn-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Dải trượt ngang (sản phẩm/đánh giá) — giống slider site cũ, không cần JS */
.ccn-hscroll { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 18px; scrollbar-width: thin; }
.ccn-hscroll > .ccn-card { flex: 0 0 320px; scroll-snap-align: start; }
.ccn-hscroll::-webkit-scrollbar { height: 8px; }
.ccn-hscroll::-webkit-scrollbar-thumb { background: #c9d6e2; border-radius: 4px; }
/* Card cam kết / lý do: khung viền, icon tròn, canh giữa */
.ccn-icon-card--box { border: 1px solid var(--ccn-line); border-radius: 14px; padding: 22px 18px; text-align: center; background: #fff; }
.ccn-icon-card--box .ccn-icon-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: 0 auto 12px; border: 2px solid #b9dcf3; border-radius: 50%; color: var(--ccn-blue); font-weight: 700; }
.ccn-icon-card--box h3 { font-size: 15px; color: var(--ccn-blue); }
.ccn-icon-card--box p { font-size: 13.5px; color: #4b5563; line-height: 1.6; }
.ccn-img-wide img { width: 100%; height: auto; }
.ccn-form { max-width: 640px; margin: 18px auto 0; }
.ccn-form input[type=text], .ccn-form input[type=email], .ccn-form input[type=tel], .ccn-form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #d7dee6; border-radius: 8px; background: #fafafa; }
.ccn-form textarea { min-height: 140px; }
.ccn-form input[type=submit] { background: var(--ccn-blue); color: #fff; border: 0; border-radius: 999px; padding: 10px 26px; cursor: pointer; }
.ccn-hero__note { color: #dbe6f2; font-size: 15px; margin: 0 0 22px; max-width: 520px; }
/* Card sản phẩm: ảnh cùng tỉ lệ, CTA luôn ở đáy, không khoảng trắng thừa */
.ccn-hscroll > .ccn-card { display: flex; flex-direction: column; }
.ccn-hscroll .ccn-card img, .ccn-card > figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.ccn-card__more { margin-top: auto; }
.ccn-card__label { font-weight: 700; color: var(--ccn-blue); margin: 10px 0 4px; }
.ccn-section .ccn-eyebrow { text-align: left; }

/* ---- Trang chủ: bám thiết kế site cũ (Roboto, tiêu đề aqua #6ec1e4) ---- */
.home .ccn-wrap { max-width: 1140px; }
.home .ccn-h2 { color: #6ec1e4; font-size: clamp(26px, 2.6vw, 35px); font-weight: 800; letter-spacing: 0; text-transform: capitalize; margin: 0 0 20px; }
.home .ccn-h2::after { display: none; }
.home .ccn-h2--left { text-align: left; }
.home .ccn-section p { font-size: 18px; line-height: 27px; color: #000; text-align: justify; }
.home .ccn-hero p, .home .ccn-band p { color: inherit; text-align: left; }
.home .ccn-card__title, .home .ccn-card h3 { color: #434053; font-size: 22px; font-weight: 800; text-transform: capitalize; letter-spacing: 0; }
.home .ccn-icon-card h3 { color: #6ec1e4; font-size: 20px; font-weight: 600; text-align: center; text-transform: capitalize; }
.home .ccn-icon-card p { font-size: 15px; line-height: 24px; text-align: center; }
.home .ccn-band .wp-block-heading { font-size: clamp(22px, 2.2vw, 32px); font-weight: 800; }

/* Hero theo site cũ: nền navy, ảnh banner dựng bên phải, chữ bên trái */
.home .ccn-hero { background: radial-gradient(120% 120% at 15% 20%, #0d1f58 0%, #060b30 55%, #04081f 100%); color: #fff; min-height: 560px; display: flex; align-items: center; overflow: hidden; }
.home .ccn-hero__inner { position: relative; z-index: 2; padding: 60px 0; }
.home .ccn-hero__text { max-width: 620px; }
.home .ccn-hero__bg { position: absolute; inset: 0; z-index: 0; background: url("/wp-content/uploads/2024/03/cua-cuon-nhanh-KAD.jpg") center/cover no-repeat; }
.home .ccn-hero h1 { color: #fff; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.25; }
.home .ccn-hero .ccn-hero__sub { color: #7fb6e0; }
.home .ccn-hero__cta .wp-block-button__link { background: #29a9e1; border: 0; border-radius: 999px; padding: 12px 30px; font-weight: 700; }
.home .ccn-hero__cta .wp-block-button__link:hover { background: #1f8fc0; }
@media (max-width: 860px) { .home .ccn-hero__art { opacity: .35; } .home .ccn-hero__text { max-width: 100%; } }

/* Section tuyên ngôn dưới hero (site cũ) */
.home .ccn-hero h1, .home .ccn-hero h1 * { color: #fff; }
.home .ccn-hero__sub { color: rgba(255,255,255,.88); }

/* Số liệu bám site cũ (đo từ Elementor CSS + computed style) */
.home .ccn-h2--dark { color: #6ec1e4; }
.home .ccn-diagram { margin: 0 auto 40px; max-width: 1100px; }
.home .ccn-diagram img { width: 100%; height: auto; display: block; }
.home .ccn-icon-card h3 { color: #434053; }
.home .ccn-partners .wp-block-image { border: 0; background: none; padding: 0; }
.home .ccn-partners img { width: 100px; height: 100px; object-fit: contain; }
.home .ccn-review img { width: 100px; height: 100px; }
.home .ccn-eyebrow { color: #e28a31; }

/* Điểm khác biệt / cam kết: bám site cũ (eyebrow cam, card viền xanh, title cyan có số, icon tròn) */
.home .ccn-section p.ccn-eyebrow { color: #e28a31; text-transform: none; letter-spacing: 0; font-weight: 600; text-align: center; margin: 0 0 8px; }
.home .ccn-h2--dark { max-width: 820px; margin: 0 auto 14px; text-align: center; }
.home .ccn-icon-card--box {
  background: #fff; border: 1px solid #9ed1ef; border-radius: 14px; box-shadow: 0 2px 10px rgba(41,169,225,.06);
  padding: 26px 20px; text-align: center; box-shadow: none;
  display: flex; flex-direction: column; align-items: center; height: 100%;
}
.home .ccn-icon-card__icon {
  width: 56px; height: 56px; border-radius: 50%; border: 1px solid #b9dcf3;
  background: #fff; color: #6ec1e4; display: grid; place-items: center; margin: 0 0 14px;
}
.home .ccn-icon-card h3 { color: #6ec1e4; font-size: 20px; font-weight: 600; margin: 0 0 10px; }
.home .ccn-icon-card p { font-size: 15px; line-height: 24px; text-align: center; color: #4b5563; }
.home .ccn-grid--4 { align-items: stretch; }
/* Form báo giá: viền ô nhập rõ như site cũ, nút teal */
.home .ccn-form input[type="text"], .home .ccn-form input[type="email"],
.home .ccn-form input[type="tel"], .home .ccn-form textarea {
  border: 1px solid #cfd6e0; border-radius: 4px; padding: 10px 12px; background: #fff; width: 100%; box-sizing: border-box;
}
.home .ccn-form input[type="submit"], .home .ccn-form .wpcf7-submit {
  background: #29a9e1; border: 0; border-radius: 4px; color: #fff; font-weight: 700;
  text-transform: uppercase; padding: 12px 30px; cursor: pointer;
}
/* Phân cấp lại tiêu đề phụ + card đều hàng */
.home .ccn-subh { color: #6ec1e4; font-size: 22px; font-weight: 800; text-align: center; letter-spacing: .02em; margin: 0 0 26px; text-transform: uppercase; }
.home .ccn-grid--4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.home .ccn-grid--4 > .ccn-icon-card { height: 100%; }
.home .ccn-icon-card h3 { min-height: 44px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 900px) { .home .ccn-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .home .ccn-grid--4 { grid-template-columns: 1fr; } }
.home .ccn-section p { max-width: none; }
.home .ccn-section > .ccn-wrap > p:not([class]) { max-width: 820px; margin-left: auto; margin-right: auto; }
.home .ccn-grid--4 > *, .home .ccn-grid--4 > * + * { margin-block-start: 0; margin-top: 0; }
.home .ccn-center { max-width: 820px; margin: 0 auto 22px; text-align: center; }
.home .ccn-form { max-width: 640px; margin: 0 auto; }

/* LÝ DO: 3×2 card viền cyan, không icon (đúng site cũ) */
.home .ccn-grid--reasons { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; align-items: stretch; }
.home .ccn-reason { background: #fff; border: 1px solid #b9dcf3; border-radius: 8px; padding: 22px 20px; }
.home .ccn-reason__title { color: #6ec1e4; font-size: 20px; font-weight: 600; margin: 0 0 8px; text-align: left; }
.home .ccn-reason__text { color: #6b7280; font-size: 15px; line-height: 24px; margin: 0; text-align: left; }
@media (max-width: 900px) { .home .ccn-grid--reasons { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* QUY TRÌNH: 3 cột, ảnh tròn 160px, BƯỚC n cam, mũi tên nối (đúng site cũ) */
.home .ccn-grid--steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 34px 30px; align-items: start; }
.home .ccn-step { position: relative; text-align: center; background: none; border: 0; padding: 0; box-shadow: none; }
.home .ccn-step__img { margin: 0 auto 14px; width: 168px; }
.home .ccn-step__img img {
  width: 160px; height: 160px; box-sizing: border-box; border-radius: 50%; object-fit: cover; display: block;
  border: 4px solid #29a9e1; padding: 2px; background: #fff;
}
.home .ccn-step:nth-child(3n) .ccn-step__img img { border-color: #e28a31; }
.home .ccn-step__num { color: #e28a31; font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 4px; }
.home .ccn-step__name { color: #6b7280; font-size: 15px; line-height: 22px; margin: 0; text-align: center; }
.home .ccn-step:nth-child(3n+1)::after, .home .ccn-step:nth-child(3n+2)::after {
  content: "→"; position: absolute; right: -22px; top: 66px; color: #5fc3e8; font-size: 26px; line-height: 1;
}
@media (max-width: 900px) {
  .home .ccn-grid--steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .home .ccn-step:nth-child(3n+1)::after, .home .ccn-step:nth-child(3n+2)::after { content: none; }
}
/* Hero dính liền header: bỏ margin-top của <main> (gây dải trắng 24px) */
.home main.wp-block-group, .home .wp-site-blocks > main { margin-block-start: 0; margin-top: 0; }
/* FIX: ảnh bước tròn đúng 160px, nhãn BƯỚC n rõ ràng, mô tả không justify */
.home .ccn-grid--steps .ccn-step__img,
.home .ccn-grid--steps .wp-block-image.ccn-step__img { width: 160px; min-width: 160px; margin: 0 auto 14px; }
.home .ccn-grid--steps .ccn-step__img img {
  width: 160px; height: 160px; max-width: none; box-sizing: border-box;
  border-radius: 50%; object-fit: cover; border: 4px solid #29a9e1; padding: 2px; background: #fff; display: block;
}
.home .ccn-grid--steps .ccn-step__num {
  display: block; color: #e28a31; font-weight: 800; font-size: 15px; letter-spacing: .05em;
  text-transform: uppercase; margin: 0 0 4px; text-align: center;
}
.home .ccn-section .ccn-step__name, .home .ccn-section p.ccn-step__name {
  text-align: center; color: #6b7280; font-size: 15px; line-height: 22px; margin: 0;
}
.home .ccn-section p.ccn-reason__text { text-align: left; }

/* ===== Đồng bộ cấu trúc theo site cũ (đo từ cuacuonnhanh.com @1366) ===== */
/* GIỚI THIỆU: 2 cột 50/50, ảnh 550x346 bên phải, nút trắng chữ cyan */
.home .ccn-intro { align-items: center; gap: 24px; }
.home .ccn-intro > * { margin-block-start: 0; }
.home .ccn-intro .ccn-img-round, .home .ccn-intro figure img { width: 100%; height: auto; aspect-ratio: 550/346; object-fit: cover; border-radius: 0; }
.home .ccn-btn--white .wp-block-button__link { background: #fff; color: #29a9e1; border-radius: 0; padding: 12px 24px; font-size: 15px; font-weight: 600; }
.home .ccn-btn--white .wp-block-button__link:hover { background: #29a9e1; color: #fff; }
/* Sơ đồ 10 bộ phận: rộng 1100, canh giữa */
.home .ccn-diagram { max-width: 1100px; margin: 0 auto 20px; }
.home .ccn-diagram img { width: 100%; height: auto; border-radius: 0; }
/* LÝ DO: card trong suốt, không viền, chữ canh giữa (đúng site cũ) */
.home .ccn-reason { background: none; border: 0; border-radius: 0; padding: 10px; }
.home .ccn-reason__title { color: #434053; font-size: 20px; font-weight: 600; text-align: center; margin: 0 0 8px; }
.home .ccn-section .ccn-reason__text, .home .ccn-section p.ccn-reason__text { color: #020101; font-size: 16px; line-height: 27px; text-align: center; margin: 0; }
/* TIN TỨC: cột trái danh sách 4 bài (thumb 100), cột phải video */
.home .ccn-news { align-items: flex-start; gap: 24px; }
.home .ccn-news > * { margin-block-start: 0; }
.home .ccn-postlist .wp-block-post-template { display: block; margin: 0; }
.home .ccn-post-row { display: grid; grid-template-columns: 100px 1fr; gap: 14px; align-items: center; padding: 0 0 14px; margin: 0 0 14px; border-bottom: 1px solid #e6e9ee; }
.home .ccn-post-row__thumb, .home .ccn-post-row .wp-block-post-featured-image { width: 100px; height: 100px; margin: 0; }
.home .ccn-post-row__thumb img { width: 100px; height: 100px; object-fit: cover; border-radius: 0; }
.home .ccn-post-row__title, .home .ccn-post-row .wp-block-post-title { font-size: 18px; font-weight: 600; line-height: 25px; margin: 0; }
.home .ccn-post-row__title a { color: #434053; text-decoration: none; }
.home .ccn-media-link { margin: 0; }
.home .ccn-media-link img { width: 100%; height: auto; aspect-ratio: 550/347; object-fit: cover; border-radius: 0; display: block; }
/* ĐỐI TÁC: 4 cột x 3 hàng, khung 1000, ô 164, logo 100 */
.home .ccn-partners--4 { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; }
.home .ccn-partner { display: flex; align-items: center; justify-content: center; padding: 10px; min-height: 164px; }
.home .ccn-partner img { width: 100px; height: 100px; object-fit: contain; border-radius: 0; }
/* Padding riêng từng section theo site cũ (đo: intro 50/50, reasons 0, news 0, partners 0/50) */
.home .ccn-sec-intro { padding: 50px 0; }
.home .ccn-sec-reasons { padding: 0; }
.home .ccn-sec-reasons .ccn-reason { min-height: 213px; display: flex; flex-direction: column; justify-content: center; }
.home .ccn-sec-news { padding: 0; }
.home .ccn-sec-news .ccn-post-row { height: 100px; padding: 0; margin: 0 0 8px; border-bottom: 1px solid #e6e9ee; align-items: center; }
.home .ccn-sec-news .ccn-post-row:last-child { border-bottom: 0; }
.home .ccn-sec-partners { padding: 0 0 50px; }
/* Nút "XEM THÊM" kiểu site cũ: nền trắng, chữ cyan, góc vuông (class thật là is-style-white) */
/* "XEM THEM": nut that - nen trang, vien 2px cyan (goc: 2px solid #29a9e1, padding 12/24, radius 0) */
.home .ccn-btns .is-style-white .wp-block-button__link {
  background: #fff; color: #29a9e1; border: 2px solid #29a9e1; border-radius: 0; padding: 12px 24px;
  font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  transition: background .18s ease, color .18s ease;
}
.home .ccn-btns .is-style-white .wp-block-button__link:hover { background: #29a9e1; color: #fff; }
/* Ảnh giới thiệu: không crop, giữ nguyên khung ảnh gốc */
.home .ccn-sec-intro .ccn-img-round, .home .ccn-sec-intro figure img {
  width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 0;
}
/* TIN TỨC theo site cũ: tiêu đề cột canh giữa, thumb 100, tiêu đề IN HOA, banner cao bằng cột */
.home .ccn-sec-news h2 { text-align: center; }
.home .ccn-sec-news .ccn-news { align-items: stretch; }
.home .ccn-sec-news .ccn-post-row { grid-template-columns: 108px 1fr; gap: 16px; }
.home .ccn-sec-news .ccn-post-row__thumb img,
.home .ccn-sec-news .ccn-post-row .wp-block-post-featured-image img { width: 100px !important; height: 100px !important; max-width: none; object-fit: cover; }
.home .ccn-sec-news .ccn-post-row__title a, .home .ccn-sec-news .wp-block-post-title a {
  font-size: 18px; font-weight: 600; line-height: 25px; color: #434053;
}
.home .ccn-sec-news .ccn-media-link, .home .ccn-sec-news .ccn-media-link a { display: block; height: 100%; }
.home .ccn-sec-news .ccn-media-link img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
/* nút trắng phải thắng rule nền xanh mặc định */
.home .ccn-btns .is-style-white .wp-block-button__link,
.home .ccn-sec-intro .wp-block-button__link {
  background: #fff !important; color: #29a9e1 !important; border: 2px solid #29a9e1 !important;
  border-radius: 0 !important; padding: 12px 24px !important;
  font-size: 15px !important; font-weight: 600 !important;
  letter-spacing: .04em !important; text-transform: uppercase;
}
/* banner video: giữ đúng tỉ lệ 550x347, không kéo cao bằng cột */
.home .ccn-sec-news .ccn-media-link, .home .ccn-sec-news .ccn-media-link a { height: auto; }
.home .ccn-sec-news .ccn-media-link img { height: auto; aspect-ratio: 550 / 347; object-fit: cover; }
/* ĐỐI TÁC: card bo góc viền nhạt, logo phóng theo ô (đúng site cũ) */
.home .ccn-partners--4 { max-width: 1000px; gap: 6px; }
.home .ccn-partner { border: 1px solid #ececec; border-radius: 14px; padding: 8px; min-height: 164px; }
.home .ccn-partner img { width: 100%; height: 100%; max-height: 144px; object-fit: contain; }

/* ================== CSS token đồng bộ theo site gốc (đo computed) ================== */
/* H2: font Roboto (không phải Roboto Condensed), 35/800, line-height 1.0 cho 1 dòng */
.home .ccn-h2, .home .ccn-section h2.ccn-h2 {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 35px; font-weight: 800; line-height: 1; text-transform: none; letter-spacing: normal;
}
/* 3 heading 2 dòng ở site gốc dùng line-height 1.5 */
.home .ccn-sec-intro .ccn-h2, .home .ccn-sec-pvc .ccn-h2, .home .ccn-sec-commit .ccn-h2 { line-height: 1.5; }
/* GIẢM ỒN... tiêu đề màu navy đậm, không capitalize */
.home .ccn-sec-commit .ccn-h2 { color: #434053; text-transform: none; }

/* LÝ DO: card viền cyan 2px, bo 16px, tiêu đề cyan 20/600 không nền, chữ 16/27 */
.home .ccn-sec-reasons .ccn-reason {
  border: 2px solid #29a9e1; border-radius: 16px; padding: 15px 15px 22px; background: #fff;
}
.home .ccn-sec-reasons .ccn-reason__title {
  background: none; color: #29a9e1; font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 20px; font-weight: 600; line-height: 24px; padding: 0; margin: 0 0 12px; text-align: center;
}
.home .ccn-sec-reasons .ccn-reason__text {
  font-family: "Roboto Condensed", Arial, sans-serif; font-size: 16px; line-height: 27px;
  color: #333; text-align: center; margin: 0;
}

/* --- vòng 2: khớp text-transform, font, line-height, cỡ chữ đo từ site gốc --- */
.home .ccn-section h2.ccn-h2, .home .ccn-h2 { text-transform: capitalize; }
.home .ccn-sec-intro .ccn-h2, .home .ccn-section.ccn-sec-intro h2.ccn-h2,
.home .ccn-sec-pvc .ccn-h2, .home .ccn-section.ccn-sec-pvc h2.ccn-h2,
.home .ccn-sec-commit .ccn-h2, .home .ccn-section.ccn-sec-commit h2.ccn-h2 { line-height: 1.5 !important; }
/* body text: Roboto Condensed như site gốc */
.home .ccn-section p, .home .ccn-wrap p, .home .ccn-intro p { font-family: "Roboto Condensed", Arial, sans-serif; }
/* BẢNG GIÁ: đoạn dẫn 16px canh giữa */
.home .ccn-lead, .home .ccn-section p.ccn-lead { font-size: 16px; line-height: 27px; text-align: center; color: #333; }
/* ĐÁNH GIÁ: trích dẫn 16/27, canh giữa, màu #333 */
.home .ccn-review__text, .home .ccn-section p.ccn-review__text { font-size: 16px; line-height: 27px; text-align: center; color: #333; }
/* TIN TỨC: tiêu đề 18/600, lh 1.2, capitalize, Open Sans */
.home .ccn-sec-news .ccn-post-row__title a, .home .ccn-sec-news .wp-block-post-title a {
  font-family: "Open Sans", Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.2;
  color: #434053; text-transform: capitalize;
}
/* --- vòng 3: chốt token còn lệch --- */
.home .ccn-sec-commit .ccn-h2, .home .ccn-section.ccn-sec-commit h2.ccn-h2 { text-transform: none !important; }
.home .ccn-section p.ccn-lead { color: #000; }
.home .ccn-review__quote, .home .ccn-section p.ccn-review__quote {
  font-family: "Roboto Condensed", Arial, sans-serif !important; font-size: 16px !important; line-height: 27px !important;
  color: #333 !important; text-align: center !important;
}
.home .ccn-sec-news .ccn-post-row__title, .home .ccn-sec-news .ccn-post-row__title a, .home .ccn-sec-news .wp-block-post-title a {
  font-family: "Open Sans", Arial, sans-serif !important; font-size: 18px !important; font-weight: 600 !important;
  line-height: 1.2 !important; color: #434053 !important; text-transform: capitalize !important;
}
/* LÝ DO: khớp chiều cao card gốc 353x193 (h3 44px có padding 10/0, p margin 20) */
.home .ccn-sec-reasons .ccn-reason { padding: 15px 15px 15px; }
.home .ccn-sec-reasons .ccn-reason > * { margin-block-start: 0 !important; margin-top: 0 !important; }
.home .ccn-sec-reasons .ccn-reason__title { padding: 10px 0; margin: 0 0 4px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.home .ccn-sec-reasons .ccn-reason__text { margin: 0 0 20px; }
/* card LÝ DO: bỏ padding đáy (gốc dùng 15/15/0 + margin 20 của đoạn) */
.home .ccn-sec-reasons .ccn-reason { padding: 15px 15px 0; }
/* ĐÁNH GIÁ: chữ trích dẫn dùng Roboto (không phải Condensed) như site gốc */
.home .ccn-review__quote, .home .ccn-section p.ccn-review__quote { font-family: Roboto, Arial, sans-serif !important; }

/* ===== QUY TRÌNH: đúng token site gốc (ảnh PNG tròn 251x251 có viền sẵn) ===== */
.home .ccn-grid--steps { gap: 30px 20px; }
.home .ccn-step { padding: 0; }
.home .ccn-grid--steps .ccn-step__img, .home .ccn-grid--steps .wp-block-image.ccn-step__img {
  width: 251px; min-width: 251px; margin: 0 auto 6px;
}
.home .ccn-grid--steps .ccn-step__img img {
  width: 251px; height: 251px; border: 0 !important; padding: 0 !important; border-radius: 0 !important;
  background: none; object-fit: contain; max-width: none; display: block;
}
.home .ccn-step__num, .home .ccn-grid--steps .ccn-step__num {
  font-family: "Roboto Condensed", Arial, sans-serif; font-size: 20px; font-weight: 800; line-height: 27px;
  color: #0099cc; text-transform: none; letter-spacing: normal; margin: 0; text-align: center;
}
.home .ccn-step:first-child .ccn-step__num { color: #f98f1c; }
.home .ccn-section .ccn-step__name, .home .ccn-section p.ccn-step__name {
  font-family: Roboto, Arial, sans-serif; font-size: 16px; font-weight: 400; font-style: italic;
  line-height: 27px; color: #000; text-align: center; margin: 0;
}
/* mũi tên chevron 50px giữa các bước (mũi tên đầu màu cam) */
.home .ccn-step:nth-child(3n+1)::after, .home .ccn-step:nth-child(3n+2)::after {
  content: "❯"; position: absolute; right: -26px; top: 100px; font-size: 50px; line-height: 1; font-family: Arial, sans-serif;
}
.home .ccn-step:nth-child(3n+1)::after { color: #f98f1c; }
.home .ccn-step:nth-child(3n+2)::after { color: #6ec1e4; }
@media (max-width: 1200px) { .home .ccn-grid--steps .ccn-step__img, .home .ccn-grid--steps .ccn-step__img img { width: 200px; height: 200px; min-width: 200px; } }
@media (max-width: 900px) { .home .ccn-step:nth-child(3n+1)::after, .home .ccn-step:nth-child(3n+2)::after { content: none; } }
/* FIX: mỗi bước xếp DỌC (ảnh trên, nhãn BƯỚC dưới, chú thích dưới cùng) */
.home .ccn-grid--steps .ccn-step { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; }
.home .ccn-grid--steps .ccn-step > * { margin-left: 0; margin-right: 0; }
/* FIX badge cam cũ: nhãn BƯỚC chỉ là chữ, không nền/không pill */
.home .ccn-grid--steps .ccn-step__num, .home .ccn-step__num {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; width: auto !important; height: auto !important; min-width: 0 !important;
  color: #0099cc !important; font-size: 20px !important; font-weight: 800 !important; line-height: 27px !important;
  text-transform: none !important; display: block; margin: 0 !important;
}
.home .ccn-grid--steps .ccn-step:first-child .ccn-step__num { color: #f98f1c !important; }
/* FIX: bỏ margin 24px WP chèn giữa các bước -> 3 cột cùng baseline */
.home .ccn-grid--steps > *, .home .ccn-grid--steps > * + * { margin-top: 0 !important; margin-block-start: 0 !important; }

/* ===== 3 fix theo phản hồi: khoảng cách bước, căn giữa title tin, card đánh giá ===== */
/* 1. QUY TRÌNH: sát lại — ảnh -> BƯỚC n -> chú thích */
.home .ccn-grid--steps .ccn-step__img { margin: 0 auto 2px; }
.home .ccn-grid--steps .ccn-step__num { margin: 0 !important; }
.home .ccn-grid--steps .ccn-step__name { margin: 0 !important; }
.home .ccn-grid--steps .ccn-step__img img { margin-bottom: 0 !important; }

/* 2. TIN TỨC: tiêu đề căn giữa theo chiều dọc với thumbnail 100px */
.home .ccn-sec-news .ccn-post-row__body, .home .ccn-sec-news .wp-block-post-title {
  display: flex; align-items: center; min-height: 100px; margin: 0 !important;
}
.home .ccn-sec-news .ccn-post-row__title, .home .ccn-sec-news .wp-block-post-title { margin: 0 !important; }
.home .ccn-sec-news .ccn-post-row { align-items: center; }

/* 3. ĐÁNH GIÁ: card 353x332, bo 20px, padding 20, shadow, tên 20/800, quote 16/27 #333 */
.home .ccn-review {
  background: #fff; border: 0; border-radius: 20px; padding: 20px; box-shadow: rgba(0,0,0,.5) 0 0 10px 1px;
}
.home .ccn-review > * { margin-block-start: 0 !important; margin-top: 0 !important; }
.home .ccn-review img { width: 100px; height: 100px; object-fit: contain; border-radius: 0; display: block; margin: 0 auto; }
.home .ccn-review__name, .home .ccn-section .ccn-review__name {
  font-family: "Roboto Condensed", Arial, sans-serif !important; font-size: 20px !important; font-weight: 800 !important;
  line-height: 27px !important; color: #333 !important; text-align: center !important; margin: 0 !important;
}
.home .ccn-review__quote, .home .ccn-section p.ccn-review__quote {
  font-family: Roboto, Arial, sans-serif !important; font-size: 16px !important; line-height: 27px !important;
  color: #333 !important; text-align: center !important; margin: 0 !important;
}
/* bước: bỏ gap flex + margin thừa, chỉ giữ 4px giữa ảnh và nhãn */
.home .ccn-grid--steps .ccn-step { gap: 0 !important; row-gap: 0 !important; }
.home .ccn-grid--steps .ccn-step__img { margin: 0 auto 4px !important; }
.home .ccn-grid--steps .ccn-step__img img { margin: 0 !important; display: block; }
.home .ccn-grid--steps .ccn-step__num { line-height: 24px !important; margin: 0 !important; }
.home .ccn-grid--steps .ccn-step__name { margin: 2px 0 0 !important; }
/* đánh giá: thứ tự avatar -> tên -> nội dung (như site gốc), không in nghiêng */
.home .ccn-review__quote, .home .ccn-section p.ccn-review__quote { font-style: normal !important; }
.home .ccn-section h3.ccn-review__name { margin: 6px 0 2px !important; }
/* avatar thay thế khi thiếu ảnh: chữ viết tắt trong vòng tròn cyan, cùng 100px */
.home .ccn-review__avatar-ph {
  width: 100px; height: 100px; border-radius: 50%; background: #29a9e1; color: #fff;
  font: 800 30px/100px "Roboto Condensed", Arial, sans-serif; text-align: center; margin: 0 auto;
}

/* ===== vòng 3 theo phản hồi ===== */
/* QUY TRÌNH: ảnh -> BƯỚC n cách ~10px, BƯỚC n -> mô tả sát lại */
.home .ccn-grid--steps .ccn-step__img { margin: 0 auto 10px !important; }
.home .ccn-grid--steps .ccn-step__num { margin: 0 !important; line-height: 26px !important; }
.home .ccn-grid--steps .ccn-step__name { margin: -2px 0 0 !important; }

/* BOX cao bằng nhau (đánh giá + lý do) */
.home .ccn-grid--3, .home .ccn-grid--4 { align-items: stretch; }
.home .ccn-review { display: flex; flex-direction: column; height: 100%; }
.home .ccn-review .ccn-review__quote { flex: 1 1 auto; }
.home .ccn-review .ccn-review__name { flex: 0 0 auto; }
.home .ccn-sec-reasons .ccn-reason { height: 100%; }

/* ĐỐI TÁC: bỏ viền từng logo, chỉ 1 viền ngoài; ô bằng nhau */
.home .ccn-partners--4 {
  border: 2px solid #ededed; border-radius: 20px; overflow: hidden;
  max-width: 1000px; margin: 0 auto; gap: 0;
}
.home .ccn-partners--4 .ccn-partner {
  border: 0 !important; border-radius: 0 !important; padding: 10px;
  min-height: 164px; height: 164px; display: flex; align-items: center; justify-content: center;
}
.home .ccn-partners--4 .ccn-partner img { width: 100px; height: 100px; object-fit: contain; display: block; }
/* logo đối tác: bỏ viền/padding/bo góc của theme cũ trên chính ảnh logo */
.home .ccn-partners--4 .ccn-partner img,
.home .ccn-section .ccn-partners--4 img {
  border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: none !important;
  width: 100px !important; height: 100px !important; object-fit: contain; box-shadow: none !important;
}
/* LÝ DO: chỉ cần 6 card cao bằng nhau, giữ nguyên token gốc (viền cyan 2px, bo 16, padding 15/15/0) */
.home .ccn-sec-reasons { background: none !important; }
.home .ccn-sec-reasons .ccn-grid--reasons { gap: 20px; grid-auto-rows: 1fr; align-items: stretch; }
.home .ccn-sec-reasons .ccn-reason { height: 100%; }
.home .ccn-sec-reasons .ccn-reason__title {
  color: #29a9e1 !important; font-size: 20px !important; font-weight: 600 !important;
  line-height: 24px !important; text-align: center !important;
}
.home .ccn-sec-reasons .ccn-reason__text,
.home .ccn-section .ccn-sec-reasons p.ccn-reason__text {
  color: #333 !important; font-size: 16px !important; line-height: 27px !important;
  text-align: center !important; margin: 0 0 20px !important;
}

/* ===== vòng 4: theo ảnh khách gửi ===== */
/* BƯỚC: chữ mô tả dính sát nhãn BƯỚC n */
.home .ccn-grid--steps .ccn-step__num { line-height: 22px !important; margin: 0 0 0 !important; }
.home .ccn-grid--steps .ccn-step__name { margin: 0 !important; line-height: 22px !important; }
/* LOGO: mỗi logo 1 tile trắng viền 1px #e5e7eb bo 12, cách 10px, KHÔNG viền ngoài */
.home .ccn-partners--4 {
  border: 0 !important; border-radius: 0 !important; overflow: visible;
  gap: 10px !important; max-width: 1000px; margin: 0 auto;
}
.home .ccn-partners--4 .ccn-partner {
  background: #fff; border: 1px solid #e5e7eb !important; border-radius: 12px !important;
  padding: 12px; height: 164px; min-height: 164px;
  display: flex; align-items: center; justify-content: center;
}
.home .ccn-partners--4 .ccn-partner img {
  width: auto !important; height: auto !important; max-width: 100%; max-height: 120px;
  border: 0 !important; padding: 0 !important; border-radius: 0 !important; object-fit: contain;
}
/* gốc lỗi: WP chèn margin-top:24px cho mọi ô lưới trừ ô đầu -> card 1 lệch lên 24px */
.home .ccn-grid > *,
.home .ccn-grid > * + * { margin-block-start: 0 !important; margin-top: 0 !important; }
/* logo đối tác: bỏ margin-top 24px WP chèn giữa các ô (lưới 584 -> 512 = 164x3 + 10x2) */
.home .ccn-partners--4 > *,
.home .ccn-partners--4 > * + * { margin-block-start: 0 !important; margin-top: 0 !important; }
/* đối tác: theo ảnh mới — 4 cột, gap 16, card trắng viền 1px #e5e7eb bo 14, tỉ lệ 3:2, logo <=45% rộng / 60% cao */
.home .ccn-partners--4 { gap: 16px !important; max-width: 1100px; }
.home .ccn-partners--4 .ccn-partner {
  height: auto !important; min-height: 0 !important; aspect-ratio: 3 / 2;
  border: 1px solid #e5e7eb !important; border-radius: 14px !important; padding: 14px; background: #fff;
}
.home .ccn-partners--4 .ccn-partner img {
  width: auto !important; height: auto !important;
  max-width: 45% !important; max-height: 60% !important; object-fit: contain;
}
/* logo: bỏ giới hạn % (làm logo teo + lệch), dùng hộp cố định 150x120 canh giữa */
.home .ccn-partners--4 .ccn-partner img {
  width: 150px !important; height: 120px !important; max-width: 150px !important; max-height: 120px !important;
  object-fit: contain !important; display: block !important; margin: 0 auto !important;
}
/* card logo thấp lại: 175 -> 140px */
.home .ccn-partners--4 .ccn-partner { aspect-ratio: auto !important; height: 140px !important; min-height: 140px !important; padding: 10px !important; }
.home .ccn-partners--4 .ccn-partner img {
  width: 140px !important; height: 100px !important; max-width: 140px !important; max-height: 100px !important;
}

/* ===== FOOTER — CSS hài hoà (nội dung giữ nguyên 100%) ===== */
.ccn-footer {
  background: linear-gradient(180deg, #0d3a8e 0%, #0a2f75 100%) !important;
  padding: 56px 0 0 !important;
  font-family: "Open Sans", Arial, sans-serif;
  color: rgba(255,255,255,.92);
}
.ccn-footer .ccn-footer__cols { display: grid; grid-template-columns: 1.32fr 1fr 1fr; gap: 48px; align-items: start; }
.ccn-footer .ccn-footer__cols > .wp-block-template-part:first-child { padding-right: 8px; }
.ccn-footer > *, .ccn-footer > * + *,
.ccn-footer .is-layout-flow > *, .ccn-footer .is-layout-flow > * + *,
.ccn-footer__cols > *, .ccn-footer__cols > * + * { margin-block-start: 0 !important; margin-top: 0 !important; }

/* heading: nhỏ lại, giãn chữ, gạch cam 44px thay gạch trắng dài */
.ccn-footer h3.ccn-f__head {
  color: #e98a2e !important; font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 15px !important; font-weight: 700 !important; line-height: 1.3 !important;
  text-transform: uppercase !important; letter-spacing: .1em !important; margin: 0 !important;
}
.ccn-footer h3.ccn-f__head:after {
  content: ""; display: block; width: 44px; height: 2px; border-radius: 2px;
  background: #e98a2e; margin: 12px 0 24px; opacity: .95;
}
.ccn-footer h3.ccn-f__head--sub { margin-top: 32px !important; }

/* nội dung: nhịp dòng đều, chữ trắng dịu, nhãn đậm rõ */
.ccn-footer p {
  font-size: 14px !important; line-height: 1.75 !important; color: rgba(255,255,255,.9) !important;
  font-family: "Open Sans", Arial, sans-serif !important; margin: 0 0 18px !important;
}
.ccn-footer p strong { font-size: 14px !important; font-weight: 600 !important; color: #fff !important; letter-spacing: .01em; }
.ccn-footer a { color: #f2a95c !important; text-decoration: none; transition: color .15s ease; }
.ccn-footer a:hover { color: #fff !important; }
.ccn-footer a strong { color: #fff !important; }

/* icon: bọc ô 36px nền trắng 7%, icon 20px bên trong */
.ccn-footer p.ccn-f__row { position: relative; padding-left: 52px; min-height: 36px; }
.ccn-footer p.ccn-f__row:before {
  content: ""; position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 10px;
  background-color: rgba(255,255,255,.07); background-repeat: no-repeat; background-position: 8px 8px; background-size: 20px 20px;
}
.ccn-footer p.ccn-f__row--pin:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23e98a2e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E"); }
.ccn-footer p.ccn-f__row--mail:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23e98a2e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.ccn-footer p.ccn-f__row--phone:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23e98a2e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h3l2 5-2 1a11 11 0 0 0 6 6l1-2 5 2v3a2 2 0 0 1-2 2A17 17 0 0 1 4 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }

/* cờ: chip nền nhẹ, bo 6, hover sáng */
.ccn-footer .ccn-f__flags { column-gap: 10px; row-gap: 10px; align-items: center; margin: 0 0 4px; }
.ccn-footer .ccn-f__flag, .ccn-footer .ccn-f__flag figure { margin: 0 !important; }
.ccn-footer .ccn-f__flag figure a {
  display: block; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.07);
  transition: background .15s ease, transform .15s ease;
}
.ccn-footer .ccn-f__flag figure a:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }
.ccn-footer .ccn-f__flag img { width: 26px !important; height: 18px !important; object-fit: cover; display: block; border-radius: 3px; }

/* link sản phẩm + icon MXH dạng vòng tròn 34px */
.ccn-footer p.ccn-f__links { margin: 0 0 20px !important; }
.ccn-footer p.ccn-f__links a { color: rgba(255,255,255,.92) !important; }
.ccn-footer p.ccn-f__links a:hover { color: #e98a2e !important; }
.ccn-footer p.ccn-f__social { margin: 0 0 20px !important; display: flex; gap: 10px; }
.ccn-footer .ccn-f__soc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08);
  background-repeat: no-repeat; background-position: center; background-size: 15px 15px;
  text-indent: -9999px; overflow: hidden; transition: background .15s ease;
}
.ccn-footer .ccn-f__soc:hover { background-color: #e98a2e; }
.ccn-footer .ccn-f__soc--fb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M13.5 22v-8h3l.5-3.5h-3.5V8.2c0-1 .3-1.7 1.8-1.7H17V3.4c-.4 0-1.5-.1-2.7-.1-2.6 0-4.3 1.6-4.3 4.5V10.5H7V14h3v8h3.5z'/%3E%3C/svg%3E"); }
.ccn-footer .ccn-f__soc--pi { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2a10 10 0 0 0-3.6 19.3c-.1-.8-.2-2 0-2.9l1.3-5.5s-.3-.7-.3-1.6c0-1.5.9-2.6 2-2.6.9 0 1.4.7 1.4 1.5 0 .9-.6 2.3-.9 3.6-.3 1.1.5 2 1.6 2 1.9 0 3.3-2 3.3-4.9 0-2.6-1.8-4.4-4.5-4.4-3 0-4.9 2.3-4.9 4.6 0 .9.3 1.9.8 2.4.1.1.1.2.1.3l-.3 1.2c0 .2-.2.3-.4.2-1.3-.6-2-2.5-2-4 0-3.3 2.4-6.3 6.9-6.3 3.6 0 6.4 2.6 6.4 6 0 3.6-2.3 6.5-5.4 6.5-1.1 0-2.1-.6-2.4-1.2l-.6 2.3c-.2.9-.8 2-1.2 2.6A10 10 0 1 0 12 2z'/%3E%3C/svg%3E"); }
.ccn-footer .ccn-f__soc--tt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M16.5 2h-3v13.2a2.7 2.7 0 1 1-2-2.6V9.4a5.9 5.9 0 1 0 5 5.8V8.6c1.2.9 2.6 1.4 4 1.4V7a4 4 0 0 1-4-5z'/%3E%3C/svg%3E"); }
.ccn-footer .ccn-f__soc--yt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M23 12s0-3.3-.4-4.9a2.5 2.5 0 0 0-1.8-1.8C19.2 5 12 5 12 5s-7.2 0-8.8.3A2.5 2.5 0 0 0 1.4 7.1C1 8.7 1 12 1 12s0 3.3.4 4.9a2.5 2.5 0 0 0 1.8 1.8C4.8 19 12 19 12 19s7.2 0 8.8-.3a2.5 2.5 0 0 0 1.8-1.8C23 15.3 23 12 23 12zM9.8 15.3V8.7L15.5 12l-5.7 3.3z'/%3E%3C/svg%3E"); }

/* map: bo 10, viền mờ, cao 168 */
.ccn-footer iframe.ccn-f__map {
  width: 100% !important; max-width: 100%; height: 168px !important; border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; display: block; margin: 0; filter: saturate(.92);
}

/* thanh bản quyền: tách bằng đường kẻ mảnh, chữ 14, brand trắng đậm */
.ccn-footer .ccn-footer__bottom {
  background: #222 !important; margin-top: 48px; padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.ccn-footer .ccn-footer__bottom-in { display: block; }
.ccn-footer .ccn-footer__bottom p {
  margin: 0 !important; font-size: 14px !important; line-height: 22px !important;
  color: rgba(255,255,255,.72) !important; letter-spacing: .01em;
}
.ccn-footer .ccn-footer__bottom a { color: rgba(255,255,255,.72) !important; }
.ccn-footer .ccn-footer__bottom a:hover { color: #fff !important; }
.ccn-footer .ccn-footer__bottom strong { color: #fff !important; font-weight: 700 !important; }

@media (max-width: 980px) {
  .ccn-footer { padding-top: 40px !important; }
  .ccn-footer .ccn-footer__cols { grid-template-columns: 1fr 1fr !important; gap: 32px; }
  .ccn-footer .ccn-footer__cols > .wp-block-template-part:first-child { padding-right: 0; }
}
@media (max-width: 640px) {
  .ccn-footer .ccn-footer__cols { grid-template-columns: 1fr !important; gap: 28px; }
  .ccn-footer .ccn-footer__bottom { margin-top: 32px; padding: 14px 0; text-align: center; }
}
/* map dính sát thanh bản quyền: margin-top của bar bị rule khử margin ăn mất -> tách bằng padding đáy của footer */
.ccn-footer { padding-bottom: 48px !important; }
.ccn-footer .ccn-footer__bottom { margin-top: 0 !important; }
@media (max-width: 640px) { .ccn-footer { padding-bottom: 32px !important; } }
/* tách map khỏi thanh bản quyền: 48px nằm giữa lưới cột và bar (padding đáy footer nằm sau bar nên không tạo khoảng) */
.ccn-footer { padding-bottom: 0 !important; }
.ccn-footer__cols { margin-bottom: 48px !important; }
@media (max-width: 640px) { .ccn-footer__cols { margin-bottom: 32px !important; } }
/* GIỚI THIỆU + PVC: 2 ảnh phải cùng khung (PVC đang 387x235 < 538x371) */
.home .ccn-sec-intro img, .home .ccn-sec-pvc img {
  width: 100% !important; height: auto !important; max-width: 100% !important;
  aspect-ratio: 714 / 493; object-fit: contain; display: block; margin: 0 auto;
}
/* PVC: 2 cột đang 387/689 -> chia đôi như GIỚI THIỆU để 2 ảnh bằng nhau */
.home .ccn-sec-pvc .wp-block-columns { gap: 24px; }
.home .ccn-sec-pvc .wp-block-columns > .wp-block-column { flex: 1 1 50% !important; max-width: 50% !important; }
@media (max-width: 781px) {
  .home .ccn-sec-pvc .wp-block-columns > .wp-block-column { flex-basis: 100% !important; max-width: 100% !important; }
}

/* TUYÊN NGÔN — nền + nội dung đặt bằng block ccn/overlay (kéo thả trong editor) */
.ccn-claim {
  position: relative; min-height: 900px; background-color: #fff;
  background-repeat: no-repeat; background-position: 50% 50% !important; background-size: 80% auto !important;
}
.ccn-ov { position: absolute; max-width: 1200px; }
/* biến thể kích thước ảnh nền (chọn trong sidebar Styles) */
.ccn-claim.is-style-ccn-bg-50  { background-size: 50% auto !important; }
.ccn-claim.is-style-ccn-bg-60  { background-size: 60% auto !important; }
.ccn-claim.is-style-ccn-bg-70  { background-size: 70% auto !important; }
.ccn-claim.is-style-ccn-bg-80  { background-size: 80% auto !important; }
.ccn-claim.is-style-ccn-bg-100 { background-size: 100% auto !important; }
@media (max-width: 781px) {
  .ccn-claim { min-height: 420px; background-size: cover !important; padding: 40px 0; }
  .ccn-ov { position: static; width: auto !important; max-width: none; padding: 0 16px; }
  .ccn-claim .ccn-ov h2 { font-size: 26px !important; line-height: 1.25 !important; }
  .ccn-claim .ccn-ov p { font-size: 15px !important; }
}

/* ── CATEGORY / ARCHIVE: giữ nguyên box như cũ, chỉ dàn ngang 3 / hàng ── */
.category .wp-block-query, .archive .wp-block-query,
.search .wp-block-query, .blog .wp-block-query { display: block !important; }
.category .wp-block-post-template, .archive .wp-block-post-template,
.search .wp-block-post-template, .blog .wp-block-post-template {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px; margin: 0;
}
.category .wp-block-post-template > *, .archive .wp-block-post-template > *,
.search .wp-block-post-template > *, .blog .wp-block-post-template > * { margin-top: 0 !important; }
.category .ccn-card, .archive .ccn-card, .search .ccn-card, .blog .ccn-card { height: 100%; }

/* phân trang */
.wp-block-query-pagination {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 8px; height: auto; padding: 0;
  margin: 64px 0 48px !important;
}
.wp-block-query-pagination-numbers { display: flex; align-items: center; gap: 8px; }
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers {
  display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid #d7dee8; border-radius: 10px; background: #fff;
  color: var(--ccn-navy, #060b30); font-size: 15px; font-weight: 700; text-decoration: none;
}
.wp-block-query-pagination a:hover { background: var(--ccn-navy, #060b30); color: #fff; border-color: var(--ccn-navy, #060b30); }
.wp-block-query-pagination .page-numbers.current,
.wp-block-query-pagination .wp-block-query-pagination-numbers .current {
  background: var(--ccn-orange, #e28a31); border-color: var(--ccn-orange, #e28a31); color: #fff;
}
.wp-block-query-pagination .dots { border: 0; background: none; min-width: 20px; }
.wp-block-query-pagination-previous, .wp-block-query-pagination-next { font-weight: 700; }

@media (max-width: 980px) {
  .category .wp-block-post-template, .archive .wp-block-post-template,
  .search .wp-block-post-template, .blog .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .category .wp-block-post-template, .archive .wp-block-post-template,
  .search .wp-block-post-template, .blog .wp-block-post-template { grid-template-columns: 1fr !important; gap: 20px; }
}

/* ── HEADER (đo theo site gốc: topbar 40px trắng, header chính 127px, logo 165px, menu 16.8/500 #333 cách 20px) ── */
.ccn-topbar { background: #fff; border-bottom: 1px solid #eceff3; font-size: 14px; color: #000;
  height: 40px; overflow: hidden; }
.ccn-topbar .ccn-topbar__row > *, .ccn-header .ccn-header__row > * { margin-top: 0 !important; }
.ccn-topbar .ccn-topbar__row { display: flex !important; align-items: center; justify-content: space-between;
  gap: 16px; height: 40px !important; min-height: 40px !important; max-height: 40px !important; padding: 0 !important; }
.ccn-topbar__info { display: flex; align-items: center; gap: 28px; }
.ccn-topbar__item { display: inline-flex; align-items: center; gap: 7px; line-height: 1;
  font-size: 14px; color: #000; text-decoration: none; }
.ccn-topbar__item svg { width: 14px; height: 14px; fill: currentColor; flex: 0 0 auto; }
a.ccn-topbar__item:hover { color: var(--ccn-blue-bright, #0d97fe); }
.ccn-topbar__social { display: flex; align-items: center; gap: 4px; height: 26px; }
.ccn-topbar__social a { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; color: #333; text-decoration: none; }
.ccn-topbar__social a:hover { background: #f2f5f9; color: var(--ccn-blue-bright, #0d97fe); }
.ccn-topbar__social svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.ccn-topbar__item svg, .ccn-topbar__social svg { margin: 0; vertical-align: middle; }
.ccn-topbar__social .ccn-topbar__zalo { width: auto; padding: 0 8px; border-radius: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .2px; }
.ccn-topbar__search { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  margin-left: 2px; padding: 0; border: 0; border-radius: 50%; background: none; color: #333; cursor: pointer; }
.ccn-topbar__search:hover { background: #f2f5f9; color: var(--ccn-blue-bright, #0d97fe); }
.ccn-topbar__search svg { width: 15px; height: 15px; fill: currentColor; display: block; }

.ccn-header { position: sticky; top: 0; z-index: 90; background: #fff; box-shadow: 0 1px 0 #eceff3; }
.ccn-header__row { display: grid !important; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 20px; min-height: 127px; padding: 10px 0; }
.ccn-header .ccn-logo { justify-self: start; line-height: 0; }
.ccn-header .ccn-logo img { width: 165px; height: auto; max-width: none; display: block; }
.ccn-header .ccn-nav { justify-self: center; }
.ccn-header .ccn-nav .wp-block-navigation__container { gap: 32px; } /* khoảng cách trái-phải giữa các menu chính */
.ccn-header .ccn-nav .wp-block-navigation-item__content {
  position: relative; font-size: 16.8px; font-weight: 700; letter-spacing: .2px;
  color: #1b2333; padding: 12px 0; text-transform: none; transition: color .18s;
}
.ccn-header .ccn-nav .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--ccn-blue-bright, #0d97fe); transform: scaleX(0); transform-origin: left;
  transition: transform .18s ease;
}
.ccn-header .ccn-nav .wp-block-navigation-item__content:hover::after,
.ccn-header .ccn-nav .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.ccn-header .ccn-nav .wp-block-navigation__submenu-icon { margin-left: 6px; }
.ccn-header .ccn-nav .wp-block-navigation__submenu-icon svg { width: 10px; height: 10px; fill: currentColor; stroke: currentColor; }
.ccn-header .ccn-nav .wp-block-navigation-item__content:hover,
.ccn-header .ccn-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--ccn-blue-bright, #0d97fe); }
/* dropdown */
.ccn-header .ccn-nav .wp-block-navigation__submenu-container {
  background: #fff; border: 1px solid #eef1f6; border-radius: 12px; width: 275px; min-width: 275px; padding: 6px 0;
  margin-top: 2px; box-shadow: 0 18px 40px rgba(16, 24, 40, .16);
  gap: 2px !important; row-gap: 2px !important; /* WP kế thừa gap 26px -> các mục cách nhau 64px */
}
/* Cầu nối trong suốt: khoảng hở 2px giữa menu và dropdown làm rê chuột bị mất dropdown.
   ::before phủ kín khoảng hở -> con trỏ vẫn nằm trong <li> nên dropdown không đóng. */
.ccn-header .ccn-nav .wp-block-navigation__submenu-container::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.ccn-header .ccn-nav .wp-block-navigation__submenu-container.wp-block-navigation-submenu { width: 275px !important; min-width: 275px !important; }
.ccn-header .ccn-nav .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; }
.ccn-header .ccn-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block; width: 100%; box-sizing: border-box; font-size: 14.5px !important; font-weight: 600;
  color: #33405a; padding: 9px 18px !important; line-height: 1.35;
  white-space: normal; transition: color .15s;
}
/* Gạch chân của menu chính không áp cho link trong dropdown */
.ccn-header .ccn-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }
/* Hover submenu: chỉ gạch chân dưới (box-shadow -> không đổi chiều cao, không nhảy layout) */
.ccn-header .ccn-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: none; color: var(--ccn-blue-bright, #0d97fe);
  box-shadow: inset 0 -2px 0 var(--ccn-blue-bright, #0d97fe);
}
.ccn-header__cta { justify-self: end; }
.ccn-header__cta .ccn-cta-pill a,
.ccn-header__cta .wp-block-button__link {
  background: var(--ccn-blue-bright, #0d97fe); color: #fff; border-radius: 999px;
  padding: 11px 22px; font-size: 14px; font-weight: 700; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 6px 16px rgba(13, 151, 254, .25);
}
.ccn-header__cta .wp-block-button__link:hover { background: #0b7ed6; }

@media (max-width: 1024px) {
  .ccn-header__row { grid-template-columns: auto 1fr auto; min-height: 84px; }
  .ccn-header .ccn-logo img { width: 128px; }
  .ccn-header .ccn-nav { justify-self: end; }
}
@media (max-width: 800px) {
  .ccn-topbar { height: 36px; }
  .ccn-topbar__social { display: none; }
  .ccn-topbar__info { gap: 14px; }
  .ccn-topbar__item { font-size: 12.5px; }
  .ccn-header__row { grid-template-columns: auto 1fr; gap: 12px; min-height: 0; padding: 8px 0; }
  .ccn-header__cta { display: none !important; }
  .ccn-header__row > .wp-block-woocommerce-customer-account,
  .ccn-header__row > .wc-block-mini-cart { display: none !important; }
  .ccn-header .ccn-nav { justify-self: end; }
}

/* ── SHOP /san-pham/: gốc 4 cột, card 263px vuông, gap 30 (đo 1366) ── */
.post-type-archive-product .wp-block-post-template { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 30px !important; }
.post-type-archive-product .ccn-card { height: 100%; }
.post-type-archive-product .ccn-card .wp-block-post-featured-image,
.post-type-archive-product .ccn-card .wp-block-post-featured-image img,
.tax-product_cat .ccn-card .wp-block-post-featured-image img,
.tax-product_cat .ccn-card img {
  aspect-ratio: 1 / 1 !important; width: 100%; height: auto; display: block; object-fit: cover; }
/* card san pham: moi o cao bang nhau ke ca khi ten 1 hay 2 dong */
.tax-product_cat .ccn-grid, .post-type-archive-product .ccn-grid { align-items: stretch; }
.tax-product_cat .ccn-card, .post-type-archive-product .ccn-card { display: flex; flex-direction: column; height: 100%; }
/* bo khoang 24px cua block theme giua anh va ten -> ten bam sat anh nhu ban dau */
.tax-product_cat .ccn-card > * + *,
.post-type-archive-product .ccn-card > * + * { margin-block-start: 0 !important; margin-top: 0 !important; }
@media (max-width: 1100px) { .post-type-archive-product .wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 800px)  { .post-type-archive-product .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; } }
@media (max-width: 520px)  { .post-type-archive-product .wp-block-post-template { grid-template-columns: 1fr !important; } }

/* ── HERO dựng lại theo bản gốc (đo 1366: section 555px, H1 50/60 trắng tại x123/y110,
   nút BẢNG GIÁ 150x55 #0d3a8e bo 30 tại y447, ảnh cửa 378x505 tại x864) ── */
.ccn-hero, .home .ccn-hero {
  background: #060b30 url("/wp-content/uploads/2024/03/cua-cuon-nhanh-KAD.jpg") center/cover no-repeat !important;
  color: #fff; overflow: hidden; display: block !important; min-height: 0 !important;
}
.ccn-hero, .ccn-claim { overflow: hidden; }
body.home { overflow-x: hidden; }
.ccn-hero__stage { position: relative; height: 555px; max-width: 1140px; margin: 0 auto; padding: 0 !important; }
.ccn-hero__stage > .ccn-ov, .ccn-hero__stage > .ccn-ov > * { margin-top: 0 !important; }
.ccn-hero__stage > .ccn-ov { position: absolute; }
.ccn-hero h1 { color: #fff !important; font-size: 50px !important; line-height: 1.2 !important; font-weight: 800 !important;
  margin: 0 !important; text-shadow: 0 2px 18px rgba(0, 0, 0, .25); }
.ccn-hero__cta .wp-block-button__link { background: #0d3a8e !important; border: 1px solid #29a9e1 !important;
  border-radius: 30px !important; padding: 12px 24px !important; min-width: 150px; min-height: 55px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px !important; font-weight: 800 !important;
  letter-spacing: .3px; color: #fff !important; }
.ccn-hero__cta .wp-block-button__link:hover { background: #1f5b96 !important; }
.ccn-hero__door img { width: 100%; height: auto; display: block; }
@media (max-width: 1024px) {
  .ccn-hero__stage { height: auto; padding: 36px 0 !important; }
  .ccn-hero__stage > .ccn-ov { position: static; width: 100% !important; margin-bottom: 18px; }
  .ccn-hero h1 { font-size: clamp(26px, 5.6vw, 40px) !important; }
  .ccn-hero__tag { font-size: clamp(17px, 4.4vw, 25px) !important; line-height: 1.45 !important; }
  .ccn-hero__door { max-width: 300px; margin: 0 auto; }
}

/* ── /lien-he/ + /sua-chua/ ── */
.ccn-contact__cols { gap: 40px; align-items: flex-start; }
.ccn-map { width: 100%; height: 320px; border: 0; border-radius: 12px; display: block; margin-bottom: 22px; }
.ccn-contact__h { font-size: 22px; line-height: 1.35; font-weight: 800; color: #1b2333; margin: 0 0 10px; }
.ccn-contact__hot { font-size: 17px; font-weight: 700; color: #0d3a8e; margin: 0 0 18px; }
.ccn-contact__hot a { color: inherit; text-decoration: none; }
.ccn-contact__lbl { margin: 16px 0 4px; color: #333; }
.ccn-contact__note { color: #667085; font-size: 15px; margin: 0 0 18px; }
.ccn-contact { padding-bottom: 90px; }
.ccn-form-page > p, .ccn-form-page .wp-block-list { font-size: 17px; line-height: 1.7; }
.ccn-form-page .wp-block-list { margin: 0 0 18px; padding-left: 22px; }
.ccn-form-page .wp-block-list li { margin-bottom: 6px; }
@media (max-width: 900px) { .ccn-contact__cols { gap: 24px; } .ccn-map { height: 240px; } }

/* ── FORM CF7 (Báo giá / Sửa chữa / Liên hệ)
   Đo bản gốc: input cao 37px, nền #fafafa, viền 1px #e1e1e1, chữ 16px, padding 0 17px;
   lưới col-md-12 / col-md-6 / col-md-4 gap 30; nút Gửi 160x40 nền #29a9e1; label 15px #333. ── */
.wpcf7-form .appointment-form { display: flow-root; }
.wpcf7-form [class*="col-md-"] { float: left; box-sizing: border-box; padding: 0 15px; }
.wpcf7-form .col-md-12 { width: 100%; }
.wpcf7-form .col-md-9 { width: 75%; }
.wpcf7-form .col-md-8 { width: 66.6667%; }
.wpcf7-form .col-md-6 { width: 50%; }
.wpcf7-form .col-md-4 { width: 33.3333%; }
.wpcf7-form .col-md-3 { width: 25%; }
.wpcf7-form .col-md-2 { width: 16.6667%; }
.wpcf7-form .col-md-1 { width: 8.3333%; }
.wpcf7-form .appointment-form::after { content: ""; display: table; clear: both; }
.wpcf7-form .appointment-form > label, .wpcf7-form .appointment-form > p, .wpcf7-form .appointment-form > br { clear: both; }
.wpcf7-form .appointment-form > p { margin: 18px 0 8px; font-size: 17px; font-weight: 700; color: #1b2333; }
.wpcf7-form .appointment-form > label { display: block; margin: 14px 0 6px; font-size: 17px; font-weight: 700; color: #1b2333; }
.wpcf7-form .form-group { margin-bottom: 15px; }
/* Dòng 2 của form báo giá: label không có chữ -> control bị đẩy lên 26px so với các ô bên cạnh.
   Ép mọi label chứa control thành flex dọc, canh đáy -> mọi ô trong cùng hàng thẳng nhau. */
.wpcf7-form .form-group label:has(.wpcf7-text, .wpcf7-tel, .wpcf7-email, .wpcf7-number, .wpcf7-select, .wpcf7-textarea, .wpcf7-file) {
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 63px; }
.wpcf7-form .form-group label .wpcf7-form-control-wrap { display: block; width: 100%; }
.wpcf7-form p { margin: 0 0 15px; }
.wpcf7-form .form-group p { margin: 0; }
.wpcf7-form .form-group[style] { text-align: left !important; }
.wpcf7-form .wpcf7-submit { margin-top: 6px; position: relative; z-index: 2; }
.wpcf7-form label { display: block; margin: 0 0 5px; font-size: 16px; font-weight: 600; color: #333; line-height: 1.6; }
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"], .wpcf7-form input[type="url"], .wpcf7-form input[type="date"],
.wpcf7-form select, .wpcf7-form textarea {
  width: 100%; box-sizing: border-box; height: 37px; margin-top: 0; padding: 0 17px;
  font-family: inherit; font-size: 16px; color: #222; background: #fafafa;
  border: 1px solid #e1e1e1; border-radius: 4px; transition: border-color .15s, background .15s, box-shadow .15s;
}
.wpcf7-form textarea { height: 140px; min-height: 140px; margin-top: 0; padding: 11px 17px; line-height: 1.6; resize: vertical; }
.wpcf7-form select { padding: 0 40px 0 17px; color: #666; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.wpcf7-form input:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus {
  outline: 0; background: #fff; border-color: #29a9e1; box-shadow: 0 0 0 3px rgba(41, 169, 225, .13);
}
.wpcf7-form input::placeholder, .wpcf7-form textarea::placeholder { color: #9aa3ae; }
.wpcf7-form .wpcf7-submit {
  width: 100%; max-width: 220px; height: 44px; padding: 0; border: 0; border-radius: 3px; cursor: pointer;
  background: #29a9e1; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .3px;
  transition: background .15s;
}
.wpcf7-form .wpcf7-submit:hover { background: #1f8fc0; }
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.wpcf7-form .wpcf7-acceptance label { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500;
  color: #333; margin: 0; padding: 7px 0; cursor: pointer; }
.wpcf7-form .wpcf7-acceptance input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: #29a9e1; flex: 0 0 auto; }
.wpcf7-form input[type="file"] { height: auto; padding: 9px 12px; background: #fff; font-size: 14px; }
.wpcf7-form .wpcf7-not-valid-tip { color: #e02b2b; font-size: 13px; margin-top: 4px; }
.wpcf7-form .wpcf7-spinner { margin: 0 0 0 10px; }
.wpcf7 form .wpcf7-response-output { margin: 14px 0 0; padding: 11px 15px; border-radius: 6px;
  border: 1px solid #29a9e1; background: #f2fafe; color: #1b2333; font-size: 14px; }
.wpcf7 form.invalid .wpcf7-response-output { border-color: #e02b2b; background: #fdf2f2; }
@media (max-width: 800px) {
  .wpcf7-form [class*="col-md-"] { width: 100% !important; float: none; padding: 0; }
}


/* ===================== TRANG GIỚI THIỆU (/gioi-thieu/) ===================== */
.ccn-about-hero { padding: 5vw 0 0;
  background: url("assets/block-2.png") no-repeat center 350px;
  background-attachment: fixed; } /* anh nen noi bo, khong con phu thuoc xstore */
.ccn-about-hero__inner { text-align: center; }
.ccn-about-hero__title { text-transform: capitalize; font-size: 42px; font-weight: 700; line-height: 1.2; color: #434053 !important; margin: 0 0 48px; }
.ccn-about__divider { width: 177px; margin: 0 auto; } /* divider cach h2 48px theo goc */
.ccn-about__divider img { width: 177px; height: 6px; display: block; }
.ccn-about__divider--left { margin: 26px 0 0; }
.ccn-about__lead { font-size: 16px; line-height: 2; color: #333; max-width: 750px; margin: 56px auto 0; text-align: center; }
.ccn-about__feats { margin: 119px 0 0 !important; gap: 30px; }
.ccn-about__feats > .wp-block-column { margin: 0 !important; }
.ccn-about__feat { text-align: center; }
.ccn-about__feat-icon { width: 100px; margin: 0 auto 10px; }
.ccn-about__feat-icon img { width: 100px; height: 100px; display: block; }
.ccn-about__feat-title { font-size: 20px; font-weight: 600; color: #434053; text-transform: capitalize; margin: 0 0 20px; }
.ccn-about__feat-text { font-size: 16px; line-height: 1.6; color: #333; max-width: 300px; margin: 0 auto !important; }

.ccn-about-vision { padding: 5vw 0;
  background: url("assets/block-3.png") no-repeat center top; }
.ccn-about-vision__cols { align-items: flex-start; gap: 40px !important; }
.ccn-about-vision__cols > .wp-block-column { margin: 0 !important; }
.ccn-about__h2 { text-transform: capitalize; font-size: 32px; font-weight: 700; line-height: 1.2; color: #434053 !important; margin: 0; }
.ccn-about__text { font-size: 16px; line-height: 2; color: #333; margin: 0 0 20px !important; }
.ccn-about__text:first-of-type { margin-top: 56px !important; }
.ccn-about__award-gif { width: 505px; max-width: 100%; margin: 0 0 0 auto !important; }
.ccn-about__map { width: 580px; max-width: 100%; margin: 20px 0 0 auto !important; }
.ccn-about__map img, .ccn-about__award-gif img { width: 100%; height: auto; display: block; }

.ccn-about-globe {  /* goc: vc_row full-width, padding 14vw/22vw, globe_map.png cover */
  position: relative; width: 100vw; max-width: 100vw; left: 50%; transform: translateX(-50%);
  background: url("/wp-content/uploads/2020/05/globe_map.png") no-repeat center;
  background-size: contain; background-repeat: no-repeat; padding: 14vw 0 22vw; text-align: center; }
.ccn-about-globe__inner { padding-top: 100px; }  /* vc_empty_space height=100px */
.ccn-about-globe__box { width: min(760px, 100%); margin: 0 auto 4vw; padding: 0 15px; box-sizing: border-box;
  background: rgba(255, 255, 255, .81); }  /* 15px = gutter vc_column_inner */
.ccn-about-globe__title { text-transform: capitalize; font-size: 42px; font-weight: 700; color: #0d3a8e !important; margin: 0 0 25px; }
.ccn-about-globe__text { font-size: 14pt; line-height: 1.6; color: #0d72b9; margin: 0 !important; }
.ccn-about-globe__countries { color: #e98a2e; }

.ccn-about-award { padding: 0 0 60px; text-align: center; }
.ccn-about__eyebrow { font-size: 21px; line-height: 25px; font-weight: 500; color: #f0a455; margin: 0 0 24px !important; }
.ccn-about-award__title { text-transform: capitalize; font-size: 42px; font-weight: 700; line-height: 1.3; color: #434053 !important; max-width: 881px; margin: 0 auto 26px; }
.ccn-about-award__text { max-width: 881px; margin: 56px auto 0 !important; }

.ccn-about-certs { padding: 0 0 68px; }
.ccn-about-certs__track {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px;
  justify-content: safe center; }
.ccn-about-certs__track::-webkit-scrollbar { height: 6px; }
.ccn-about-certs__item { flex: 0 0 390px; margin: 0 !important; scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; }
.ccn-about-certs__pic { margin: 0 !important; }
.ccn-about-certs__pic img { max-width: 199px; width: auto; height: auto; max-height: 283px; display: block; }
.ccn-about-certs__cap { font-size: 20px; line-height: 1.25; color: #222; text-align: center;
  max-width: 337px; margin: 24px auto 0 !important; }

@media (max-width: 900px) {
  .ccn-about-hero__title, .ccn-about-globe__title, .ccn-about-award__title { font-size: 28px; }
  .ccn-about__lead { margin-top: 28px; }
  .ccn-about__feats { margin-top: 48px !important; }
  .ccn-about-vision__cols { display: block; }
  .ccn-about__map { margin: 20px 0 0 !important; }
  .ccn-about-certs__track { justify-content: flex-start; }
}


/* --- Hero giới thiệu (lấy lại từ rev_slider_7 bị cắt trên site gốc) --- */
.ccn-about-intro-hero { padding: 30px 0 0;
  background: url("assets/hero-gioi-thieu.jpg") center top / cover no-repeat; }  /* bg slide 21 trong revslider DB */
.ccn-about-intro-hero__inner { text-align: left; }
.ccn-about-intro-hero__box {
  width: 571px; max-width: 100%; min-height: 329px; box-sizing: border-box;
  padding: 16px 24px; background: rgba(255, 255, 255, .55); text-align: left; }
.ccn-about-intro-hero__brand {
  font-family: Quicksand, Roboto, sans-serif; font-size: 95px; line-height: 1.15; font-weight: 700;
  letter-spacing: -.5px; color: #0d3a8e !important; margin: 0; }
.ccn-about-intro-hero__sub { font-size: 29px; line-height: 1.15; font-weight: 700; color: #0d72b9 !important; margin: 0 !important; }
.ccn-about-intro-hero__claim { font-size: 42px; line-height: 37px; font-weight: 700; color: #0d3a8e !important; margin: 24px 0 28px !important; }
.ccn-btns--pill { display: flex; gap: 14px; margin: 0 !important; }
.ccn-btns--pill .wp-block-button { margin: 0 !important; }
.ccn-btns--pill .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; height: 62px; padding: 0 46px;
  border-radius: 40px; background: #0d3a8e; color: #fff; font-size: 14px; line-height: 1; font-weight: 500;
  text-transform: uppercase; box-shadow: none; }
.ccn-btns--pill .wp-block-button__link:hover { background: #29a9e1; color: #fff; }

/* --- Dải 4 số liệu (trên gốc bị đặt opacity: 0) --- */
.ccn-about-stats { margin: 0 15px; padding: 30px 0 24px; background: #fff;
  border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, .1); }
.ccn-about-stats__cols { gap: 0 !important; margin: 0 !important; }
.ccn-about-stats__cols > .wp-block-column { padding: 0 15px; margin: 0 !important; flex-basis: 25% !important; }
.ccn-about-stat__num { font-family: Roboto, sans-serif; margin: 0 0 14px !important; line-height: 1.2; }
.ccn-about-stat__num .n { font-size: 60px; color: #0d3a8e; line-height: 1.2; }
.ccn-about-stat__num .u { font-size: 16px; color: #888; text-transform: uppercase; }
.ccn-about-stat__label { font-size: 20px; line-height: 1.2; font-weight: 700; color: #434053 !important; text-transform: capitalize; margin: 0; }

@media (max-width: 900px) {
  .ccn-about-intro-hero__brand { font-size: 56px; }
  .ccn-about-intro-hero__sub { font-size: 20px; }
  .ccn-about-intro-hero__claim { font-size: 26px; margin: 16px 0 20px !important; }
  .ccn-about-stats__cols { flex-wrap: wrap; }
  .ccn-about-stats__cols > .wp-block-column { flex-basis: 50% !important; margin-bottom: 24px !important; }
  .ccn-about-stat__num .n { font-size: 40px; }
}


/* ===================== PRE-FOOTER: form nhận tư vấn (static block "pre-footer" của site cũ) ===================== */
.ccn-prefooter {
  background: url("assets/pf-pre-footer.jpg") center / cover no-repeat, #2b2b2b;
  padding: 60px 0 48px;
  margin: 60px 0 0;
  width: 100vw; max-width: 100vw; position: relative; left: 50%; transform: translateX(-50%); /* full-bleed nhu row stretch_row cua goc */
  margin-bottom: -24px !important;  /* hut 24px margin cuoi de nen lien footer */
  box-sizing: border-box;
}
.ccn-section:has(.ccn-prefooter) { padding-bottom: 0 !important; }  /* nen pre-footer lien footer, khong ho trang */
.ccn-section:has(.ccn-hero2) { padding-top: 0 !important; margin-top: 0 !important; }  /* hero lien dai tieu de trang */
.ccn-prefooter__panel {
  display: grid; grid-template-columns: 66.66% 33.34%;
  width: min(1040px, 92%); margin: 0 auto;
  background: #f5f6fc; border-radius: 35px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  padding: 24px; box-sizing: border-box;
}
.ccn-prefooter__form { padding: 3vw; display: flex; flex-direction: column; justify-content: center; }
.ccn-prefooter__title { font-size: 28px; font-weight: 700; color: #434053; text-transform: capitalize; margin: 0 0 20px; }
.ccn-prefooter__info {
  background: #0d72b9; border-radius: 20px; color: #fff; margin: 0 !important;
  padding: 3vw 3vw 1vw 2vw; align-self: stretch;
}
.ccn-prefooter__info-title { font-size: 28px; font-weight: 700; color: #fff !important; text-transform: capitalize; margin: 0 0 24px; }
.ccn-prefooter__row { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 16px !important; flex-wrap: nowrap; }
.ccn-prefooter__row p { margin: 0 !important; color: #fff; font-size: 16px; line-height: 1.5; }
.ccn-prefooter__row a { color: #fff; white-space: nowrap; }
.ccn-prefooter__ico { flex: 0 0 30px; width: 30px; margin: 2px 0 0 !important; }
.ccn-prefooter__ico img { width: 30px; height: 30px; display: block; }
/* form trong pre-footer: 1 cot, o nhap gon hon */
.ccn-prefooter .appointment-form .col-md-12 { width: 100%; }
.ccn-prefooter .ccn-pf-form label { min-height: 0 !important; }
.ccn-prefooter textarea { resize: vertical; }

@media (max-width: 900px) {
  .ccn-prefooter__panel { grid-template-columns: 1fr; }
  .ccn-prefooter__form, .ccn-prefooter__info { padding: 24px; }
  .ccn-prefooter__info { margin: 0 12px 12px; }
}


/* --- Hero giới thiệu: giống hero trang chủ - khung cao cố định 600px, chữ dùng px cố định,
   các lớp đặt theo % của khung (block ccn/overlay, kéo thả được). Không trộn vw để khỏi lệch ở màn khác. --- */
.ccn-hero2 {
  position: relative; height: 475px; overflow: hidden; margin-top: 24px !important;
  width: 100vw; max-width: 100vw; left: 50%; transform: translateX(-50%);
  background-position: center top; background-repeat: no-repeat; background-size: auto !important; }  /* de anh o kich thuoc that 1200x497, khong phong to */
.ccn-hero2__stage { position: relative; height: 100%; }  /* = .ccn-wrap: khung noi dung 1200 canh giua, giong cac section khac */
.ccn-hero2 .ccn-ov { position: absolute; max-width: none; margin: 0 !important; }  /* WP block-gap 24px day cac lop xuong */
.ccn-hero2 .ccn-ov > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.ccn-hero2__box { height: 329px; background: rgba(255, 255, 255, .55); }  /* layer 13 goc: 571x329, khong blur */
.ccn-hero2__brand { font-family: Quicksand, Roboto, sans-serif; font-size: 95px; line-height: 1.19; font-weight: 700;
  letter-spacing: -.5px; color: #0d3a8e !important; margin: 0; }
.ccn-hero2__sub { font-family: Quicksand, Roboto, sans-serif; font-size: 29px; line-height: 1.15; font-weight: 700; color: #0d72b9 !important; margin: 0 !important; white-space: nowrap; }
.ccn-hero2__claim { font-family: Quicksand, Roboto, sans-serif; font-size: 42px; line-height: 37px; font-weight: 700; color: #0d3a8e !important; margin: 0; white-space: nowrap; }
.ccn-hero2 .ccn-btns--pill { flex-wrap: nowrap; gap: 14px; }
.ccn-hero2 .ccn-btn--pill { border: 0; padding: 0; background: none; }  /* class nam tren div boc, khong phai the a */
.ccn-hero2 .ccn-btn--pill .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: Quicksand, Roboto, sans-serif; font-size: 14px; line-height: 14px; font-weight: 500;
  text-transform: uppercase; letter-spacing: normal; white-space: nowrap;
  background: #0d3a8e; color: #fff; border: 10px solid #29a9e1; border-radius: 40px;
  padding: 13px 41px 15px; box-sizing: border-box; height: 62px; min-height: 0; box-shadow: none; }
.ccn-hero2 .ccn-btn--pill .wp-block-button__link:hover { background: #0d3a8e; border-color: #29a9e1; color: #e98a2e; }

@media (max-width: 1100px) {
  .ccn-hero2 { height: 520px; }
  .ccn-hero2__brand { font-size: 76px; }
  .ccn-hero2__sub { font-size: 23px; }
  .ccn-hero2__claim { font-size: 34px; line-height: 30px; }
  .ccn-hero2__box { height: 285px; }
  .ccn-hero2 .ccn-btn--pill .wp-block-button__link { height: 54px; font-size: 13px; padding: 10px 26px 12px; border-width: 8px; }
}

@media (max-width: 800px) {
  .ccn-hero2 { height: auto; padding: 40px 0 56px; }
  .ccn-hero2 .ccn-ov { position: static; width: auto !important; }
  .ccn-hero2__box { display: none; }
  .ccn-hero2__brand { font-size: 52px; }
  .ccn-hero2__sub { font-size: 19px; white-space: normal; }
  .ccn-hero2__claim { font-size: 24px; line-height: 28px; white-space: normal; }
  .ccn-hero2 .ccn-btns--pill { flex-wrap: wrap; gap: 10px; }
}


/* --- Chứng nhận: carousel 3 ô/khung, ảnh giữ nguyên tỉ lệ, caption dưới ảnh --- */
.ccn-about-certs__gal { gap: 30px; }
.ccn-about-certs__gal .wp-block-image.ccn-about-certs__item {
  aspect-ratio: auto !important; border: 0 !important; box-shadow: none !important; background: none !important;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.ccn-about-certs__gal .wp-block-image.ccn-about-certs__item img {
  height: 283px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important;
  background: #fff; border: 1px solid #ececf3; border-radius: 4px; box-shadow: 0 2px 10px rgba(16, 24, 40, .06); }
.ccn-about-certs__gal .wp-element-caption {
  margin: 16px 0 0 !important; padding: 0; font-size: 16px; line-height: 1.35; color: #222; text-align: center; }
@media (max-width: 900px) {
  .ccn-about-certs__gal .wp-block-image.ccn-about-certs__item img { height: 220px !important; }
  .ccn-about-certs__gal .wp-element-caption { font-size: 14px; } }


/* Trang Giới thiệu: bỏ dải tiêu đề + breadcrumb (hero đã có thương hiệu) */
.page-id-396 .ccn-pagehead { display: none; }

/* ===== MOBILE: đối tác + quy trình (390/414/768) ===== */
@media (max-width: 900px) {
  .home .ccn-partners--4 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
  .home .ccn-partners--4 .ccn-partner { padding: 8px !important; }
  .home .ccn-partners--4 .ccn-partner img { width: 100% !important; height: 80px !important; max-width: 100% !important; max-height: 80px !important; }
}
@media (max-width: 600px) {
  .home .ccn-partners--4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .home .ccn-partners--4 .ccn-partner { height: 104px !important; min-height: 104px !important; }
  .home .ccn-partners--4 .ccn-partner img { height: 64px !important; max-height: 64px !important; }
  .home .ccn-grid--steps { grid-template-columns: 1fr !important; }
  .home .ccn-grid--steps .ccn-step__img,
  .home .ccn-grid--steps .wp-block-image.ccn-step__img,
  .home .ccn-grid--steps .ccn-step__img img {
    width: 100% !important; height: auto !important; min-width: 0 !important; max-width: 100% !important;
  }
  .home .ccn-grid--steps .ccn-step__img img { max-height: 220px !important; object-fit: cover; }
}

/* ===== MOBILE (<=900): header + menu overlay ===== */
@media (max-width: 900px) {
  .ccn-header__row {
    grid-template-columns: auto 1fr !important; align-items: center !important;
    gap: 12px !important; min-height: 64px; padding: 10px 16px !important;
  }
  .ccn-header .ccn-logo { justify-self: start; margin: 0 !important; }
  .ccn-header .ccn-logo .custom-logo,
  .ccn-header .ccn-logo img { width: auto !important; max-height: 44px; height: auto; }
  .ccn-header .ccn-nav { justify-self: end; margin: 0 !important; width: auto !important; }
  .ccn-header .ccn-nav .wp-block-navigation__responsive-container-open,
  .ccn-header .ccn-nav .wp-block-navigation__responsive-container-close {
    display: grid !important; place-items: center; margin: 0 !important; padding: 0 !important;
    width: 44px; height: 44px; border-radius: 10px; background: #f1f5f9; color: var(--ccn-navy, #060b30);
  }
  .ccn-header .ccn-nav .wp-block-navigation__responsive-container-open svg,
  .ccn-header .ccn-nav .wp-block-navigation__responsive-container-close svg { width: 24px; height: 24px; }

  /* overlay: nen toi + panel trang 1 ben (giong site goc), khong phu kin man hinh */
  .wp-block-navigation__responsive-container.is-menu-open {
    background: rgba(8, 20, 38, .45) !important; padding: 0 !important; overflow: hidden !important; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    height: 100% !important; max-height: 100% !important; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    width: 86% !important; max-width: 340px !important; min-height: 100% !important;
    margin-left: auto !important;   /* drawer truot ra tu ben PHAI */
    background: #fff !important; box-shadow: -8px 0 40px rgba(6, 11, 48, .3);
    overflow-y: auto !important; animation: ccnDrawerIn .22s ease-out; }
  @keyframes ccnDrawerIn { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    align-items: flex-start !important; justify-content: flex-start !important; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding: 0 !important; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: absolute; top: 16px; right: 8px; z-index: 5;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    width: 100% !important; flex-direction: column !important; align-items: stretch !important;
    justify-content: flex-start !important; gap: 0 !important;
    padding: 64px 0 calc(24px + env(safe-area-inset-bottom)) !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100% !important; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    display: flex !important; align-items: center; justify-content: space-between; gap: 8px;
    width: 100% !important; box-sizing: border-box; padding: 14px 20px !important;
    font-size: 16px !important; font-weight: 700 !important; line-height: 1.35 !important;
    color: var(--ccn-navy, #060b30) !important; text-align: left !important;
    border-bottom: 1px solid #eef1f5 !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { content: none !important; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { margin: 0 !important; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg { width: 14px !important; height: 14px !important; }
  /* submenu: bỏ card nổi 275px, thành danh sách lồng phẳng */
  .ccn-header .ccn-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    position: static !important; width: 100% !important; min-width: 0 !important; max-width: none !important;
    box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
    background: #f7f9fc !important; padding: 6px 0 !important; margin: 0 !important;
    border-left: 3px solid #e1e8f2 !important;
    transform: none !important; opacity: 1 !important; visibility: visible !important;
  }
  /* submenu thu gon: chi mo khi bam chevron (JS them class .ccn-open) */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation__submenu-container { display: none !important; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu.ccn-open > .wp-block-navigation__submenu-container { display: flex !important; flex-direction: column !important; }
  .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-submenu { position: relative; }
  .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-submenu > .wp-block-navigation-item__content { padding-right: 56px !important; }
  .wp-block-navigation__responsive-container.is-menu-open .ccn-subtoggle {
    position: absolute; right: 8px; top: 6px; display: grid; place-items: center;
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px;
    background: #eef1f5; color: #5b6774; cursor: pointer; z-index: 3;
  }
  .wp-block-navigation__responsive-container.is-menu-open .ccn-subtoggle svg { transition: transform .2s ease; }
  .wp-block-navigation__responsive-container.is-menu-open li.ccn-open > .ccn-subtoggle { background: #dbeafe; color: #0d3a8e; }
  .wp-block-navigation__responsive-container.is-menu-open li.ccn-open > .ccn-subtoggle svg { transform: rotate(180deg); }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::before { content: none !important; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 11px 20px 11px 41px !important;
    font-size: 15px !important; font-weight: 400 !important;
    color: #33415c !important; border-bottom: 0 !important;
  }
}

/* ---------- Banner dau trang (archive/category/trang tinh): bam site goc .page-heading ----------
   goc: 1366x178 = padding 27px 0 60px + breadcrumb 24 + h1 67 (45px/line-height 1, padding 11px 0)
   bg cong-trinh-cua-cuon.jpg cover center, khong lop phu; breadcrumb #e98a2e 21px canh giua TREN title; h1 #dd9933 */
.ccn-pagehead {
  background: url("/wp-content/uploads/2020/05/cong-trinh-cua-cuon.jpg") center center / cover no-repeat;
  padding: 27px 0 60px; color: #fff; }
.ccn-pagehead__inner { text-align: center; }
/* banner phai sat len header: bo khoang 24px cua block theme + duong ke chan header */
.wp-site-blocks > main:has(> .ccn-pagehead) { margin-block-start: 0 !important; margin-top: 0 !important; }
body:has(.ccn-pagehead) .ccn-header { box-shadow: none !important; }
.ccn-pagehead .ccn-breadcrumb { font-size: 21px; line-height: 24px; margin: 0; color: #e98a2e; }
.ccn-pagehead .ccn-breadcrumb a { color: #e98a2e; }
.ccn-pagehead .ccn-breadcrumb a:hover { color: #fff; }
.ccn-pagehead .ccn-h2::after { display: none; }  /* goc khong co gach chan duoi title */
.ccn-pagehead h1 {
  font-size: clamp(28px, 4.4vw, 45px); font-weight: 700; line-height: 1; letter-spacing: 0;
  color: #dd9933; text-transform: capitalize; text-align: center; margin: 0; padding: 11px 0; }
@media (max-width: 900px) {
  .ccn-pagehead { padding: 18px 0 30px; }
  /* mobile: anh nen crop vao vung sang -> phu toi nhe de chu vang du tuong phan (desktop giu nhu goc) */
  .ccn-pagehead::before { content: ""; position: absolute; inset: 0; background: rgba(8, 24, 45, .35); }
  .ccn-pagehead .ccn-breadcrumb { font-size: 15px; line-height: 20px; }
  .ccn-pagehead h1 { padding: 8px 0 4px; }
}

/* ---------- FAQ accordion (/cau-hoi-thuong-gap/): native <details>, khong JS ---------- */
.ccn-accordion { max-width: 900px; margin: 0 auto; display: grid; gap: 16px; }
/* nen xam nhat de card trang noi len (kieu anh mau) */
.ccn-section:has(.ccn-accordion) { background: #f4f7fb; }
.ccn-accordion details { background: #fff; border: 1px solid #e6ebf1; border-radius: 16px; overflow: hidden;
  box-shadow: 0 3px 12px rgba(16, 24, 40, .07);
  transition: box-shadow .18s, border-color .18s, transform .18s; }
.ccn-accordion details:hover { border-color: #cfe0f2; box-shadow: 0 8px 22px rgba(13, 58, 142, .10); transform: translateY(-1px); }
.ccn-accordion details[open] { border-color: #b7d6f7; box-shadow: 0 10px 26px rgba(13, 58, 142, .12); }
.ccn-accordion summary { position: relative; display: block; list-style: none; cursor: pointer;
  min-height: 44px; padding: 20px 66px 20px 24px; margin: 0;
  font-size: 17px; font-weight: 700; line-height: 1.5; color: #0d3a8e; }
.ccn-accordion summary::-webkit-details-marker { display: none; }
.ccn-accordion summary::marker { content: ""; }
.ccn-accordion summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; background: #eef1f5; color: #5b6774;
  font-size: 20px; font-weight: 400; line-height: 33px; text-align: center; }
.ccn-accordion details[open] summary { color: #0d72b9; }
.ccn-accordion details[open] summary::after { content: "\2212"; background: #0d72b9; color: #fff; }
.ccn-accordion details > p { margin: 0; padding: 0 24px 22px; font-size: 16px; line-height: 1.75; color: #5a6472; }
/* DB cu tren prod con doan <p> rong truoc <summary>: an di de khong bi hoang o dau the */
.ccn-accordion details > p:empty { display: none; }
@media (max-width: 900px) {
  .ccn-accordion { gap: 12px; }
  .ccn-accordion summary { font-size: 16px; padding: 15px 56px 15px 16px; }
  .ccn-accordion summary::after { right: 14px; width: 30px; height: 30px; font-size: 18px; line-height: 29px; }
  .ccn-accordion details > p { padding: 0 16px 18px; font-size: 15.5px; }
}

/* ---------- luot xem tren card listing (goc: "19/12/2024 / 464") ---------- */
.ccn-card__body .ccn-card__meta { font-size: 15px; color: #6b7280; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.ccn-card__body .ccn-card__meta > time::before,
.ccn-views::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 6px;
  vertical-align: -2px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; opacity: .75; }
.ccn-card__body .ccn-card__meta > time { --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M8 3v4M16 3v4M3 11h18'/></svg>"); }
.ccn-views { font-size: 15px; color: #6b7280; white-space: nowrap;
  --ic: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/><circle cx='12' cy='12' r='3'/></svg>"); }

/* ---------- San pham: card chi co anh + ten + brand, khong bo goc (theo site goc) ---------- */
body.post-type-archive-product .ccn-card,
body.tax-product_cat .ccn-card {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 0 !important; height: 100%; }
body.post-type-archive-product .ccn-card__body,
body.tax-product_cat .ccn-card__body { padding: 10px 0 0 !important; background: none !important; }
body.post-type-archive-product .ccn-card .wp-block-post-featured-image,
body.post-type-archive-product .ccn-card .wp-block-post-featured-image img,
body.tax-product_cat .ccn-card .wp-block-post-featured-image,
body.tax-product_cat .ccn-card .wp-block-post-featured-image img { border-radius: 0 !important; overflow: visible !important; }
body.post-type-archive-product .ccn-card .ccn-card__title,
body.post-type-archive-product .ccn-card h3,
body.tax-product_cat .ccn-card .ccn-card__title,
body.tax-product_cat .ccn-card h3 {
  font-size: 16px !important; font-weight: 700 !important; line-height: 1.45;
  color: #434053 !important; text-align: center; margin: 0 !important; text-transform: none;
  /* chua san 2 dong (card cao bang nhau) nhung chu bam sat len anh */
  min-height: 2.9em; display: block; }
.ccn-card__brand { min-height: 1.5em; }
body.post-type-archive-product .ccn-card .ccn-card__title a,
body.tax-product_cat .ccn-card .ccn-card__title a { color: #434053; }
.ccn-card__brand { font-size: 16px; font-weight: 400; color: #888; text-align: center; margin-top: 2px; line-height: 1.4; }
/* anh trong noi dung bai/san pham: khong bo goc (goc site cu cung 0px) */
.ccn-post-body img,
.entry-content img,
.ccn-product__desc img { border-radius: 0 !important; }
.ccn-product .wp-block-woocommerce-product-image-gallery img,
.ccn-product .wp-block-woocommerce-product-image-gallery .wc-block-components-product-image img,
.ccn-product figure.wp-block-woocommerce-product-image-gallery img { border-radius: 0 !important; }
.ccn-product .wp-block-woocommerce-product-image-gallery { border-radius: 0 !important; }