/* ============================================================
   Trang Liên hệ (/lien-he) — self-contained.

   Điểm khác biệt so với các trang khác: icon của mỗi kênh mang ĐÚNG màu
   thương hiệu của nền tảng đó (Zalo xanh #0068FF, Messenger gradient chính
   chủ, YouTube đỏ, Facebook #1877F2, TikTok đen) thay vì tô chung một màu
   xanh của site — để người dùng nhận ra kênh chỉ bằng màu, không cần đọc chữ.
   ============================================================ */

/* Token dự phòng: file này có thể được nạp trước theme.css nên khai lại. */
.ct2{
  --ct-brand:#1E40AF;
  --ct-brand-2:#3b82f6;
  --ct-text:#171717;
  --ct-muted:#52525b;
  --ct-line:#e4e4e7;
  --ct-bg-soft:#f7f8fb;

  /* Màu thương hiệu từng nền tảng */
  --ct-zalo:#0068FF;
  --ct-fb:#1877F2;
  --ct-yt:#FF0000;
  --ct-tt:#010101;
  --ct-phone:#16A34A;
  --ct-mail:#EA4335;
  --ct-msg:linear-gradient(45deg,#FF6B6B 0%,#BC2A8D 25%,#7B2FF7 50%,#1E6EFF 75%,#00B2FF 100%);

  background:var(--ct-bg-soft);
  font-family:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;
  color:var(--ct-text);
}

/* ---------- Dải tiêu đề ---------- */
.ct2 .page-band{background:linear-gradient(135deg,var(--ct-brand),#2c53c9);color:#fff;padding:34px 0 30px}
.ct2 .page-band .container{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,32px)}
.ct2 .ct-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.8);margin-bottom:14px;flex-wrap:wrap}
.ct2 .ct-crumb a{color:rgba(255,255,255,.8);text-decoration:none}
.ct2 .ct-crumb a:hover{color:#fff}
.ct2 .ct-crumb i{font-size:10px}
/* Tiêu đề và mô tả nằm cùng hàng như bản mẫu, hẹp quá thì tự xuống dòng. */
.ct2 .ct-band-row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.ct2 .page-band h1{font-size:32px;font-weight:800;line-height:1.15;color:#fff;margin:0}
.ct2 .page-band p{color:#c9d6ff;margin:0;font-size:15px;line-height:1.5;max-width:760px}

/* ---------- Bố cục 2 cột ---------- */
.ct2 .ct-body{padding:40px 0 64px}
.ct2 .ct-wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,32px);display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;align-items:start}
.ct2 .ct-main{min-width:0}

/* ---------- Thẻ chung ---------- */
.ct2 .ct-card{background:#fff;border:1px solid var(--ct-line);border-radius:14px;padding:18px 20px}
.ct2 .ct-label{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ct-muted)}
/* Nhan dau tien cua cot trai nen khong can margin-top. */
.ct2 .ct-section-label{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ct-muted);margin:0 0 12px}

/* Ô icon vuông bo góc — nền là bản nhạt 12% của màu thương hiệu, chữ/icon
   dùng màu đặc, cho tương phản đủ mà không quá chói. */
.ct2 .ct-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}

/* ---------- Lưới kênh liên hệ ---------- */
.ct2 .ct-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ct2 .ct-chan{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;transition:border-color .16s,box-shadow .16s,transform .16s}
.ct2 a.ct-chan:hover{border-color:#c7d2fe;box-shadow:0 8px 20px rgba(15,23,42,.08);transform:translateY(-2px)}
.ct2 .ct-chan-static{cursor:default}
.ct2 .ct-chan-name{font-size:15px;font-weight:700;line-height:1.3}
.ct2 .ct-chan-val{margin-top:3px;font-size:13.5px;color:var(--ct-muted);line-height:1.4;word-break:break-word}

/* Màu riêng từng nền tảng */
.ct2 .ct-ico-phone{background:rgba(22,163,74,.12);color:var(--ct-phone)}
.ct2 .ct-ico-mail{background:rgba(234,67,53,.12);color:var(--ct-mail)}
.ct2 .ct-ico-zalo{background:rgba(0,104,255,.12);color:var(--ct-zalo)}
.ct2 .ct-ico-youtube{background:rgba(255,0,0,.12);color:var(--ct-yt)}
.ct2 .ct-ico-clock{background:rgba(113,113,122,.12);color:var(--ct-muted)}
/* Messenger dùng gradient chính chủ nên phải là nền đặc + icon trắng. */
.ct2 .ct-ico-messenger{background:var(--ct-msg);color:#fff}

/* Zalo không có glyph trong Font Awesome → dựng chữ "Zalo" theo đúng kiểu logo. */
.ct2 .ct-zalo-mark{font-size:12px;font-weight:800;letter-spacing:-.3px;font-style:italic;line-height:1}

/* ---------- Mạng xã hội ---------- */
.ct2 .ct-social{margin-top:22px}
.ct2 .ct-social-row{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.ct2 .ct-soc{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;color:#fff;text-decoration:none;transition:transform .16s,filter .16s}
.ct2 .ct-soc:hover{transform:translateY(-2px);filter:brightness(1.08)}
.ct2 .ct-soc-fb{background:var(--ct-fb)}
.ct2 .ct-soc-yt{background:var(--ct-yt)}
.ct2 .ct-soc-tt{background:var(--ct-tt)}
.ct2 .ct-soc-zl{background:var(--ct-zalo)}
.ct2 .ct-soc-zl .ct-zalo-mark{font-size:13px;color:#fff}

/* ---------- Cột phải ---------- */
.ct2 .ct-aside{background:#fff;border:1px solid var(--ct-line);border-radius:18px;padding:26px 24px 28px;text-align:center;position:sticky;top:84px}
.ct2 .ct-aside h2{font-size:20px;font-weight:800;margin:20px 0 0;line-height:1.3}
.ct2 .ct-aside p{font-size:14px;color:var(--ct-muted);line-height:1.6;margin:10px 0 0}
.ct2 .ct-aside-cta{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:11px 20px;border-radius:10px;background:linear-gradient(135deg,var(--ct-brand),var(--ct-brand-2));color:#fff;font-weight:700;font-size:14.5px;text-decoration:none;transition:filter .16s,transform .16s}
.ct2 .ct-aside-cta:hover{filter:brightness(1.07);transform:translateY(-1px);color:#fff}

/* Khối minh hoạ: logo thật đặt giữa, quanh là bong bóng chat + vệt màu mờ.
   Không dùng ảnh 3D để khỏi phải kéo asset ngoài. */
.ct2 .ct-aside-art{position:relative;height:190px;display:flex;align-items:center;justify-content:center;padding:0 18px;border-radius:14px;background:linear-gradient(160deg,#eff6ff,#f5f3ff);overflow:hidden}
.ct2 .ct-aside-art img{position:relative;z-index:2;max-width:58%;height:auto}
.ct2 .ct-blob{position:absolute;border-radius:50%;filter:blur(26px);opacity:.55}
.ct2 .ct-blob-a{width:150px;height:150px;background:#93c5fd;top:-40px;left:-30px}
.ct2 .ct-blob-b{width:130px;height:130px;background:#a5f3fc;bottom:-36px;right:-24px}
.ct2 .ct-bubble{position:absolute;z-index:3;width:38px;height:38px;border-radius:12px;background:#fff;box-shadow:0 6px 16px rgba(15,23,42,.12);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--ct-brand)}
.ct2 .ct-bubble-1{top:20px;right:26px}
.ct2 .ct-bubble-2{bottom:22px;left:24px;color:var(--ct-phone)}
.ct2 .ct-bubble-3{top:64px;left:16px;color:#F59E0B}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .ct2 .ct-wrap{grid-template-columns:1fr;gap:28px}
  .ct2 .ct-aside{position:static}
}
@media(max-width:640px){
  .ct2 .page-band{padding:26px 0 24px}
  .ct2 .page-band h1{font-size:25px}
  .ct2 .ct-grid{grid-template-columns:1fr}
  .ct2 .ct-body{padding:28px 0 44px}
}