/* ==========================================================================
   DCI VIỆT NAM — BỘ NHẬN DIỆN (nguồn duy nhất cho màu và font)
   Theo bảng màu thương hiệu DCI (mục 3.2 Bảng màu RGB), cập nhật 04/11/2026:
   - Màu chính: Electric Blue, Sky Blue, Turquoise, Egg Shell Grey.
   - Thứ cấp: Dark Blue, Periwinkle Blue, Green, Bright Yellow, Pink, Golden Yellow.
   - Dark Blue chỉ dùng cho footer & chữ tiêu đề, KHÔNG làm nền khối giữa trang.
   - Golden Yellow (thay Gold cũ): nền nhãn, vạch nhấn, icon; chữ đặt trên nó luôn là Dark Blue.
   Muốn đổi màu/font toàn site: chỉ sửa trong file này.
   File này được nạp TRƯỚC mọi CSS khác của plugin.
   ========================================================================== */

:root {
  /* --- Màu thương hiệu --- */
  --dci-navy: #000066;        /* Dark Blue: chữ tiêu đề, footer */
  --dci-navy-dark: #00004d;   /* footer */
  --dci-blue: #0112BC;        /* Electric Blue: màu chính — nút, link, khối nhấn */
  --dci-blue-dam: #000c8a;    /* hover của nút chính */
  --dci-sky: #00B6FC;         /* Sky Blue: nhấn phụ, icon, nhấn trên nền tối */
  --dci-ngoc: #00DDD7;        /* Turquoise: nhãn, họa tiết */
  --dci-periwinkle: #B0E1FF;  /* Periwinkle Blue: nền xanh nhẹ cho khối nổi bật */
  --dci-periwinkle-nhat: #E3F3FF;
  --dci-xanh-la: #5FD5AB;     /* Green */
  --dci-hong: #FFC5DD;        /* Pink */
  --dci-vang-tuoi: #FFF200;   /* Bright Yellow */
  --dci-gold: #FFCC00;        /* Golden Yellow: nhấn (thay Gold #DEAF29 cũ) */
  --dci-gold-light: #FFDB4D;
  --dci-gold-soft: #FFF0B3;
  --dci-gold-dam: #0112BC;    /* chữ nhãn nhỏ trên nền sáng: vàng tươi không đủ tương phản -> dùng Electric Blue */

  /* --- Màu trung tính --- */
  --dci-chu: #1F2233;         /* chữ chính */
  --dci-chu-phu: #5A5D6E;     /* chữ phụ */
  --dci-chu-mo: #8E91A3;      /* chú thích, chữ mờ */
  --dci-vien: #E6E3DE;        /* đường viền */
  --dci-nen: #F7F6F5;         /* Egg Shell Grey: nền khối sáng */
  --dci-nen-2: #EFEDEA;

  /* --- Vai trò (dùng trong code) --- */
  --dci-cta: var(--dci-gold);           /* nền nút kêu gọi hành động: Golden Yellow (nổi bật nhất) */
  --dci-cta-hover: #FFD633;
  --dci-cta-chu: var(--dci-navy);       /* chữ trên nút kêu gọi */
  --dci-nhan: var(--dci-gold-dam);      /* chữ nhấn: chức danh, chuyên mục, nhãn */

  /* Bản RGB để dùng với độ trong suốt: rgba(var(--dci-navy-rgb), .1) */
  --dci-navy-rgb: 0, 0, 102;
  --dci-blue-rgb: 1, 18, 188;
  --dci-sky-rgb: 0, 182, 252;
  --dci-gold-rgb: 255, 204, 0;
  --dci-cta-rgb: 255, 204, 0;

  /* --- Font --- */
  --dci-font: 'Montserrat', Arial, sans-serif;

  /* --- Tên biến cũ của plugin, trỏ về bộ nhận diện mới --- */
  --dci-navy-deep: var(--dci-navy);
  --dci-navy-2: var(--dci-blue-dam);
  --dci-blue-accent: var(--dci-blue);
  --dci-cyan: var(--dci-sky);
  --dci-orange: var(--dci-cta);
  --dci-orange-hover: var(--dci-cta-hover);
  --dci-ink: var(--dci-chu);
  --dci-text-dark: var(--dci-chu);
  --dci-text-dim: var(--dci-chu-phu);
  --dci-text-muted: var(--dci-chu-phu);
  --dci-line: rgba(var(--dci-navy-rgb), 0.12);
  --dci-card-border: var(--dci-vien);
  --dci-bg-light: var(--dci-nen);
  --dci-bg-cream: var(--dci-nen);
  --dci-bg-soft: var(--dci-nen-2);
  --dci-font-head: var(--dci-font);
  --dci-font-sans: var(--dci-font);
}

/* Các quy tắc dưới chỉ áp dụng ngoài trang web, không ảnh hưởng trang quản trị */

/* Chặn tràn ngang (slider, hiệu ứng trượt vào) trên mọi màn hình */
html:has(body:not(.wp-admin)), body:not(.wp-admin) { overflow-x: clip; }

/* Font chung cho toàn site, kể cả module Divi */
body:not(.wp-admin),
body:not(.wp-admin) #page-container :is(h1, h2, h3, h4, h5, h6, p, li, a, button, input, select, textarea, label, blockquote) {
  font-family: var(--dci-font);
}

/* ==========================================================================
   HEADER (Divi) — toàn site
   - Mặc định: nền trắng, menu Dark Blue, logo màu, đường kẻ mảnh.
   - Trang chủ (body.dci-header-trong): trong suốt đè lên ảnh hero, chữ & logo trắng;
     khi cuộn thì trở về nền trắng.
   ========================================================================== */
body:not(.wp-admin) #main-header { background: #fff !important; box-shadow: 0 1px 0 rgba(var(--dci-navy-rgb), .08) !important; }
body:not(.wp-admin) #main-header #top-menu > li > a,
body:not(.wp-admin) #main-header #et_search_icon::before,
body:not(.wp-admin) #main-header .et-cart-info span::before,
body:not(.wp-admin) #main-header .mobile_menu_bar::before { color: var(--dci-navy) !important; font-weight: 600; }
body:not(.wp-admin) #main-header #top-menu > li.current-menu-item > a,
body:not(.wp-admin) #main-header #top-menu > li.current-menu-ancestor > a,
body:not(.wp-admin) #main-header #top-menu > li > a:hover { color: var(--dci-blue) !important; opacity: 1; }
body:not(.wp-admin) #main-header.et-fixed-header { box-shadow: 0 6px 24px rgba(var(--dci-navy-rgb), .08) !important; }
body:not(.wp-admin) #main-header #top-menu .sub-menu { border-top: 3px solid var(--dci-gold); }

body.dci-header-trong #page-container { padding-top: 0 !important; margin-top: 0 !important; }
body.dci-header-trong #main-header:not(.et-fixed-header) { position: absolute; background: transparent !important; box-shadow: none !important; }
body.dci-header-trong #main-header:not(.et-fixed-header) #top-menu > li > a,
body.dci-header-trong #main-header:not(.et-fixed-header) #et_search_icon::before,
body.dci-header-trong #main-header:not(.et-fixed-header) .et-cart-info span::before,
body.dci-header-trong #main-header:not(.et-fixed-header) .mobile_menu_bar::before { color: #fff !important; }
body.dci-header-trong #main-header:not(.et-fixed-header) #top-menu > li > a:hover { color: var(--dci-gold) !important; }
body.dci-header-trong #main-header:not(.et-fixed-header) #logo { filter: brightness(0) invert(1); }

/* ==========================================================================
   NÚT KÊU GỌI = GOLDEN YELLOW, CHỮ DARK BLUE (toàn site, kể cả trang cũ & WooCommerce)
   Các nút/nhãn cũ của plugin dùng nền --dci-cta với chữ trắng: đổi chữ sang Dark Blue cho đủ tương phản.
   ========================================================================== */
body:not(.wp-admin) :is(.dci-btn-orange, .dci-btn-primary, .dci-btn-submit, .dci-btn-buy-ticket, .dci-btn-buynow, .dci-sticky-btn,
  .dci-camnhan-card .topic-badge, .dci-instructor-card .card-tag, .dci-story-topic, .dci-hero-badge, .dci-tier-ribbon,
  .dci-event-badge, .dci-tm-badge, .dci-step.active.current .dci-step-num, #place_order, .single_add_to_cart_button) { color: var(--dci-cta-chu) !important; }
body:not(.wp-admin) :is(.dci-btn-orange, .dci-btn-primary, .dci-btn-submit, .dci-btn-buy-ticket, .dci-btn-buynow, .dci-sticky-btn, #place_order, .single_add_to_cart_button):hover { background: var(--dci-cta-hover) !important; color: var(--dci-cta-chu) !important; }

/* ==========================================================================
   BANNER ĐẦU TRANG CON — nền bầu trời DCI (ảnh từ bộ tư liệu web dci.edu.vn)
   Lớp phủ Egg Shell đậm bên trái (chữ Dark Blue dễ đọc), mờ dần sang phải để lộ
   bầu trời xanh dịu → sinh động nhưng không chói.
   Áp dụng: trang Divi (Giới thiệu, Liên hệ, khóa học, giảng viên), danh sách,
   tin tức/chuyên mục/bài viết, trang sự kiện.
   ========================================================================== */
.dci-tc.dci-s-hero-nen, .et-db #et-boc .et-l .dci-tc.dci-s-hero-nen,
.dci-tc .dci-tt-hero, .dci-sk-hero {
  background-color: #eaf4ff !important;
  background-image:
    linear-gradient(90deg, rgba(247,246,245,.97) 0%, rgba(247,246,245,.9) 36%, rgba(247,246,245,.45) 66%, rgba(247,246,245,.08) 100%),
    url(../img/nen-bau-troi.jpg) !important;
  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
}
.dci-tc.dci-s-hero-nen::after, .dci-tc .dci-tt-hero::after, .dci-sk-hero::after { opacity: .18 !important; filter: none !important; }
/* Viền vàng mảnh dưới banner: tách banner với phần nội dung */
.dci-tc .dci-tt-hero, .dci-sk-hero { border-bottom: 3px solid var(--dci-gold); }
@media (max-width: 780px) {
  .dci-tc.dci-s-hero-nen, .et-db #et-boc .et-l .dci-tc.dci-s-hero-nen,
  .dci-tc .dci-tt-hero, .dci-sk-hero {
    background-image: linear-gradient(180deg, rgba(247,246,245,.9) 0%, rgba(247,246,245,.94) 100%), url(../img/nen-bau-troi.jpg) !important;
  }
}

/* ==========================================================================
   NÚT "ĐĂNG KÝ TƯ VẤN" TRÊN MENU (mục menu có class dci-menu-cta — sửa ở Giao diện > Menu)
   ========================================================================== */
#top-menu li.dci-menu-cta { padding-right: 0 !important; margin-left: 10px; }
#top-menu li.dci-menu-cta > a { background: var(--dci-cta); color: var(--dci-cta-chu) !important; border-radius: 99px; padding: 0 6px !important; box-shadow: 0 0 0 10px var(--dci-cta); margin: 0 12px; font-weight: 700; opacity: 1 !important; transition: background .2s, box-shadow .2s; } /* box-shadow tạo khối nút mà không làm cao hàng menu */
#top-menu li.dci-menu-cta > a:hover { background: var(--dci-cta-hover); box-shadow: 0 0 0 10px var(--dci-cta-hover); }
body.dci-header-trong #main-header:not(.et-fixed-header) #top-menu li.dci-menu-cta > a { color: var(--dci-cta-chu) !important; }
#top-menu li.dci-menu-cta { margin-left: 18px; }
.et_mobile_menu li.dci-menu-cta > a { background: var(--dci-cta); color: var(--dci-cta-chu) !important; border-radius: 8px; text-align: center; font-weight: 700; margin-top: 8px; }

/* ==========================================================================
   THANH LIÊN HỆ CỐ ĐỊNH TRÊN ĐIỆN THOẠI (includes/chan-trang.php)
   ========================================================================== */
.dci-thanh-lh { display: none; }
@media (max-width: 780px) {
  .dci-thanh-lh { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); box-shadow: 0 -6px 24px rgba(0,0,60,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--dci-font); }
  .dci-thanh-lh a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--dci-navy); background: var(--dci-periwinkle-nhat); text-decoration: none; }
  .dci-thanh-lh a.chinh { background: var(--dci-cta); color: var(--dci-cta-chu); }
  .dci-thanh-lh a svg { color: var(--dci-blue); }
  .dci-thanh-lh a.chinh svg { color: var(--dci-cta-chu); }
  body:has(.dci-thanh-lh) { padding-bottom: 66px; }
}

/* Logo mới (có khẩu hiệu): cao hơn để chữ "Lan tỏa sự tử tế" đọc được */
#main-header #logo { max-height: 58px !important; height: 58px; width: auto; }
#main-header.et-fixed-header #logo { max-height: 46px !important; height: 46px; }
@media (max-width: 980px) { #main-header #logo { max-height: 44px !important; height: 44px; } }