/* ==========================================================================
   ChillGo Landing — design system (ChillGo Landing.dc.html)
   Nạp sau style.css, dùng tiền tố .cg- nên không đụng class cũ.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0&display=swap');

:root {
  --cg-navy:      #0A2038;
  --cg-blue:      #0B4C9E;
  --cg-blue-dark: #093C7D;
  --cg-link:      #0B5FBF;
  --cg-amber:     #F5A623;
  --cg-amber-dk:  #E08700;
  --cg-ink:       #13202F;
  --cg-body:      #4A5B6E;
  --cg-body-2:    #3A4B5E;
  --cg-muted:     #5B6B7D;
  --cg-line:      #E4E8ED;
  --cg-surface:   #F6F7F9;
  --cg-tint:      #E8F1FC;
  --cg-footer:    #071A2E;
  --cg-max:       1240px;
  --cg-pad:       clamp(18px, 4vw, 28px);
}

body {
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--cg-ink);
  background: var(--cg-surface);
  -webkit-font-smoothing: antialiased;
}

html { scroll-padding-top: 90px; }

/* Trang con vẫn dùng .page-hero của style.css: header cũ fixed 76px, header mới
   sticky nên đã chiếm chỗ trong luồng → bớt padding bù. */
.page-hero { padding-top: 64px; }

.ms {
  font-family: 'Material Symbols Rounded';
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

@keyframes cg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== Layout helpers ================================================== */
.cg-wrap { max-width: var(--cg-max); margin: 0 auto; padding: 0 var(--cg-pad); }
.cg-sec  { padding: clamp(56px, 7vw, 92px) 0; }
.cg-sec--white { background: #fff; }
.cg-sec--surface { background: var(--cg-surface); }

.cg-sec-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 34px; max-width: 820px; }
.cg-eyebrow {
  font-size: 17px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cg-blue);
}
.cg-eyebrow--amber { color: var(--cg-amber); }
.cg-h2 {
  font-size: clamp(30px, 3.4vw, 46px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.15; text-wrap: pretty; margin: 0;
}
.cg-lead { font-size: clamp(18px, 2vw, 21px); line-height: 1.6; color: var(--cg-body); margin: 0; }

/* Ô icon vuông bo góc */
.cg-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 20px;
  background: var(--cg-tint); font-size: 40px; color: var(--cg-blue); flex-shrink: 0;
}
.cg-icon--sm { width: 64px; height: 64px; font-size: 38px; }
.cg-icon--raised { background: #fff; box-shadow: 0 4px 14px rgba(11,76,158,0.12); }
.cg-icon--amber { background: rgba(245,166,35,0.16); color: var(--cg-amber); }

/* ===== Buttons ========================================================= */
.cg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px; border-radius: 999px; font-size: 19px; font-weight: 800;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  transition: background 160ms, color 160ms, border-color 160ms, transform 160ms;
}
.cg-btn:hover { transform: translateY(-1px); }
.cg-btn--amber { background: var(--cg-amber); color: #24170A; }
.cg-btn--amber:hover { background: #FFB63C; color: #24170A; }
.cg-btn--blue { background: var(--cg-blue); color: #fff; }
.cg-btn--blue:hover { background: var(--cg-blue-dark); color: #fff; }
.cg-btn--white { background: #fff; border-color: #D5DDE6; color: var(--cg-blue); }
.cg-btn--white:hover { background: #EEF3F9; color: var(--cg-blue); }
.cg-btn--ghost {
  background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22);
  color: #fff; font-weight: 700;
}
.cg-btn--ghost:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* Nút mở widget đặt chuyến — CTA chính, icon xe cùng cỡ chữ */
.cg-btn--book .ms { font-size: 24px; }

.cg-store { height: 58px; width: auto; display: block; }
.cg-stores { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* ===== Header ========================================================== */
.cg-header {
  position: sticky; top: 0; z-index: 500;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cg-line);
}
.cg-header-inner {
  position: relative; max-width: var(--cg-max); margin: 0 auto;
  padding: 12px var(--cg-pad);
  display: flex; align-items: center; gap: 14px 20px;
}
.cg-logo { display: flex; align-items: center; flex-shrink: 0; }
.cg-logo img { height: 46px; width: auto; display: block; }

.cg-nav { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.cg-nav > a,
.cg-nav-drop > a {
  color: var(--cg-ink); font-size: 17px; font-weight: 600;
  padding: 8px 2px; border-bottom: 2px solid transparent;
  transition: color 160ms, border-color 160ms; white-space: nowrap;
}
.cg-nav > a:hover,
.cg-nav-drop > a:hover,
.cg-nav > a.is-active {
  color: var(--cg-blue); border-bottom-color: var(--cg-amber);
}
.cg-nav-drop { position: relative; display: flex; align-items: center; }
.cg-nav-drop > a { display: inline-flex; align-items: center; gap: 4px; }
.cg-nav-drop > a .ms { font-size: 22px; }
.cg-drop {
  position: absolute; left: -14px; top: 100%; padding-top: 14px;
  min-width: 264px; flex-direction: column; display: none;
}
.cg-nav-drop:hover .cg-drop,
.cg-nav-drop:focus-within .cg-drop { display: flex; }
.cg-drop-inner {
  background: #fff; border: 1px solid var(--cg-line); border-radius: 18px;
  box-shadow: 0 22px 44px rgba(4,24,48,0.16);
  padding: 10px; display: flex; flex-direction: column; gap: 2px;
}
.cg-drop-inner a {
  color: var(--cg-ink); font-size: 17px; font-weight: 600;
  padding: 12px 14px; border-radius: 12px; white-space: nowrap;
  transition: background 160ms, color 160ms;
}
.cg-drop-inner a:hover { background: #EEF3F9; color: var(--cg-blue); }

.cg-burger {
  display: none; margin-left: auto; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px; border: 1px solid #D5DDE6;
  background: #fff; color: var(--cg-blue); cursor: pointer; flex-shrink: 0;
}
.cg-burger .ms { font-size: 34px; }

.cg-panel {
  display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 55;
  background: #fff; box-shadow: 0 18px 34px rgba(4,24,48,0.14);
  flex-direction: column; gap: 2px;
  padding: 10px var(--cg-pad) 18px; border-top: 1px solid #E8ECF1;
  max-height: 78vh; overflow-y: auto;
}
.cg-panel.is-open { display: flex; }
.cg-panel a,
.cg-panel .cg-panel-toggle {
  color: var(--cg-ink); font-size: 20px; font-weight: 600;
  padding: 14px 12px; border-radius: 12px;
}
.cg-panel a:hover,
.cg-panel .cg-panel-toggle:hover { background: #EEF3F9; color: var(--cg-blue); }
.cg-panel .cg-panel-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; background: none; border: 0; text-align: left;
  font-family: inherit; cursor: pointer;
}
.cg-panel .cg-panel-toggle .ms { font-size: 26px; }
.cg-panel-sub { display: none; flex-direction: column; gap: 2px; padding: 0 0 6px 12px; }
.cg-panel-sub.is-open { display: flex; }
.cg-panel-sub a { color: var(--cg-body-2); font-size: 18px; padding: 12px; }
.cg-panel-call {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--cg-blue); color: #fff !important; padding: 15px 22px;
  border-radius: 999px; font-size: 19px; font-weight: 800; margin-top: 8px;
}
.cg-panel-call .ms { font-size: 24px; }
/* CTA đặt chuyến trong menu mobile — nổi hơn nút gọi nên dùng amber */
.cg-panel-book {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--cg-amber); color: #24170A !important; padding: 15px 22px;
  border-radius: 999px; font-size: 19px; font-weight: 800; margin-top: 14px;
}
.cg-panel-book .ms { font-size: 24px; }

@media (max-width: 939px) {
  .cg-nav { display: none; }
  .cg-burger { display: inline-flex; }
}

/* ===== Hero ============================================================ */
.cg-hero { position: relative; background: var(--cg-navy); overflow: hidden; }
.cg-hero-viewport { overflow: hidden; position: relative; }
.cg-hero-track { display: flex; width: 100%; transition: transform 700ms cubic-bezier(.4,0,.2,1); }

.cg-hero-desktop { display: block; }
.cg-hero-mobile  { display: none; }

.cg-slide {
  flex: 0 0 100%; width: 100%;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  align-items: center; gap: 48px 40px;
  padding: clamp(48px, 6vw, 76px) max(var(--cg-pad), calc((100% - var(--cg-max)) / 2)) clamp(74px, 8vw, 96px);
}
.cg-slide-text { display: flex; flex-direction: column; gap: 26px; }
.cg-hero-badge {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  background: rgba(245,166,35,0.16); border: 1px solid rgba(245,166,35,0.45);
  padding: 9px 18px; border-radius: 999px;
}
.cg-hero-badge .ms { font-size: 22px; color: var(--cg-amber); flex-shrink: 0; }
.cg-hero-badge span:not(.ms) { font-size: 17px; font-weight: 700; letter-spacing: 0.02em; color: #F7C46C; }
.cg-hero-title {
  font-size: clamp(38px, 4.6vw, 66px); line-height: 1.08; font-weight: 800;
  color: #fff; letter-spacing: -0.02em; text-wrap: pretty; margin: 0;
}
.cg-hero-title span { color: var(--cg-amber); }
.cg-hero-desc {
  font-size: clamp(18px, 2vw, 22px); line-height: 1.65; color: #C6D3E2;
  max-width: 560px; text-wrap: pretty; margin: 0;
}
.cg-hero-media { position: relative; }
.cg-hero-media > img {
  width: 100%; height: clamp(240px, 32vw, 460px); object-fit: cover; display: block;
  border-radius: 28px; border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 40px 80px rgba(0,0,0,0.45);
}
.cg-hero-chip {
  position: absolute; left: -18px; bottom: -22px; background: #fff;
  border-radius: 20px; padding: 18px 22px; display: flex; align-items: center; gap: 14px;
  box-shadow: 0 18px 40px rgba(3,20,40,0.28);
}
.cg-hero-chip .ms {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 20px; background: var(--cg-tint);
  font-size: 34px; color: var(--cg-blue); flex-shrink: 0;
}
.cg-hero-chip b { display: block; font-size: 20px; font-weight: 800; }
.cg-hero-chip small { font-size: 16px; color: var(--cg-muted); }

.cg-hero-nav {
  position: absolute; left: 0; right: 0; bottom: 26px;
  display: flex; justify-content: center; align-items: center; gap: 14px;
}
.cg-arrow {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.1); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.cg-arrow .ms { font-size: 26px; }
.cg-arrow:hover { background: rgba(255,255,255,0.2); }
.cg-dot {
  height: 10px; width: 10px; border-radius: 999px; border: 0; padding: 0;
  cursor: pointer; transition: width 300ms, background 300ms;
  background: rgba(255,255,255,0.4);
}
.cg-dot.is-active { width: 34px; background: var(--cg-amber); }

.cg-hero-mobile-slide { flex: 0 0 100%; width: 100%; height: clamp(340px, 96vw, 520px); }
.cg-hero-mobile-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-hero-mobile-dots {
  position: absolute; left: 0; right: 0; bottom: 16px;
  display: flex; justify-content: center; align-items: center; gap: 10px;
}
.cg-hero-mobile-cta { padding: 22px var(--cg-pad) 30px; display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 939px) {
  .cg-hero-desktop { display: none; }
  .cg-hero-mobile  { display: block; }
  .cg-hero-nav     { display: none; }
}

/* ===== Stats bar ======================================================= */
.cg-stats-sec { background: #fff; border-bottom: 1px solid var(--cg-line); }
.cg-stats {
  max-width: var(--cg-max); margin: 0 auto; padding: 54px var(--cg-pad);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px 24px;
}
.cg-stat {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 8px 20px 8px 0; border-right: 1px solid #E9EDF2;
}
.cg-stat:last-child { border-right: 0; padding-right: 0; }
.cg-stat-num { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.cg-stat-num span { color: var(--cg-amber); }
.cg-stat-label {
  font-size: 19px; font-weight: 600; color: var(--cg-body-2);
  margin-top: 8px; line-height: 1.45;
}
@media (max-width: 720px) { .cg-stat { border-right: 0; padding-right: 0; } }

/* ===== Dịch vụ ========================================================= */
.cg-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 22px;
}
.cg-card {
  background: #fff; border: 1px solid var(--cg-line); border-radius: 22px;
  padding: clamp(24px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 14px;
  transition: box-shadow 220ms, transform 220ms, border-color 220ms;
}
.cg-card:hover {
  box-shadow: 0 22px 46px rgba(11,76,158,0.14);
  transform: translateY(-4px); border-color: #C9DBF2;
}
.cg-card h3 { font-size: 26px; font-weight: 800; line-height: 1.25; margin: 0; }
.cg-card p  { font-size: 19px; line-height: 1.7; color: var(--cg-body); margin: 0; }
.cg-card-fit {
  margin-top: auto; padding-top: 16px; border-top: 1px solid #EDF1F6;
  display: flex; gap: 12px; align-items: flex-start;
}
.cg-card-fit .ms { font-size: 26px; color: var(--cg-amber); flex-shrink: 0; }
.cg-card-fit p { font-size: 18px; line-height: 1.6; color: var(--cg-body-2); }
.cg-card-fit b { font-weight: 800; }

/* ===== Ưu điểm ========================================================= */
.cg-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px 28px; }
.cg-why-item {
  display: flex; gap: 20px; align-items: flex-start;
  background: #F6F8FB; border-radius: 20px; padding: 28px;
}
.cg-why-item h3 { font-size: 24px; font-weight: 800; line-height: 1.3; margin: 0 0 8px; }
.cg-why-item p  { font-size: 19px; line-height: 1.7; color: var(--cg-body); margin: 0; }

/* ===== Tải ứng dụng ==================================================== */
.cg-download { background: var(--cg-navy); padding: clamp(56px, 7vw, 96px) 0; }
.cg-download-inner {
  max-width: var(--cg-max); margin: 0 auto; padding: 0 var(--cg-pad);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 48px 60px; align-items: center;
}
.cg-download-img {
  width: 100%; height: clamp(260px, 34vw, 480px); object-fit: cover; display: block;
  border-radius: 26px; border: 1px solid rgba(255,255,255,0.14);
}
.cg-download-text { display: flex; flex-direction: column; gap: 22px; }
.cg-download-text .cg-h2 { color: #fff; }
.cg-download-text .cg-lead { color: #C6D3E2; }
.cg-dl-list { display: flex; flex-direction: column; gap: 14px; margin: 4px 0 0; padding: 0; list-style: none; }
.cg-dl-list li {
  display: flex; gap: 14px; align-items: center;
  font-size: 20px; color: #E6EEF7; font-weight: 600;
}
.cg-dl-list .ms {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 20px; background: rgba(245,166,35,0.16);
  font-size: 30px; color: var(--cg-amber); flex-shrink: 0;
}

/* ===== Cam kết ========================================================= */
.cg-commit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.cg-commit-card {
  border: 1px solid var(--cg-line); border-radius: 20px; padding: 28px;
  display: flex; flex-direction: column; gap: 12px; background: #fff;
}
.cg-commit-card h3 { font-size: 23px; font-weight: 800; margin: 0; }
.cg-commit-card p  { font-size: 18px; line-height: 1.7; color: var(--cg-body); margin: 0; }

/* ===== Đối tác (marquee) =============================================== */
.cg-partners { background: #fff; padding: clamp(52px, 6vw, 84px) 0; border-top: 1px solid var(--cg-line); }
.cg-marquee {
  position: relative; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.cg-marquee-track {
  display: flex; width: max-content; gap: 18px;
  animation: cg-marquee 88s linear infinite;
}
.cg-marquee:hover .cg-marquee-track { animation-play-state: paused; }
.cg-marquee-group { display: flex; gap: 18px; padding-left: 18px; }
.cg-partner {
  flex: 0 0 auto; background: #FAFBFC; border: 1px solid var(--cg-line);
  border-radius: 18px; height: 118px; width: 220px; padding: 0 26px;
  display: flex; align-items: center; justify-content: center;
}
.cg-partner img { max-height: 76px; max-width: 100%; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .cg-marquee-track { animation: none; } }

/* ===== Đánh giá ======================================================== */
.cg-tm-viewport { overflow: hidden; margin: 0 -11px; }
.cg-tm-track { display: flex; width: 100%; transition: transform 600ms cubic-bezier(.4,0,.2,1); }
.cg-tm-item { width: 100%; padding: 4px 11px; flex: 0 0 50%; }
.cg-tm-card {
  height: 100%; background: #fff; border: 1px solid var(--cg-line); border-radius: 22px;
  padding: clamp(24px, 2.5vw, 32px); display: flex; flex-direction: column; gap: 18px;
}
.cg-stars { color: var(--cg-amber); font-size: 22px; letter-spacing: 2px; }
.cg-tm-card p { font-size: 20px; line-height: 1.7; color: #22303F; margin: 0; }
.cg-tm-author { display: flex; gap: 16px; align-items: center; margin-top: auto; }
.cg-tm-author img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; }
.cg-tm-author img.is-logo { width: 78px; height: 56px; border-radius: 0; object-fit: contain; flex-shrink: 0; }
.cg-tm-name { font-size: 20px; font-weight: 800; }
.cg-tm-role { font-size: 17px; color: var(--cg-muted); }
.cg-tm-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 28px; }
.cg-tm-nav .cg-arrow { border-color: #D5DDE6; background: #fff; color: var(--cg-blue); }
.cg-tm-nav .cg-arrow:hover { background: #EEF3F9; }
.cg-tm-nav .cg-dot { background: #C6CFDA; }
.cg-tm-nav .cg-dot.is-active { background: var(--cg-amber); }
@media (max-width: 939px) { .cg-tm-item { flex-basis: 100%; } }

/* ===== Đối tác tài xế ================================================== */
.cg-driver { background: var(--cg-blue); padding: clamp(56px, 7vw, 88px) 0; }
.cg-driver-inner {
  max-width: var(--cg-max); margin: 0 auto; padding: 0 var(--cg-pad);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 48px; align-items: center;
}
.cg-driver-text { display: flex; flex-direction: column; gap: 22px; }
.cg-driver-text .cg-h2 { color: #fff; }
.cg-driver-text .cg-lead { color: #CFE0F5; max-width: 560px; }
.cg-driver-call {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  color: #fff; font-size: 19px; font-weight: 700;
  border-bottom: 2px solid rgba(255,255,255,0.4); padding-bottom: 4px;
}
.cg-driver-call:hover { color: #fff; border-bottom-color: #fff; }
.cg-driver-call .ms { font-size: 24px; }
.cg-benefits { display: grid; gap: 16px; }
.cg-benefit {
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.16);
  border-radius: 20px; padding: 24px; display: flex; gap: 18px; align-items: center;
}
.cg-benefit b { font-size: 22px; font-weight: 800; color: #fff; display: block; }
.cg-benefit span:not(.ms) { font-size: 18px; color: #CFE0F5; line-height: 1.6; margin-top: 4px; display: block; }

/* ===== Affiliate ======================================================= */
.cg-aff-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 22px; margin-bottom: 34px;
}
.cg-aff-card {
  background: #fff; border: 1px solid var(--cg-line); border-radius: 22px;
  padding: clamp(24px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 14px;
}
.cg-aff-card h3 { font-size: 24px; font-weight: 800; line-height: 1.3; margin: 0; }
.cg-aff-card p  { font-size: 19px; line-height: 1.7; color: var(--cg-body); margin: 0; }
.cg-aff-cta {
  background: #fff; border: 1px solid var(--cg-line); border-radius: 22px;
  padding: clamp(24px, 3vw, 36px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px;
}
.cg-aff-cta h3 { font-size: 26px; font-weight: 800; line-height: 1.3; margin: 0; }
.cg-aff-cta p  { font-size: 19px; line-height: 1.7; color: var(--cg-body); margin: 8px 0 0; }
.cg-aff-cta img { height: 26px; width: auto; }

/* ===== Tin tức ========================================================= */
.cg-news-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 22px;
}
.cg-news-card {
  border: 1px solid var(--cg-line); border-radius: 22px; overflow: hidden;
  display: flex; flex-direction: column; color: inherit; background: #fff;
  transition: box-shadow 220ms, transform 220ms;
}
.cg-news-card:hover { box-shadow: 0 20px 40px rgba(11,76,158,0.12); transform: translateY(-3px); color: inherit; }
.cg-news-thumb { width: 100%; height: 210px; object-fit: cover; display: block; }
.cg-news-thumb--empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--cg-tint); color: var(--cg-blue); font-size: 56px;
}
.cg-news-body { padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.cg-news-body h3 { font-size: 22px; font-weight: 800; line-height: 1.35; margin: 0; }
.cg-news-body p  { font-size: 18px; line-height: 1.6; color: var(--cg-body); margin: 0; }
.cg-news-more { font-size: 18px; font-weight: 700; color: var(--cg-link); margin-top: 4px; }
.cg-news-all { text-align: center; margin-top: 40px; }

/* ===== Footer ========================================================== */
.cg-footer {
  background: var(--cg-footer); color: #C6D3E2;
  padding: clamp(48px, 6vw, 72px) 0 32px;
}
.cg-footer a { color: #C6D3E2; }
.cg-footer a:hover { color: var(--cg-amber); }
.cg-footer-grid {
  max-width: var(--cg-max); margin: 0 auto; padding: 0 var(--cg-pad);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px 44px;
}
.cg-footer-brand { display: flex; flex-direction: column; gap: 18px; }
.cg-footer-brand img.cg-footer-logo { height: 52px; width: auto; align-self: flex-start; }
.cg-footer p { font-size: 18px; line-height: 1.7; margin: 0; }
.cg-footer-col { display: flex; flex-direction: column; gap: 14px; }
.cg-footer-col h4 { font-size: 19px; font-weight: 800; color: #fff; margin: 0; }
.cg-footer-col a { font-size: 18px; }
.cg-footer-phone { color: #fff !important; font-size: 22px; font-weight: 800; }
/* 6 mạng xã hội xếp lưới 3 cột × 2 hàng trong cột "Hỗ trợ" */
.cg-footer-social {
  display: grid; grid-template-columns: repeat(3, 42px);
  gap: 12px; margin-top: 4px; width: max-content;
}
.cg-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  color: #C6D3E2; font-size: 18px; line-height: 1;
  transition: background 160ms, color 160ms, border-color 160ms, transform 160ms;
}
.cg-social:hover { color: #fff; transform: translateY(-2px); }
.cg-social--facebook:hover  { background: #1877F2; border-color: #1877F2; }
.cg-social--youtube:hover   { background: #FF0000; border-color: #FF0000; }
.cg-social--tiktok:hover    { background: #000;    border-color: #000; }
.cg-social--threads:hover   { background: #000;    border-color: #000; }
.cg-social--instagram:hover { background: #E1306C; border-color: #E1306C; }

/* Zalo không có glyph trong Font Awesome — dùng logo tròn sẵn có */
.cg-social--zalo { background: none; border-color: transparent; padding: 0; }
.cg-social--zalo img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 50%; }
.cg-social--zalo:hover { background: none; border-color: transparent; }
.cg-footer-stores { display: flex; gap: 14px; flex-wrap: wrap; }
.cg-footer-stores img { height: 46px; width: auto; display: block; }
.cg-footer-bottom {
  max-width: var(--cg-max); margin: 40px auto 0;
  padding: 24px var(--cg-pad) 0; border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 17px; color: #8FA3B8;
}

/* ===== Nút nổi ========================================================= */
.cg-float {
  position: fixed; right: clamp(12px, 3vw, 22px); bottom: clamp(12px, 3vw, 22px);
  z-index: 600; display: flex; flex-direction: column; gap: 12px;
}
.cg-float-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 14px clamp(16px, 3vw, 22px); border-radius: 999px;
  font-size: clamp(17px, 2.2vw, 19px); font-weight: 800;
  box-shadow: 0 14px 30px rgba(4,24,48,0.25);
}
.cg-float-call { background: var(--cg-blue); color: #fff; }
.cg-float-call:hover { color: #fff; }
.cg-float-call .ms { font-size: 26px; }
.cg-float-zalo { background: #fff; color: var(--cg-blue); }
.cg-float-zalo:hover { color: var(--cg-blue); }
.cg-float-zalo img { height: 26px; width: auto; }
.cg-totop {
  align-self: flex-end; width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid #D5DDE6; background: #fff; color: var(--cg-blue); cursor: pointer;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px rgba(4,24,48,0.22);
  transition: background 160ms, color 160ms; padding: 0;
}
.cg-totop.is-visible { display: flex; }
.cg-totop:hover { background: var(--cg-blue); color: #fff; }
.cg-totop .ms { font-size: 30px; }
@media (min-width: 940px) { .cg-float-call { display: none; } }

/* Nút nổi của widget đặt chuyến (chillgo-widget.js).
   Chế độ góc phải: JS dời nút vào .cg-float, nằm ngay dưới Gọi ngay / Zalo.
   Chỉ gỡ position:fixed để nút chạy theo flex column — phần còn lại (gradient
   xanh, bo tròn, logo) giữ nguyên bản gốc của widget. */
.cg-float .cgw-fab { position: static; }
/* Widget ẩn nhãn ở ≤560px, nhưng các nút cùng cụm đều có chữ → giữ lại cho đồng bộ */
.cg-float .cgw-fab .cgw-fab-label { display: inline; }
@media (max-width: 560px) {
  .cg-float .cgw-fab { padding: 15px 22px 15px 17px; }
}

/* Nút đứng riêng (trang không có cụm .cg-float, hoặc chọn góc trái):
   canh cùng lề với theme + né thanh home iPhone */
.cgw-fab.cgw-fab-right {
  right: clamp(12px, 3vw, 22px);
  bottom: calc(clamp(12px, 3vw, 22px) + env(safe-area-inset-bottom, 0px));
}
.cgw-fab.cgw-fab-left {
  left: clamp(12px, 3vw, 22px);
  bottom: calc(clamp(12px, 3vw, 22px) + env(safe-area-inset-bottom, 0px));
}

/* Cả cụm nút nổi né thanh home iPhone */
.cg-float { bottom: calc(clamp(12px, 3vw, 22px) + env(safe-area-inset-bottom, 0px)); }