/*
 * Giao dien "trang ra mat" cho trang ban FE Gridaboo (body.gl), nap SAU gridaboo-sales.css.
 * Bo cuc kieu trang launch WarriorPlus (thanh co dinh, tieu de dam, nut mua lon co mui ten,
 * the co bieu tuong, khung Option A/B) nhung MAU DONG BO VOI APP (gridaboo/frontend/src/styles/index.css):
 * nen linen, chu muc, madder chi cho nut mua va chu nhan, sage cho dau tick, mustard diem nhan.
 * Chi trang tri: khong dem nguoc gia, khong "con X suat", khong loi chung thuc bia.
 */
.gl {
  --linen-50: #fbf8f2;
  --linen-100: #f5efe4;
  --linen-200: #eae0cf;
  --linen-300: #d9cbb3;
  --linen-400: #bfae91;
  --ink: #23211f;
  --ink-950: #1b1917;
  --ink-2: #4a4540;
  --muted: #7a7268;
  --madder: #a63a2b;
  --madder-600: #8e2f22;
  --madder-50: #f8ece8;
  --madder-100: #f0d5cd;
  --sage: #6f7f5e;
  --sage-700: #4f5c42;
  --sage-50: #eef1ea;
  --sage-200: #cdd5c3;
  --mustard: #c69a2e;
  --mustard-50: #faf3df;
  --mustard-200: #ecd79c;
  --mustard-700: #8f6c17;
  --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow: 0 1px 2px rgb(35 33 31 / .04), 0 16px 34px -24px rgb(35 33 31 / .35);
  background: var(--linen-100);
  color: var(--ink);
  font-family: var(--body);
}
.gl h1, .gl h2, .gl h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.gl h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.08; }
.gl h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.1; }
.gl .g-sub, .gl .g-lede { color: var(--ink-2); }
.gl a { color: var(--madder); }
.gl .g-sec { padding: 84px 0; }
.gl .g-band { background: var(--linen-50); border-color: var(--linen-200); }
.gl .g-kicker { color: var(--sage-700); font-weight: 800; letter-spacing: 0.14em; }
.gl .g-wrap { max-width: 1160px; }
.gl-red { color: var(--madder); }

/* nen vai Aida: luoi o nho nhu trong app */
.gl-aida {
  background-color: var(--linen-50);
  background-image:
    linear-gradient(rgb(35 33 31 / .055) 1px, transparent 1px),
    linear-gradient(90deg, rgb(35 33 31 / .055) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* ---- Thanh tren cung (giong thanh dau app) ---- */
.gl .g-nav { background: rgb(251 248 242 / .94); border-bottom: 1px solid var(--linen-200); backdrop-filter: blur(8px); box-shadow: 0 6px 18px -14px rgb(35 33 31 / .4); }
.gl-bar-in { max-width: 1160px; margin: 0 auto; padding: 0 20px; height: 58px; display: flex; align-items: center; gap: 18px; color: var(--ink); }
.gl-bar-brand { display: flex; align-items: center; gap: 9px; color: var(--ink) !important; text-decoration: none; }
.gl-bar-brand b { font-family: var(--display); font-size: 1.25rem; }
.gl-bar-note { margin: 0 auto; font-size: .92rem; color: var(--ink-2); }
.gl-bar-note span { background: var(--mustard-50); color: var(--mustard-700); border: 1px solid var(--mustard-200); font-weight: 700; padding: 2px 9px; border-radius: 999px; margin-right: 4px; }
.gl-bar-note b { color: var(--ink); }
.gl .g-nav nav { margin-left: 0; display: flex; align-items: center; gap: 16px; font-size: .92rem; }
.gl .g-nav nav a { color: var(--ink-2) !important; text-decoration: none; display: inline; }
.gl .g-nav nav a.gl-bar-buy { background: var(--madder); color: var(--linen-50) !important; font-weight: 700; padding: 8px 15px; border-radius: 10px; box-shadow: 0 8px 16px -10px rgb(166 58 43 / .8); }
@media (max-width: 860px) { .gl-bar-note { display: none; } .gl .g-nav nav { margin-left: auto; } }
@media (max-width: 480px) { .gl .g-nav nav a:not(.gl-bar-buy) { display: none; } }

/* ---- Hero ---- */
.gl-hero {
  position: relative; overflow: hidden; text-align: center; padding: 56px 0 72px;
  background:
    linear-gradient(rgb(35 33 31 / .05) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(90deg, rgb(35 33 31 / .05) 1px, transparent 1px) 0 0 / 26px 26px,
    radial-gradient(ellipse at 50% 0%, var(--linen-50) 0%, var(--linen-100) 60%, #efe6d6 100%);
}
.gl-hero .g-wrap { position: relative; z-index: 1; max-width: 1000px; }
.gl-pill { display: inline-block; background: var(--linen-50); border: 2px dashed var(--linen-400); border-radius: 8px; padding: 7px 16px; font-weight: 600; font-size: .98rem; color: var(--ink-2); }
.gl-pill b { color: var(--madder); }
.gl-hero h1 { margin-top: 22px; }
.gl-band {
  display: inline-block; margin-top: 18px; background: var(--sage-700); color: var(--linen-50); font-family: var(--display); font-weight: 800;
  font-size: clamp(1.25rem, 2.8vw, 2rem); line-height: 1.2; padding: 10px 26px; border-radius: 10px; box-shadow: 0 10px 24px -14px rgb(35 33 31 / .7);
}
.gl-box { max-width: 820px; margin: 22px auto 0; background: var(--linen-50); border: 1px solid var(--linen-200); border-radius: 14px; padding: 18px 24px; font-size: 1.12rem; font-weight: 500; line-height: 1.55; color: var(--ink-2); box-shadow: var(--shadow); }
.gl-box b { color: var(--ink); font-weight: 800; }
.gl-without { margin-top: 26px; font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 1.9rem); }
.gl-nos { margin: 12px auto 0; max-width: 820px; font-size: 1.02rem; color: var(--ink-2); line-height: 1.9; }
.gl-nos span { white-space: nowrap; }
.gl-nos b { color: var(--madder); }
.gl-nos i { font-style: normal; color: var(--linen-400); margin: 0 8px; }

/* hinh mau bay hai ben hero */
.gl-float { position: absolute; z-index: 0; width: 150px; border-radius: 14px; background: var(--linen-50); padding: 6px; border: 1px solid var(--linen-200); box-shadow: 0 18px 36px -18px rgb(35 33 31 / .55); }
.gl-float img { border-radius: 9px; width: 100%; }
.gl-float.f1 { left: 2%; top: 70px; transform: rotate(-9deg); }
.gl-float.f2 { left: 6%; top: 330px; width: 120px; transform: rotate(7deg); }
.gl-float.f3 { right: 2%; top: 60px; transform: rotate(8deg); }
.gl-float.f4 { right: 5%; top: 320px; width: 124px; transform: rotate(-6deg); }
@media (max-width: 1180px) { .gl-float { display: none; } }

/* Khung anh app chinh */
.gl-stage { position: relative; max-width: 900px; margin: 40px auto 0; }
.gl-stage-label { display: inline-block; background: var(--ink); color: var(--linen-50); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; padding: 7px 16px; border-radius: 999px; margin-bottom: 14px; }
.gl-frame { border-radius: 18px; background: var(--linen-50); padding: 10px; border: 1px solid var(--linen-300); box-shadow: 0 34px 70px -36px rgb(35 33 31 / .6); }
.gl-frame img { border-radius: 10px; width: 100%; height: auto; }

/* ---- Khoi mua ---- */
.gl-buy { text-align: center; padding: 54px 0 10px; }
.gl-buy h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.gl-buy .gl-cta { margin-top: 18px; }
.gl-cta { display: inline-block; padding: 6px; border: 1px solid var(--madder-100); border-radius: 18px; background: var(--linen-50); box-shadow: var(--shadow); }
.gl .gl-cta .g-btn {
  display: inline-flex; align-items: center; gap: 18px; padding: 18px 20px 18px 38px; border-radius: 13px;
  background: var(--madder); font-family: var(--display); font-weight: 800; font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .15), 0 16px 30px -16px rgb(166 58 43 / .85); color: var(--linen-50) !important;
}
.gl .gl-cta .g-btn::after {
  content: "»"; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 10px;
  background: var(--linen-50); color: var(--mustard); font-size: 2rem; line-height: 1; flex: none;
}
.gl .gl-cta .g-btn:hover { background: var(--madder-600); }
.gl .gl-cta .g-btn.is-waiting { background: #c9a29a; }
.gl .gl-cta .g-btn-dark { background: var(--ink); }
.gl-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.gl-badge { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; color: var(--ink-2); background: var(--linen-50); border: 1px solid var(--linen-200); border-radius: 9px; padding: 7px 11px; }
.gl-badge svg { width: 18px; height: 18px; color: var(--sage); flex: none; }
.gl-seal { width: 46px; height: 46px; border-radius: 50%; display: inline-grid; place-items: center; text-align: center; background: radial-gradient(circle, var(--mustard-200) 0 55%, var(--mustard) 56% 100%); color: #3b2a05; font: 800 .62rem/1.05 var(--body); box-shadow: 0 0 0 3px var(--linen-50), 0 0 0 4px var(--mustard-200); }
@media (max-width: 560px) {
  .gl .gl-cta .g-btn { padding: 16px 14px 16px 22px; gap: 12px; }
  .gl .gl-cta .g-btn::after { width: 40px; height: 40px; font-size: 1.6rem; }
}

/* ---- Tieu de muc ---- */
.gl-title { text-align: center; margin-bottom: 40px; }
.gl-title p { margin: 14px auto 0; max-width: 46em; color: var(--ink-2); font-size: 1.05rem; }
.gl-caps { text-transform: uppercase; letter-spacing: -0.01em; }

/* ---- The tinh nang ---- */
.gl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.gl-cards.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .gl-cards, .gl-cards.c4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .gl-cards, .gl-cards.c4 { grid-template-columns: 1fr; } }
.gl-card { background: var(--linen-50); border-radius: 16px; padding: 24px; border: 1px solid var(--linen-200); box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.gl-card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgb(35 33 31 / .04), 0 22px 40px -22px rgb(35 33 31 / .45); }
.gl-ico { width: 46px; height: 46px; border-radius: 11px; background: var(--sage-50); border: 1px solid var(--sage-200); display: grid; place-items: center; color: var(--sage-700); }
.gl-ico svg { width: 22px; height: 22px; }
.gl-card h3 { margin-top: 16px; font-family: var(--body); font-weight: 800; font-size: 1rem; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); line-height: 1.3; }
.gl-card p { margin-top: 10px; color: var(--ink-2); font-size: .95rem; line-height: 1.6; }
.gl-card p b { color: var(--ink); }
.gl-type { padding: 0; overflow: hidden; }
.gl-type .gl-pic { aspect-ratio: 4 / 3; background: #f3ece0; display: grid; place-items: center; border-bottom: 1px solid var(--linen-200); overflow: hidden; }
.gl-type .gl-pic img { width: 82%; height: 92%; object-fit: contain; }
.gl-type .gl-pic .gl-ico { width: 64px; height: 64px; }
.gl-type .gl-pic .gl-ico svg { width: 32px; height: 32px; }
.gl-type .gl-txt { padding: 4px 20px 22px; }
.gl-type h3 { color: var(--madder); }

/* ---- "Lam bang tay" ---- */
.gl-pain { background: var(--linen-200); border-top: 1px solid var(--linen-300); border-bottom: 1px solid var(--linen-300); }
.gl-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 980px; margin: 0 auto; }
@media (max-width: 860px) { .gl-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gl-tiles { grid-template-columns: 1fr; } }
.gl-tile { margin: 0; background: var(--linen-50); border: 1px solid var(--linen-300); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); transition: transform .15s; }
.gl-tile:hover { transform: translateY(-3px); }
.gl-tile .gl-shot { background-color: #f3ece0; background-image: radial-gradient(circle at 1px 1px, rgb(35 33 31 / .09) .8px, transparent 1px); background-size: 8px 8px; border-bottom: 1px solid var(--linen-200); padding: 10px 8px 4px; }
.gl-chore-svg { width: 100%; height: auto; display: block; }
.gl-tile figcaption { position: relative; padding: 16px 18px 18px 56px; text-align: left; }
.gl-tile figcaption b { display: block; font-weight: 800; font-size: 1rem; color: var(--ink); line-height: 1.3; }
.gl-tile figcaption span:not(.gl-x) { display: block; margin-top: 4px; font-size: .9rem; color: var(--muted); }
.gl-tile .gl-x { position: absolute; left: 18px; top: 17px; width: 26px; height: 26px; border-radius: 50%; background: var(--madder-50); border: 1px solid var(--madder-100); color: var(--madder); display: grid; place-items: center; font: 800 .8rem/1 var(--body); }
.gl-after { text-align: center; margin-top: 46px; }
.gl-after h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }

/* ---- Cac buoc ---- */
.gl-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: s; }
@media (max-width: 860px) { .gl-steps { grid-template-columns: 1fr; gap: 34px; } }
.gl-step { position: relative; background: #fff; border-radius: 16px; padding: 30px 24px 24px; border: 1px solid var(--linen-200); text-align: center; box-shadow: var(--shadow); }
.gl-step::before { counter-increment: s; content: "Step " counter(s); position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--mustard-50); border: 1px solid var(--mustard-200); color: var(--mustard-700); font: 800 .78rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; white-space: nowrap; }
.gl-step h3 { font-size: 1.45rem; }
.gl-step p { margin-top: 10px; color: var(--ink-2); }

/* ---- Option A / Option B ---- */
.gl-options { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 980px; margin: 0 auto; }
@media (max-width: 760px) { .gl-options { grid-template-columns: 1fr; gap: 44px; } }
.gl-opt { position: relative; border: 1px solid var(--madder-100); background: var(--madder-50); border-radius: 16px; padding: 44px 26px 26px; }
.gl-opt.b { border-color: var(--sage-200); background: var(--sage-50); }
.gl-opt-tag { position: absolute; top: -19px; left: 50%; transform: translateX(-50%); background: var(--madder); color: var(--linen-50); font-family: var(--display); font-weight: 800; font-size: 1.1rem; padding: 8px 32px; border-radius: 9px; white-space: nowrap; }
.gl-opt.b .gl-opt-tag { background: var(--sage-700); }
.gl-opt h3 { text-align: center; font-size: 1.3rem; }
.gl-opt ul { list-style: none; padding: 0; margin: 16px 0 0; }
.gl-opt li { position: relative; padding-left: 30px; margin-top: 12px; color: var(--ink-2); }
.gl-opt li::before { content: "✕"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--madder); color: #fff; font: 800 .68rem/20px var(--body); text-align: center; }
.gl-opt.b li::before { content: "✓"; background: var(--sage); font-size: .78rem; }
.gl-opt.b li { color: var(--ink); font-weight: 600; }

/* ---- Review + PDF ---- */
.gl-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .gl-split { grid-template-columns: 1fr; } }
.gl-checks { list-style: none; padding: 0; margin: 20px 0 0; }
.gl-checks li { position: relative; padding: 12px 14px 12px 48px; margin-top: 10px; background: #fff; border: 1px solid var(--linen-200); border-radius: 12px; font-weight: 500; color: var(--ink-2); }
.gl-checks li::before { content: "✓"; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 7px; background: var(--sage); color: #fff; font: 800 .85rem/24px var(--body); text-align: center; }
.gl-art { border-radius: 20px; background: #f3ece0; border: 1px solid var(--linen-300); padding: 22px; display: grid; place-items: center; box-shadow: 0 30px 60px -36px rgb(35 33 31 / .55); }
.gl-art img { width: 100%; max-width: 440px; }
.gl .g-table { background: #fff; border-color: var(--linen-200); }

/* ---- Ai nen dung ---- */
.gl-who { background: var(--ink); color: var(--linen-100); }
.gl-who h2 { color: var(--linen-50); }
.gl-who .gl-card { background: var(--ink-950); border-color: #3a3632; box-shadow: none; }
.gl-who .gl-card h3 { color: var(--mustard-200); }
.gl-who .gl-card p { color: #cfc6b8; }
.gl-who .gl-ico { background: #2f2c29; border-color: #4a4540; color: var(--mustard-200); }

/* ---- Hop gia ---- */
.gl-price { background:
    linear-gradient(rgb(35 33 31 / .045) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(90deg, rgb(35 33 31 / .045) 1px, transparent 1px) 0 0 / 26px 26px, var(--linen-100); }
.gl .g-pricebox { max-width: 640px; border: 1px solid var(--linen-300); border-radius: 22px; padding: 0 0 34px; overflow: hidden; background: var(--linen-50); box-shadow: 0 40px 80px -40px rgb(35 33 31 / .55); }
.gl-pricehead { background: var(--ink); color: var(--linen-50); padding: 22px 20px 20px; }
.gl-pricehead h2 { color: var(--linen-50); }
.gl-pricehead p { margin-top: 4px; color: var(--mustard-200); font-weight: 600; }
.gl .g-pricebox .g-big { font-family: var(--display); font-weight: 800; font-size: 4.6rem; color: var(--ink); margin: 22px 0 8px; }
.gl .g-pricebox .g-list { max-width: 460px; padding: 0 22px; }
.gl .g-pricebox .g-list li { font-weight: 500; color: var(--ink-2); }
.gl .g-list li::before { width: 18px; height: 18px; top: .2em; border-radius: 50%; background: var(--sage); }
.gl .g-list li::after { content: "✓"; position: absolute; left: 2px; top: .2em; width: 18px; height: 18px; color: #fff; font: 800 .7rem/18px var(--body); text-align: center; }
.gl .g-alt { margin: 30px 26px 0; padding: 22px; border: 1px dashed var(--linen-300); border-radius: 16px; background: var(--linen-100); }
.gl .g-alt h3 { font-size: 1.35rem; }
.gl .g-under { color: var(--muted); }

/* ---- Thu vien mau + anh app ---- */
.gl .g-gallery .g-aida { border: 1px solid var(--linen-300); border-radius: 14px; box-shadow: var(--shadow); }
.gl .g-gallery figcaption { font-weight: 600; color: var(--ink-2); }
.gl .g-tour .g-card { border: 1px solid var(--linen-300); border-radius: 18px; background: var(--linen-50); padding: 0; box-shadow: 0 26px 50px -34px rgb(35 33 31 / .6); }
.gl .g-tour figcaption h3 { color: var(--ink); font-family: var(--body); font-weight: 800; text-transform: uppercase; font-size: 1rem; }
.gl .g-tour figcaption p { color: var(--ink-2); }
.gl .g-head .g-kicker { display: inline-block; background: var(--sage-50); border: 1px solid var(--sage-200); padding: 6px 12px; border-radius: 999px; }

/* ---- Cau hoi ---- */
.gl .g-faq details { background: #fff; border: 1px solid var(--linen-200); border-radius: 14px; padding: 18px 22px; margin-top: 12px; }
.gl .g-faq summary { font-weight: 700; font-size: 1.05rem; }
.gl .g-faq summary::after { content: "+"; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--linen-200); color: var(--ink); font-weight: 800; line-height: 1; }
.gl .g-faq details[open] { border-color: var(--linen-300); box-shadow: var(--shadow); }
.gl .g-faq details[open] summary::after { content: "–"; background: var(--madder); color: #fff; }

/* ---- Loi nhan ---- */
.gl-note { max-width: 760px; margin: 0 auto; background: var(--linen-50); border-radius: 20px; padding: 34px; border: 1px solid var(--linen-200); box-shadow: var(--shadow); text-align: center; }
.gl-note p { color: var(--ink-2); font-size: 1.08rem; line-height: 1.7; margin-top: 14px; }

.gl .g-foot { background: var(--ink-950); color: #a39a8e; border: 0; }
.gl .g-foot a { color: #e2d9cb; }

@media (max-width: 600px) {
  .gl-nos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; }
  .gl-nos i { display: none; }
  .gl-nos span { background: var(--linen-50); border: 1px solid var(--linen-200); border-radius: 999px; padding: 2px 10px; font-size: .9rem; }
  .gl-box { font-size: 1rem; padding: 16px; }
  .gl .g-pricebox .g-big { font-size: 3.6rem; }
  .gl-note { padding: 24px 18px; }
}

/* ---- Trang OTO, All Upgrades, Thank-you, JV (cung giao dien) ---- */
.gl .g-banner-top { background: var(--ink); color: var(--linen-50); font-weight: 600; padding: 12px 16px; }
.gl .g-progress { margin-bottom: 20px; }
.gl .g-progress span { width: 42px; height: 6px; background: var(--linen-300); }
.gl .g-progress span.on { background: var(--sage-700); }
.gl .g-no { margin-top: 18px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.gl .g-note { background: var(--mustard-50); border-left-color: var(--mustard); color: var(--ink-2); }
.gl-cols-2 { columns: 2; column-gap: 14px; }
.gl-cols-2 li { break-inside: avoid; }
@media (max-width: 640px) { .gl-cols-2 { columns: 1; } }
.gl-checks + .g-under { margin-top: 18px; }
.gl .g-card { background: var(--linen-50); border-color: var(--linen-200); border-radius: 16px; box-shadow: var(--shadow); }
.gl .g-card h3 { font-size: 1.15rem; }
.gl .g-card .g-kicker { font-size: .72rem; }
.gl .g-btn:not(.gl-cta .g-btn) { font-family: var(--body); font-weight: 800; border-radius: 12px; }
.gl .g-btn-dark { background: var(--ink); }
.gl .g-tag { background: var(--mustard-50); color: var(--mustard-700); border: 1px solid var(--mustard-200); }
.gl .g-table th { background: var(--ink); color: var(--linen-50); }
.gl .g-table tr:nth-child(even) td { background: var(--linen-100); }
.gl-hero .g-cta-row { justify-content: center; }
.gl-hero .g-waiting-note { text-align: center; }
.gl-hero > .g-wrap > svg { display: block; margin: 0 auto 18px; }
/* JV: email mau, banner */
.gl .g-email { background: var(--linen-50); border-color: var(--linen-200); box-shadow: var(--shadow); }
.gl .g-email pre { background: #fff; border-color: var(--linen-200); }
.gl .g-copy { background: var(--ink); color: var(--linen-50); border-color: var(--ink); border-radius: 9px; padding: 8px 14px; }
.gl .g-copy:hover { background: #2f2c29; }
.gl .g-banner { border-radius: 16px; padding: 22px 24px; box-shadow: var(--shadow); }
.gl .g-banner b { font-family: var(--display); font-weight: 800; }
.gl .g-stack > * + * { margin-top: 16px; }
.gl .g-banner.g-aida { background-color: var(--linen-50); border: 1px solid var(--linen-300); }
.gl .g-banner > svg:first-child { flex: none; width: 64px; height: 64px; padding: 8px; border-radius: 14px; background: var(--linen-50); box-sizing: border-box; }
.gl .g-banner.g-aida > svg:first-child { background: #f3ece0; }

/* JV: khoi lien he nguoi ban (anh dai dien + Facebook) */
.gl-contact { display: flex; align-items: center; gap: 16px; max-width: 640px; margin: 22px auto 0; text-align: left; background: var(--linen-50); border: 1px solid var(--linen-200); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow); }
.gl-contact img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--linen-300); }
.gl-contact-txt { flex: 1; min-width: 0; }
.gl-contact-txt b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: var(--ink); }
.gl-contact-txt span { display: block; font-size: .88rem; color: var(--muted); margin-top: 2px; }
.gl-contact-btns { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.gl a.gl-fb { display: inline-flex; align-items: center; gap: 7px; background: #1877f2; color: #fff; font-weight: 700; font-size: .9rem; padding: 9px 14px; border-radius: 10px; text-decoration: none; white-space: nowrap; }
.gl a.gl-fb:hover { background: #0f63d6; }
.gl-fb svg { width: 18px; height: 18px; }
.gl a.gl-mail { font-size: .82rem; color: var(--ink-2); }
.gl-contact.is-compact { max-width: 560px; padding: 12px 14px; }
.gl-contact.is-compact img { width: 56px; height: 56px; }
@media (max-width: 560px) {
  .gl-contact { flex-wrap: wrap; }
  .gl-contact-btns { width: 100%; align-items: stretch; }
  .gl a.gl-fb { justify-content: center; }
  .gl a.gl-mail { text-align: center; }
}