/*
Theme Name: CitiGrand Luxury
Theme URI: https://www.citigrand.vn/
Author: Custom Build
Author URI: https://www.citigrand.vn/
Description: Theme WordPress trang landing page bất động sản cao cấp — phiên bản giao diện "Liquid Glass" lấy cảm hứng từ Apple: các khối kính mờ (frosted glass), độ sâu lớp, ánh sáng viền tinh tế, trên nền tối sang trọng. Toàn bộ cấu trúc, nội dung, font chữ và tuỳ chỉnh trong Customize giữ nguyên như bản gốc.
Version: 2.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: citigrand-luxury
*/

/* =========================================================
   0. VARIABLES
   Giữ nguyên tên biến gốc để không phải sửa PHP / Customizer.
   Chỉ đổi GIÁ TRỊ cho phù hợp giao diện Liquid Glass (nền tối,
   chữ sáng, các "mặt kính" trong suốt thay cho khối màu đặc).
   ========================================================= */
:root{
  --cg-dark-brown:#0a0a0c;      /* GIỮ NGUYÊN: chỉ dùng làm màu chữ tối trên nút vàng (header + nội dung) */
  --cg-brown:#241f19;           /* màu CHỮ TIÊU ĐỀ phần nội dung - nay đổi thành tối trên nền trắng */
  --cg-brown-mid:#20222a;       /* nền phụ tối thứ hai (giữ cho ảnh chưa tải xong) */
  --cg-gold:#b8935a;            /* champagne ánh kim - CTA, nhấn chính (Customizer có thể đổi) */
  --cg-gold-light:#d9bd8a;      /* champagne sáng - highlight, hover */
  --cg-gold-soft:#f0e6d3;       /* champagne rất nhạt - dùng cho icon trên nền kính */
  --cg-nav-accent:#dcb97c;      /* GIỮ NGUYÊN: vàng sáng dùng cho Header/Footer & lớp phủ ảnh Hero (nền tối) */
  --cg-content-accent:#a97c3e;  /* vàng đậm hơn dành riêng cho chữ/link nhấn trên nền TRẮNG (đủ tương phản) */
  --cg-cream:rgba(255,255,255,.05);   /* lớp kính rất nhẹ (header/footer) */
  --cg-cream-2:rgba(255,255,255,.09); /* lớp kính đậm hơn một chút (header/footer) */
  --cg-white:#fffefb;
  --cg-text:#4a4335;            /* chữ chính phần NỘI DUNG - tối, đọc được trên nền trắng */
  --cg-text-light:#8a8271;      /* chữ phụ phần NỘI DUNG - xám ấm trên nền trắng */
  --cg-line:rgba(255,255,255,.14);    /* viền kính (header/footer) */

  /* --- token Liquid Glass GỐC: chỉ dùng cho Header/Footer & lớp phủ ảnh Hero, KHÔNG đổi --- */
  --glass:rgba(255,255,255,.055);
  --glass-strong:rgba(255,255,255,.095);
  --glass-border:rgba(255,255,255,.16);
  --glass-hl:rgba(255,255,255,.4);
  --glass-shadow:0 30px 80px -28px rgba(0,0,0,.65);

  /* --- token Liquid Glass TRẮNG mới: dùng riêng cho phần NỘI DUNG (giữa header và footer) --- */
  --cg-content-bg:#ffffff;                      /* nền chính phần nội dung */
  --cg-content-bg-alt:#f7f5ef;                  /* nền phụ xen kẽ cho .section.alt / .section.dark */
  --content-glass:rgba(20,16,10,.035);          /* mặt kính rất nhẹ trên nền trắng */
  --content-glass-strong:rgba(20,16,10,.06);    /* mặt kính đậm hơn trên nền trắng */
  --content-glass-border:rgba(20,16,10,.10);    /* viền kính trên nền trắng */
  --content-glass-hl:rgba(255,255,255,.75);     /* ánh sáng viền trên nền trắng */
  --content-glass-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(20,16,10,.03),
    0 1px 2px rgba(20,16,10,.05),
    0 14px 30px -6px rgba(20,16,10,.10),
    0 34px 70px -12px rgba(20,16,10,.12);
  /* Bóng đổ mềm, nhiều lớp cho card kính trên nền trắng (thay bóng "tụ góc" cũ) */

  --r-lg:28px;
  --r-md:20px;
  --r-sm:14px;

  --font-main:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* --- Tông "XANH" dùng cho Header, Footer, và các section xen kẽ tạo điểm nhấn --- */
  --cg-blue-deep:#0d232b;         /* xanh navy đậm - nền Header/Footer/section.blue */
  --cg-blue-mid:#153542;          /* xanh navy nhạt hơn một chút - panel phụ trên nền xanh */
  --cg-onblue-heading:#f5f1e6;    /* tiêu đề sáng màu trên nền xanh */
  --cg-onblue-text:#e7e2d5;       /* chữ chính sáng màu trên nền xanh */
  --cg-onblue-muted:#aebcc1;      /* chữ phụ, xám ánh xanh, trên nền xanh */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--cg-text);
  background:var(--cg-content-bg);
  line-height:1.65;
  font-size:16px;
  position:relative;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;transition:.25s;}
img{max-width:100%;display:block;}
h1,h2,h3,h4,h5{font-family:var(--font-main);color:var(--cg-brown);margin:0 0 14px;font-weight:700;letter-spacing:-.015em;}
.container{max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:1;}

/* ============ NỀN AMBIENT "LIQUID" CỐ ĐỊNH TOÀN TRANG ============ */
body:before,body:after{
  content:"";
  position:fixed;
  z-index:0;
  border-radius:50%;
  filter:blur(110px);
  pointer-events:none;
  opacity:.16;
}
body:before{
  width:60vw;height:60vw;max-width:820px;max-height:820px;
  top:-18vw;left:-14vw;
  background:radial-gradient(circle,rgba(184,147,90,.55),transparent 70%);
  animation:cgDrift1 34s ease-in-out infinite;
}
body:after{
  width:50vw;height:50vw;max-width:680px;max-height:680px;
  bottom:-16vw;right:-12vw;
  background:radial-gradient(circle,rgba(63,110,127,.5),transparent 70%);
  animation:cgDrift2 40s ease-in-out infinite;
}
@keyframes cgDrift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(4vw,3vw) scale(1.1);}}
@keyframes cgDrift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-3vw,-2vw) scale(1.08);}}
@media (prefers-reduced-motion: reduce){body:before,body:after{animation:none;}}

.section{padding:90px 0;position:relative;z-index:1;}
.section.alt{background:radial-gradient(circle at 15% 20%,rgba(184,147,90,.08),transparent 45%),var(--cg-content-bg-alt);}
/* Section "xanh" (blue) - xen kẽ với section trắng để tạo điểm nhấn, đồng bộ tông với Header/Footer */
.section.blue{
  background:linear-gradient(160deg,var(--cg-blue-deep),var(--cg-blue-mid));
  backdrop-filter:blur(6px);
  /* Ghi đè các biến "nội dung trắng" ngay trong phạm vi section này ->
     mọi card/chữ/link bên trong tự động chuyển sang tông sáng-trên-nền-xanh,
     không cần sửa lại từng thành phần. */
  --cg-text:var(--cg-onblue-text);
  --cg-text-light:var(--cg-onblue-muted);
  --cg-brown:var(--cg-onblue-heading);
  --cg-content-accent:var(--cg-nav-accent);
  --content-glass:var(--glass);
  --content-glass-strong:var(--glass-strong);
  --content-glass-border:var(--glass-border);
  --content-glass-hl:var(--glass-hl);
  --content-glass-shadow:var(--glass-shadow);
}
.section.blue .cg-form input,.section.blue .cg-form textarea{background:rgba(255,255,255,.06);border-color:var(--glass-border);color:var(--cg-onblue-text);}
.section.blue .cg-form input:focus,.section.blue .cg-form textarea:focus{background:rgba(255,255,255,.1);border-color:var(--cg-gold);}
.section.blue .cg-form input::placeholder,.section.blue .cg-form textarea::placeholder{color:#93a3a9;}
.sec-title{text-align:center;margin-bottom:50px;}
.sec-title .eyebrow{display:block;letter-spacing:4px;text-transform:uppercase;color:var(--cg-content-accent);font-size:13px;font-weight:600;margin-bottom:10px;}
.sec-title h2{font-size:36px;position:relative;display:inline-block;padding-bottom:16px;}
.sec-title h2:after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:70px;height:3px;background:var(--cg-content-accent);}

/* Nút vàng: vẫn kính - viền sáng mảnh + highlight quét, không còn khối đặc cứng */
.btn-gold{position:relative;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(120deg,var(--cg-gold),var(--cg-gold-light));color:var(--cg-dark-brown)!important;padding:15px 34px;border-radius:999px;font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:13px;border:none;cursor:pointer;box-shadow:0 14px 34px -10px rgba(184,147,90,.55);overflow:hidden;transition:transform .3s,box-shadow .3s;}
.btn-gold:hover{background:linear-gradient(120deg,var(--cg-gold-light),var(--cg-gold));transform:translateY(-3px);box-shadow:0 18px 40px -8px rgba(184,147,90,.65);}
.btn-gold:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .65s cubic-bezier(.22,.61,.36,1);}
.btn-gold:hover:after{left:120%;}
@media (prefers-reduced-motion: reduce){.btn-gold:after{transition:none!important;}}
.btn-outline{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--glass-border);background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--cg-gold-light)!important;padding:14px 32px;border-radius:999px;letter-spacing:1px;text-transform:uppercase;font-size:13px;font-weight:600;transition:.3s;}
.btn-outline:hover{background:var(--cg-gold);border-color:var(--cg-gold);color:var(--cg-dark-brown)!important;transform:translateY(-2px);}

/* =========================================================
   1. HEADER — thanh kính nổi (floating glass bar)
   ========================================================= */
.cg-header{position:fixed;top:0;left:0;right:0;z-index:999;background:rgba(13,35,43,.48);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border-bottom:1px solid var(--glass-border);box-shadow:0 20px 50px -30px rgba(0,0,0,.6);}
.cg-header .container{display:flex;align-items:center;justify-content:space-between;height:96px;max-width:1680px;gap:16px;}
.cg-logo{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.cg-logo img{max-height:56px;}
.cg-logo .cg-logo-text{display:flex;flex-direction:column;line-height:1.15;}
.cg-logo .cg-logo-text .name{font-family:var(--font-main);font-size:25px;font-weight:700;color:#fdfbf6;letter-spacing:.5px;}
.cg-logo .cg-logo-text .sub{font-size:11px;letter-spacing:3px;color:var(--cg-nav-accent);text-transform:uppercase;}
.cg-nav{flex:1;display:flex;justify-content:center;min-width:0;overflow-x:auto;scrollbar-width:none;}
.cg-nav::-webkit-scrollbar{display:none;}
.cg-nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0;flex-wrap:nowrap;justify-content:center;}
.cg-nav a{color:#e9e4d8;font-size:12.5px;letter-spacing:.4px;text-transform:uppercase;font-weight:600;padding:6px 0;position:relative;white-space:nowrap;transition:color .25s;}
.cg-nav a:hover,.cg-nav a.current{color:var(--cg-nav-accent);}
.cg-nav a:after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--cg-nav-accent);transition:.3s;}
.cg-nav a:hover:after,.cg-nav a.current:after{width:100%;}
.cg-header-right{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.cg-hotline{position:relative;display:flex;align-items:center;gap:9px;background:var(--glass-strong);backdrop-filter:blur(16px);border:1px solid rgba(184,147,90,.5);color:var(--cg-gold-light)!important;font-weight:700;font-size:15px;padding:12px 22px;border-radius:26px;white-space:nowrap;box-shadow:inset 0 1px 0 var(--glass-hl);transition:transform .25s,box-shadow .25s,background .25s;}
.cg-hotline:hover{transform:translateY(-2px);background:linear-gradient(120deg,var(--cg-gold),var(--cg-gold-light));color:var(--cg-dark-brown)!important;}
.cg-hotline:before{content:"";position:absolute;inset:0;border-radius:26px;box-shadow:0 0 0 0 rgba(184,147,90,.5);animation:cg-hotline-pulse 2.4s ease-out infinite;pointer-events:none;}
.cg-hotline svg{width:17px;height:17px;fill:currentColor;}
@keyframes cg-hotline-pulse{
  0%{box-shadow:0 0 0 0 rgba(184,147,90,.5);}
  70%{box-shadow:0 0 0 10px rgba(184,147,90,0);}
  100%{box-shadow:0 0 0 0 rgba(184,147,90,0);}
}
.cg-social a{width:36px;height:36px;border-radius:50%;background:var(--glass);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;transition:.25s;}
.cg-social a:hover{background:var(--cg-gold);}
.cg-social svg{width:16px;height:16px;fill:var(--cg-nav-accent);}
.cg-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;z-index:1001;position:relative;padding:6px;}
.cg-burger span{width:26px;height:2px;background:var(--cg-nav-accent);transition:transform .3s,opacity .3s;}
.cg-burger.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.cg-burger.is-active span:nth-child(2){opacity:0;}
.cg-burger.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* =========================================================
   2. HERO BANNER
   ========================================================= */
.cg-hero{position:relative;height:100vh;height:100dvh;min-height:620px;display:flex;align-items:flex-end;color:#fff;padding-bottom:110px;overflow:hidden;}
.cg-hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;}
.cg-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;animation:cgKenBurns 18s ease-in-out infinite alternate;filter:blur(10px) saturate(75%) brightness(.85);transition:filter 1.2s ease .15s;}
.cg-hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(6,6,8,.82) 0%,rgba(6,6,8,.32) 48%,rgba(6,6,8,.1) 100%);}
.cg-hero-inner{position:relative;z-index:2;max-width:680px;}
.cg-hero-inner .eyebrow{display:inline-block;color:var(--cg-nav-accent);letter-spacing:6px;text-transform:uppercase;font-size:13px;font-weight:600;padding:8px 18px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(14px);}
.cg-hero-inner h1{color:#fff;font-size:56px;margin:18px 0 26px;line-height:1.15;font-weight:700;}
.cg-hero-inner p{font-size:16px;color:#e2ddd0;margin-bottom:30px;max-width:560px;}
.cg-hero-actions{display:flex;gap:24px;flex-wrap:wrap;align-items:center;}
.cg-hero-actions .play-link{display:flex;align-items:center;gap:12px;color:var(--cg-gold-light)!important;font-weight:600;font-size:15px;background:none;border:none;padding:0;margin:0;cursor:pointer;font-family:inherit;appearance:none;}
.cg-hero-actions .play-icon{width:48px;height:48px;border-radius:50%;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .25s;}
.cg-hero-actions .play-link:hover .play-icon{background:var(--cg-gold);}
.cg-hero-actions .play-icon svg{width:14px;height:14px;fill:var(--cg-gold-light);margin-left:2px;transition:fill .25s;}
.cg-hero-actions .play-link:hover .play-icon svg{fill:var(--cg-dark-brown);}
.cg-hero-actions .btn-outline{padding:16px 30px;cursor:pointer;font-family:inherit;appearance:none;}

/* =========================================================
   2b. SUB-BANNER (banner nhỏ cho trang con)
   ========================================================= */
.cg-subhero{position:relative;height:420px;min-height:340px;display:flex;align-items:center;color:#fff;overflow:hidden;margin-top:0;}
.cg-subhero .cg-hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;}
.cg-subhero .cg-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.cg-subhero .cg-hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(6,6,8,.88) 10%,rgba(6,6,8,.5) 60%,rgba(6,6,8,.28) 100%);}
.cg-subhero-inner{position:relative;z-index:2;padding-top:100px;}
.cg-breadcrumb{font-size:13px;color:#cfc9ba;margin-bottom:16px;letter-spacing:.5px;}
.cg-breadcrumb a{color:var(--cg-nav-accent);}
.cg-breadcrumb span{margin:0 6px;opacity:.7;}
.cg-subhero-inner .eyebrow{display:inline-block;color:var(--cg-nav-accent);letter-spacing:5px;text-transform:uppercase;font-size:13px;font-weight:600;margin-bottom:14px;padding:7px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(14px);}
.cg-subhero-inner h1{color:#fff;font-size:40px;margin:0;line-height:1.2;}

/* Nội dung trang con (WYSIWYG) — bọc trong một mặt kính lớn */
.cg-page-content{max-width:900px;margin:0 auto;background:var(--content-glass);border:1px solid var(--content-glass-border);backdrop-filter:blur(22px) saturate(150%) brightness(1.04);-webkit-backdrop-filter:blur(22px) saturate(150%) brightness(1.04);border-radius:var(--r-lg);box-shadow:var(--content-glass-shadow);padding:52px 56px;}
.cg-page-content p{color:var(--cg-text-light);margin-bottom:18px;font-size:16px;}
.cg-page-content h2{font-size:28px;margin-top:36px;}
.cg-page-content h3{font-size:22px;margin-top:28px;}
.cg-page-content img{border-radius:var(--r-sm);margin:20px 0;box-shadow:0 16px 32px rgba(0,0,0,.35);}
.cg-page-content ul,.cg-page-content ol{color:var(--cg-text-light);padding-left:22px;margin-bottom:18px;}
.cg-page-content li{margin-bottom:8px;}
.cg-page-content blockquote{border-left:3px solid var(--cg-content-accent);padding:10px 22px;color:var(--cg-brown);font-style:italic;background:var(--content-glass-strong);border-radius:0 var(--r-sm) var(--r-sm) 0;margin:24px 0;}
.cg-page-content a{color:var(--cg-content-accent);text-decoration:underline;}
.cg-page-content figure{margin:0;}
@media(max-width:600px){.cg-page-content{padding:34px 24px;}}

/* Phân trang Tin tức */
.cg-news-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border-radius:999px;background:var(--content-glass);border:1px solid var(--content-glass-border);color:var(--cg-text);font-size:14px;font-weight:600;backdrop-filter:blur(10px);}
.cg-news-pagination .page-numbers.current{background:var(--cg-gold);border-color:var(--cg-gold);color:var(--cg-dark-brown);}
.cg-news-pagination .page-numbers:not(.current):hover{border-color:var(--cg-gold);color:var(--cg-content-accent);}
.cg-news-pagination .page-numbers.dots{border:none;background:none;}

/* =========================================================
   3. INTRO / GIỚI THIỆU
   ========================================================= */
.cg-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;}
.cg-intro .eyebrow{color:var(--cg-content-accent);letter-spacing:4px;text-transform:uppercase;font-size:13px;font-weight:700;}
.cg-intro img{border-radius:var(--r-lg);box-shadow:0 26px 60px rgba(0,0,0,.45);}
.cg-intro-text p{color:var(--cg-text-light);}
.cg-intro-text strong{color:var(--cg-brown);}

/* Info strip: mặt kính */
.cg-info-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px;}
.cg-info-card{background:var(--content-glass);border:1px solid var(--content-glass-border);backdrop-filter:blur(20px) saturate(150%) brightness(1.04);-webkit-backdrop-filter:blur(20px) saturate(150%) brightness(1.04);border-radius:var(--r-md);padding:34px 28px;text-align:center;box-shadow:var(--content-glass-shadow);position:relative;overflow:hidden;}
.cg-info-card:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(155deg,var(--content-glass-hl),transparent 30%);opacity:.5;pointer-events:none;}
.cg-info-card .icon{width:54px;height:54px;margin:0 auto 18px;border-radius:50%;background:linear-gradient(135deg,var(--cg-gold-light),var(--cg-gold));display:flex;align-items:center;justify-content:center;}
.cg-info-card .icon img{max-width:26px;filter:brightness(0) invert(1) opacity(.85);}
.cg-info-card h4{font-size:18px;margin-bottom:10px;color:var(--cg-brown);}
.cg-info-card p{color:var(--cg-text-light);font-size:14.5px;margin:0;}

/* =========================================================
   4. 6 LÝ DO / REASONS GRID
   ========================================================= */
.cg-reasons-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.cg-reason-card{background:var(--content-glass);border:1px solid var(--content-glass-border);backdrop-filter:blur(20px) saturate(150%) brightness(1.04);-webkit-backdrop-filter:blur(20px) saturate(150%) brightness(1.04);border-radius:var(--r-md);padding:36px 30px;box-shadow:var(--content-glass-shadow);transition:transform .35s,box-shadow .35s,border-color .35s;position:relative;overflow:hidden;}
.cg-reason-card:hover{transform:translateY(-8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(20,16,10,.03),0 1px 2px rgba(20,16,10,.05),0 20px 40px -8px rgba(20,16,10,.14),0 44px 90px -16px rgba(20,16,10,.16);border-color:rgba(184,147,90,.5);}
.cg-reason-card:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(155deg,var(--content-glass-hl),transparent 30%);opacity:.5;pointer-events:none;}
.cg-reason-card .icon{width:56px;height:56px;border-radius:var(--r-sm);background:var(--content-glass-strong);border:1px solid var(--content-glass-border);display:flex;align-items:center;justify-content:center;margin-bottom:22px;}
.cg-reason-card .icon img{max-width:28px;}
.cg-reason-card h4{font-size:19px;margin-bottom:12px;color:var(--cg-brown);}
.cg-reason-card p{color:var(--cg-text-light);font-size:14.5px;margin:0;}
.cg-reason-card h4 a{color:inherit;}

/* =========================================================
   5. VỊ TRÍ - KHOẢNG CÁCH
   ========================================================= */
.cg-location-split{display:grid;grid-template-columns:1.15fr .85fr;min-height:560px;}
.cg-location-media{position:relative;overflow:hidden;background:var(--cg-brown-mid);border-radius:0;}
.cg-location-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;min-height:340px;}
.cg-location-panel{background:var(--cg-content-bg);backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);border-left:1px solid var(--content-glass-border);padding:70px 56px;display:flex;flex-direction:column;justify-content:center;position:relative;}
.cg-location-panel:before{content:"";position:absolute;inset:0;opacity:.06;background-image:radial-gradient(var(--cg-gold) 1px,transparent 1px);background-size:22px 22px;pointer-events:none;}
.cg-location-panel h2{color:var(--cg-brown);font-size:34px;letter-spacing:1px;position:relative;margin-bottom:8px;}
.cg-location-underline{width:60px;height:3px;background:var(--cg-content-accent);margin-bottom:36px;position:relative;}
.cg-location-list{position:relative;display:flex;flex-direction:column;gap:26px;}
.cg-location-item{display:flex;align-items:center;gap:22px;}
.cg-location-item .circle{flex:0 0 auto;width:76px;height:76px;border-radius:50%;background:var(--content-glass);border:1.5px solid var(--cg-content-accent);backdrop-filter:blur(12px);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--cg-content-accent);}
.cg-location-item .circle .n{font-family:var(--font-main);font-size:26px;font-weight:700;line-height:1;}
.cg-location-item .circle .u{font-size:10px;letter-spacing:1px;text-transform:uppercase;opacity:.85;}
.cg-location-item p{margin:0;color:var(--cg-text-light);font-size:14.5px;line-height:1.6;}

@media(max-width:1024px){
  .cg-location-split{grid-template-columns:1fr;}
  .cg-location-media img{min-height:280px;}
  .cg-location-panel{padding:50px 30px;border-left:none;border-top:1px solid var(--content-glass-border);}
}
@media(max-width:600px){
  .cg-location-item{gap:16px;}
  .cg-location-item .circle{width:64px;height:64px;}
}

/* =========================================================
   5b/3b/6b. SESSION VIDEO (sau Giới thiệu / Vị trí / Nhà phát triển)
   ========================================================= */
.cg-video-wrap{position:relative;width:100%;max-width:980px;margin:0 auto;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--content-glass-shadow);background:#000;}
.cg-video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.section.blue .cg-video-wrap{box-shadow:0 30px 70px -20px rgba(0,0,0,.55);}
@media(max-width:600px){
  .cg-video-wrap{border-radius:var(--r-md);}
}

/* =========================================================
   6. NHÀ PHÁT TRIỂN
   ========================================================= */
.cg-developer{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center;}
.cg-developer-media img{border-radius:var(--r-lg);}
.cg-developer-media .cg-shutter,
.cg-intro-media .cg-shutter{border-radius:var(--r-lg);box-shadow:var(--content-glass-shadow);}
.cg-developer-text p{color:var(--cg-text-light);margin-bottom:16px;}
.cg-developer-text a.site-link{color:var(--cg-content-accent);font-weight:700;}

/* Awards */
.cg-awards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px;}
.cg-award-card{background:var(--content-glass);border-radius:var(--r-md);overflow:hidden;border:1px solid var(--content-glass-border);backdrop-filter:blur(20px) saturate(150%) brightness(1.04);-webkit-backdrop-filter:blur(20px) saturate(150%) brightness(1.04);box-shadow:var(--content-glass-shadow);transition:box-shadow .35s,transform .35s;}
.cg-award-card:hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(20,16,10,.03),0 1px 2px rgba(20,16,10,.05),0 20px 40px -8px rgba(20,16,10,.14),0 44px 90px -16px rgba(20,16,10,.16);}
.cg-award-card .cg-shutter{width:100%;height:210px;background:var(--content-glass-strong);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--content-glass-border);}
.cg-award-card img{height:100%;width:100%;object-fit:contain;object-position:center;display:block;padding:14px;}
.cg-award-body{padding:24px;}
.cg-award-body h4{font-size:16.5px;margin-bottom:10px;color:var(--cg-brown);}
.cg-award-body p{font-size:13.5px;color:var(--cg-text-light);}

/* =========================================================
   7. LIÊN HỆ
   ========================================================= */
.cg-contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;}
.cg-contact-info h3{color:var(--cg-brown);}
.cg-contact-item{display:flex;gap:16px;margin-bottom:26px;}
.cg-contact-item .ic{width:46px;height:46px;flex:0 0 46px;border-radius:50%;background:var(--content-glass);border:1px solid var(--content-glass-border);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;color:var(--cg-content-accent);}
.cg-contact-item .ic svg{width:19px;height:19px;fill:var(--cg-content-accent);}
.cg-contact-item strong{display:block;color:var(--cg-brown);margin-bottom:4px;}
.cg-contact-item span,.cg-contact-item a{color:var(--cg-text-light);font-size:14.5px;}
.cg-form{background:var(--content-glass);border:1px solid var(--content-glass-border);backdrop-filter:blur(24px) saturate(160%) brightness(1.04);-webkit-backdrop-filter:blur(24px) saturate(160%) brightness(1.04);border-radius:var(--r-lg);padding:42px;box-shadow:var(--content-glass-shadow);}
.cg-form input,.cg-form textarea{width:100%;padding:15px 18px;margin-bottom:16px;background:rgba(20,16,10,.03);border:1px solid var(--content-glass-border);border-radius:var(--r-sm);color:var(--cg-brown);font-family:var(--font-body);transition:border-color .2s,background .2s;}
.cg-form input:focus,.cg-form textarea:focus{outline:none;border-color:var(--cg-gold);background:rgba(20,16,10,.05);}
.cg-form input::placeholder,.cg-form textarea::placeholder{color:#a39a87;}
.cg-form button{width:100%;justify-content:center;}

/* =========================================================
   8. FOOTER
   ========================================================= */
.cg-footer{background:rgba(13,35,43,.82);backdrop-filter:blur(20px);color:#c7c1b3;border-top:1px solid var(--glass-border);}
.cg-footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:50px;padding:64px 24px 48px;}
.cg-footer-col h5{color:#fff;font-family:var(--font-main);font-size:16px;letter-spacing:1px;margin-bottom:22px;position:relative;padding-bottom:12px;}
.cg-footer-col h5:after{content:"";position:absolute;left:0;bottom:0;width:36px;height:2px;background:var(--cg-nav-accent);}
.cg-footer-logo{display:inline-flex;align-items:center;gap:12px;margin-bottom:16px;}
.cg-footer-logo img{max-height:52px;}
.cg-footer-logo .name{font-family:var(--font-main);font-size:24px;font-weight:700;color:#fff;display:block;letter-spacing:.5px;}
.cg-footer-logo .sub{font-size:11px;letter-spacing:3px;color:var(--cg-nav-accent);text-transform:uppercase;display:block;}
.cg-footer-desc{font-size:13.5px;line-height:1.8;color:#c7c1b3;max-width:340px;margin-bottom:24px;}
.cg-footer-social{display:flex;gap:12px;}
.cg-footer-social:empty{display:none;}
.cg-footer-social a{width:40px;height:40px;border-radius:50%;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;transition:.25s;}
.cg-footer-social a:hover{background:var(--cg-gold);border-color:var(--cg-gold);}
.cg-footer-social svg{width:17px;height:17px;fill:var(--cg-nav-accent);transition:.25s;}
.cg-footer-social a:hover svg{fill:var(--cg-dark-brown);}
.cg-footer-nav ul,.cg-footer-contact{list-style:none;margin:0;padding:0;}
.cg-footer-nav li{margin-bottom:13px;font-size:14px;line-height:1.6;color:#c7c1b3;}
.cg-footer-nav a{color:#c7c1b3;position:relative;}
.cg-footer-nav a:hover{color:var(--cg-nav-accent);}
.cg-footer-contact li{margin-bottom:16px;font-size:14px;line-height:1.7;color:#c7c1b3;max-width:320px;}
.cg-footer-contact a{color:#c7c1b3;}
.cg-footer-contact a:hover{color:var(--cg-nav-accent);}
.cg-footer-bottom{border-top:1px solid var(--glass-border);}
.cg-footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:22px 24px;font-size:13px;color:#9c9587;}
.cg-footer-bottom-inner p{margin:0;}
.cg-footer-bottom-links{display:flex;gap:22px;flex-wrap:wrap;}
.cg-footer-bottom-links a{color:#c7c1b3;position:relative;}
.cg-footer-bottom-links a:hover{color:var(--cg-nav-accent);}

@media(max-width:900px){
  .cg-footer-top{grid-template-columns:1fr;gap:36px;padding:50px 24px 36px;}
  .cg-footer-bottom-inner{flex-direction:column;text-align:center;justify-content:center;}
}

/* =========================================================
   9. RESPONSIVE
   ========================================================= */
@media(max-width:1024px){
  .cg-intro,.cg-developer,.cg-contact{grid-template-columns:1fr;}
  .cg-reasons-grid{grid-template-columns:repeat(2,1fr);}
  .cg-info-strip{grid-template-columns:1fr;}
  .cg-awards{grid-template-columns:1fr;}
}
@media(max-width:1380px){
  .cg-header .container{height:78px;}
  .cg-burger{display:flex;}
  .cg-nav{
    position:fixed;
    top:78px;
    left:0;
    right:0;
    flex:none;
    display:block;
    max-height:0;
    overflow:hidden;
    opacity:0;
    background:rgba(13,35,43,.92);
    backdrop-filter:blur(26px);
    border-top:1px solid var(--glass-border);
    transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s ease;
    z-index:998;
  }
  .cg-nav.is-open{
    max-height:calc(100vh - 78px);
    max-height:calc(100dvh - 78px);
    opacity:1;
    overflow-y:auto;
  }
  .cg-nav ul{flex-direction:column;align-items:stretch;gap:0;padding:10px 24px 30px;}
  .cg-nav ul li{border-bottom:1px solid var(--glass-border);}
  .cg-nav ul li:last-child{border-bottom:none;}
  .cg-nav a{display:block;padding:16px 4px;font-size:14px;}
  .cg-nav a:after{display:none;}
}
@media(max-width:1180px){
  .cg-header-right{gap:10px;}
  .cg-hotline span.hotline-text{display:none;}
  .cg-hero-inner{margin-left:24px;}
  .cg-hero-inner h1{font-size:34px;}
  .cg-reasons-grid{grid-template-columns:1fr;}
  .section{padding:60px 0;}
}

/* =========================================================
   10. HIỆU ỨNG CHUYỂN ĐỘNG - SCROLL REVEAL
   ========================================================= */
.cg-reveal{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform;}
.cg-reveal.cg-fade{transform:translateY(0);}
.cg-reveal.cg-left{transform:translateX(-50px);}
.cg-reveal.cg-right{transform:translateX(50px);}
.cg-reveal.cg-zoom{transform:scale(.92);}
.cg-reveal.is-visible{opacity:1;transform:translate(0,0) scale(1);}

.cg-reveal.d1{transition-delay:.1s;}
.cg-reveal.d2{transition-delay:.22s;}
.cg-reveal.d3{transition-delay:.34s;}
.cg-reveal.d4{transition-delay:.46s;}
.cg-reveal.d5{transition-delay:.58s;}
.cg-reveal.d6{transition-delay:.7s;}

/* Chữ banner: hiệu ứng chạy sẵn khi tải trang (không cần chờ observer) */
.cg-hero-inner .eyebrow,
.cg-hero-inner h1,
.cg-hero-inner p,
.cg-hero-actions{
  opacity:0;
  animation:cgHeroUp 1s cubic-bezier(.22,.61,.36,1) forwards;
}
.cg-hero-inner .eyebrow{animation-delay:.2s;}
.cg-hero-inner h1{animation-delay:.4s;}
.cg-hero-inner p{animation-delay:.6s;}
.cg-hero-actions{animation-delay:.8s;}
@keyframes cgHeroUp{
  from{opacity:0;transform:translateY(26px);}
  to{opacity:1;transform:translateY(0);}
}

/* Ken Burns nhẹ cho ảnh nền banner */
.cg-hero{overflow:hidden;}
@keyframes cgKenBurns{
  from{transform:scale(1) translate(0,0);}
  to{transform:scale(1.12) translate(-1%,-2%);}
}

/* Zoom nhẹ khi hover ảnh */
.cg-img-zoom{overflow:hidden;border-radius:var(--r-sm);display:block;}
.cg-img-zoom img{transition:transform .6s cubic-bezier(.22,.61,.36,1);}
.cg-img-zoom:hover img{transform:scale(1.08);}

/* =========================================================
   HIỆU ỨNG MỞ ẢNH "RÈM KÍNH" (Liquid Glass shutter reveal) v2
   - Nhiều lá kính đứng cạnh nhau, mỗi lá co gọn về mép phải của
     chính nó (không phải 1 khối phẳng trượt) -> cảm giác như
     nhiều tấm kính mỏng tan ra lệch nhịp, có chiều sâu thật hơn.
   - Ảnh bên dưới mờ + hơi tối lúc đầu, nét dần lên như đang nhìn
     xuyên một lớp sương kính tan đi.
   - Sau khi rèm mở hết, một tia sáng chéo lướt qua ảnh 1 lần,
     điểm nhấn cuối cùng kiểu bề mặt kính cao cấp.
   ========================================================= */
.cg-shutter{position:relative;overflow:hidden;display:block;border-radius:var(--r-md);isolation:isolate;}

.cg-shutter > img{
  transform:scale(1.12);
  filter:blur(11px) saturate(72%) brightness(.86);
  transition:transform 1.5s cubic-bezier(.22,.61,.36,1),filter 1.1s ease .15s;
}
.cg-shutter.is-open > img{transform:scale(1);filter:blur(0) saturate(100%) brightness(1);}

.cg-shutter-layer{
  position:absolute;inset:0;z-index:6;pointer-events:none;
  display:flex;
}
.cg-shutter-panel{
  display:block;
  flex:1 1 0;
  position:relative;
  transform:scaleX(1);
  transform-origin:right center;
  background:linear-gradient(155deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.05) 45%,rgba(255,255,255,.18) 100%);
  backdrop-filter:blur(20px) saturate(165%);
  -webkit-backdrop-filter:blur(20px) saturate(165%);
  transition:transform 1s cubic-bezier(.76,0,.24,1),opacity .6s ease .35s;
}
.cg-shutter-panel:before{ /* ánh kim chạy dọc mép đang mở của từng lá kính */
  content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;z-index:1;
  background:linear-gradient(180deg,transparent,var(--cg-gold-light) 15%,var(--cg-gold) 50%,var(--cg-gold-light) 85%,transparent);
  box-shadow:0 0 16px 3px rgba(184,147,90,.7);
}
/* mỗi lá mở lệch nhịp nhau một chút -> như tay đang kéo rèm, không phẳng lì cùng lúc */
.cg-shutter-panel:nth-child(1){transition-delay:0s;}
.cg-shutter-panel:nth-child(2){transition-delay:.05s;}
.cg-shutter-panel:nth-child(3){transition-delay:.1s;}
.cg-shutter-panel:nth-child(4){transition-delay:.15s;}
.cg-shutter-panel:nth-child(5){transition-delay:.2s;}
.cg-shutter-panel:nth-child(6){transition-delay:.25s;}
.cg-shutter-panel:nth-child(7){transition-delay:.3s;}
.cg-shutter-panel:nth-child(8){transition-delay:.35s;}
.cg-shutter-panel:nth-child(9){transition-delay:.4s;}
.cg-shutter-panel:nth-child(10){transition-delay:.45s;}

.cg-hero-media.is-open .cg-shutter-panel,
.cg-shutter.is-open .cg-shutter-panel{transform:scaleX(0);opacity:0;}
.cg-hero-media.is-open .cg-hero-bg{filter:blur(0) saturate(100%) brightness(1);}

/* Tia sáng lướt qua ảnh - chỉ chạy 1 lần, ngay sau khi rèm kính mở hết */
.cg-shutter:after{
  content:"";position:absolute;top:0;left:-60%;width:36%;height:100%;z-index:7;pointer-events:none;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.05) 62%,transparent 100%);
  transform:skewX(-18deg);
  opacity:0;
}
.cg-shutter.is-open:after{animation:cgGlassShine 1.15s ease .8s 1 both;}
@keyframes cgGlassShine{
  0%{opacity:0;left:-60%;}
  18%{opacity:.85;}
  60%{opacity:.4;}
  100%{opacity:0;left:130%;}
}

@media (prefers-reduced-motion: reduce){
  .cg-shutter-panel{transition:none!important;transform:scaleX(0)!important;}
  .cg-shutter > img,.cg-hero-bg{transition:none!important;transform:none!important;filter:none!important;animation:none!important;}
  .cg-shutter:after{animation:none!important;display:none!important;}
}

/* Icon lắc nhẹ khi hover trong card lý do / thông tin */
.cg-reason-card .icon,.cg-info-card .icon{transition:transform .4s;}
.cg-reason-card:hover .icon,.cg-info-card:hover .icon{transform:rotate(-8deg) scale(1.08);}

/* Underline chạy động cho sec-title */
.sec-title h2:after{width:0;animation:cgLineGrow 1s ease forwards;animation-delay:.3s;}
.sec-title.is-visible h2:after,.sec-title h2:after{animation-play-state:running;}
@keyframes cgLineGrow{
  from{width:0;}
  to{width:70px;}
}

@media (prefers-reduced-motion: reduce){
  .cg-reveal,.cg-hero-inner .eyebrow,.cg-hero-inner h1,.cg-hero-inner p,.cg-hero-actions,.cg-hero{
    animation:none!important;transition:none!important;opacity:1!important;transform:none!important;
  }
}

/* ============ Popup video / nhà mẫu 360° ============ */
.cg-lightbox{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,6,8,.85);
  backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transition:opacity .3s ease;
  padding:24px;
}
.cg-lightbox.is-open{opacity:1; visibility:visible;}
.cg-lightbox-content{position:relative; width:100%; max-width:1100px;}
.cg-lightbox-content .cg-embed-frame{
  position:relative; width:100%; padding-top:56.25%;
  background:#000; border-radius:var(--r-md); overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  border:1px solid var(--glass-border);
}
.cg-lightbox-content .cg-embed-frame iframe,
.cg-lightbox-content .cg-embed-frame video{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.cg-lightbox-close{
  position:absolute; top:-46px; right:0;
  width:38px; height:38px; border-radius:50%;
  background:var(--glass); border:1px solid var(--glass-border);
  backdrop-filter:blur(12px);
  color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .25s;
}
.cg-lightbox-close:hover{background:rgba(255,255,255,.22);}
.cg-lightbox-close svg{width:18px;height:18px;}
@media(max-width:600px){
  .cg-lightbox-close{top:-40px; width:34px; height:34px;}
}

/* ============ Widget sidebar (nếu theme dùng) ============ */
.widget{background:var(--content-glass);border:1px solid var(--content-glass-border);backdrop-filter:blur(18px);border-radius:var(--r-md);padding:26px;margin-bottom:24px;}
.widget h4{color:var(--cg-brown);}


/* =========================================================
   10. v2.1 — Trang chủ 4 section, trang Category, menu 10 mục
   ========================================================= */
@media(min-width:1381px){
  .cg-nav ul{gap:16px;}
}
@media(min-width:1381px) and (max-width:1560px){
  .cg-nav ul{gap:13px;}
  .cg-nav a{font-size:12px;letter-spacing:.2px;}
}
.cg-field-card{text-align:left;}
.cg-field-card .icon .num{font-size:20px;font-weight:800;letter-spacing:1px;color:var(--cg-content-accent);}
.cg-field-card h4{font-size:17px;line-height:1.4;text-transform:uppercase;letter-spacing:.3px;}
.cg-field-card p.sub{color:var(--cg-content-accent);font-weight:700;font-size:15px;margin-bottom:10px;}
.cg-section-more{text-align:center;margin-top:44px;}
.cg-section-more .btn-outline{color:var(--cg-brown)!important;border-color:var(--cg-brown);}
.section.blue .cg-section-more .btn-outline{color:var(--cg-gold-light)!important;border-color:var(--glass-border);}
.section.blue .cg-section-more .btn-outline:hover,.cg-section-more .btn-outline:hover{color:var(--cg-dark-brown)!important;}
.cg-news-pagination .nav-links{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
.cg-news-pagination .page-numbers{min-width:42px;height:42px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--content-glass);border:1px solid var(--content-glass-border);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--cg-brown);font-weight:600;font-size:14px;transition:.25s;}
.cg-news-pagination a.page-numbers:hover,.cg-news-pagination .page-numbers.current{background:var(--cg-gold);border-color:var(--cg-gold);color:var(--cg-dark-brown);}
.cg-news-pagination .screen-reader-text{display:none;}

/* Bài viết: menu phụ dạng nút nổi (Liquid Glass) */
.cg-page-content h2{scroll-margin-top:120px;}
.cg-toc-fab{position:fixed;right:28px;bottom:28px;z-index:900;display:flex;flex-direction:column;align-items:flex-end;gap:14px;opacity:0;transform:translateY(16px);animation:cgTocIn .7s .5s cubic-bezier(.2,.8,.2,1) forwards;}
@keyframes cgTocIn{to{opacity:1;transform:none;}}
.cg-toc-btn{position:relative;display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 24px 0 20px;border-radius:999px;cursor:pointer;font-family:inherit;color:#fdfbf6;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.05)),rgba(13,35,43,.58);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.2),0 14px 34px -8px rgba(0,0,0,.5);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;}
.cg-toc-btn:before{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 0 0 rgba(220,185,124,.5);animation:cgTocPulse 2.8s ease-out infinite;pointer-events:none;}
@keyframes cgTocPulse{0%{box-shadow:0 0 0 0 rgba(220,185,124,.45);}70%{box-shadow:0 0 0 14px rgba(220,185,124,0);}100%{box-shadow:0 0 0 0 rgba(220,185,124,0);}}
.cg-toc-btn:hover{transform:translateY(-3px);border-color:rgba(220,185,124,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 18px 40px -8px rgba(0,0,0,.55),0 0 28px -4px rgba(220,185,124,.35);}
.cg-toc-btn:active{transform:scale(.97);}
.cg-toc-btn .ico{position:relative;width:20px;height:14px;display:inline-block;}
.cg-toc-btn .ico i{position:absolute;left:0;height:2px;border-radius:2px;background:var(--cg-nav-accent);transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s,width .3s,top .3s;}
.cg-toc-btn .ico i:nth-child(1){top:0;width:20px;}
.cg-toc-btn .ico i:nth-child(2){top:6px;width:14px;}
.cg-toc-btn .ico i:nth-child(3){top:12px;width:20px;}
.cg-toc-fab.is-open .ico i:nth-child(1){top:6px;transform:rotate(45deg);}
.cg-toc-fab.is-open .ico i:nth-child(2){opacity:0;width:20px;}
.cg-toc-fab.is-open .ico i:nth-child(3){top:6px;transform:rotate(-45deg);}
.cg-toc-fab.is-open .cg-toc-btn:before{animation:none;}
.cg-toc-panel{position:relative;width:min(360px,calc(100vw - 32px));max-height:min(62vh,520px);overflow-y:auto;padding:24px 18px 16px;border-radius:var(--r-lg);color:#f3eee3;background:linear-gradient(155deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 38%),rgba(13,35,43,.72);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 30px 70px -14px rgba(0,0,0,.6);transform-origin:bottom right;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px) scale(.86);filter:blur(8px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.25,1.15),filter .35s ease,visibility 0s .45s;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent;}
.cg-toc-fab.is-open .cg-toc-panel{opacity:1;visibility:visible;pointer-events:auto;transform:none;filter:none;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.25,1.15),filter .35s ease,visibility 0s;}
.cg-toc-panel h5{margin:0 8px 14px;font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:700;color:var(--cg-nav-accent);}
.cg-toc-panel ul{list-style:none;margin:0;padding:0;}
.cg-toc-panel li{margin:0;opacity:0;transform:translateY(10px);}
.cg-toc-fab.is-open .cg-toc-panel li{opacity:1;transform:none;transition:opacity .4s ease,transform .45s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.08s + var(--i,0)*.045s);}
.cg-toc-panel a{display:flex;align-items:flex-start;gap:12px;padding:11px 12px;margin-bottom:3px;border-radius:14px;border:1px solid transparent;color:#e9e4d8;font-size:14.5px;font-weight:600;line-height:1.45;transition:background .25s,border-color .25s,color .25s,transform .25s;}
.cg-toc-panel a .n{flex:0 0 auto;min-width:26px;font-size:12px;font-weight:800;letter-spacing:1px;color:var(--cg-nav-accent);opacity:.75;padding-top:2px;}
.cg-toc-panel a:hover{background:rgba(255,255,255,.1);transform:translateX(3px);}
.cg-toc-panel a.is-active{background:rgba(255,255,255,.13);border-color:rgba(220,185,124,.45);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25);}
.cg-toc-panel a.is-active .n{opacity:1;}
@media(max-width:600px){
  .cg-toc-fab{right:16px;bottom:18px;}
  .cg-toc-btn{height:50px;padding:0 20px 0 16px;}
}
@media(prefers-reduced-motion:reduce){
  .cg-toc-fab,.cg-toc-btn:before{animation:none;opacity:1;transform:none;}
  .cg-toc-panel,.cg-toc-panel li{transition:opacity .2s;filter:none;transform:none;}
}

/* Footer - icon liên hệ (đồng bộ với khối Liên hệ) */
.cg-footer-contact li{display:flex;align-items:flex-start;gap:14px;}
.cg-footer-contact .ic{flex:0 0 38px;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);transition:.25s;}
.cg-footer-contact .ic svg{width:16px;height:16px;fill:var(--cg-nav-accent);}
.cg-footer-contact li:hover .ic{background:var(--cg-gold);border-color:var(--cg-gold);}
.cg-footer-contact li:hover .ic svg{fill:var(--cg-dark-brown);}
.cg-footer-contact .tx,.cg-footer-contact li>a{padding-top:7px;}