/*
 * XG MASTER — Design System Core v1
 * Scope: presentation only for the Xe Ghep vertical.
 * Contract: no URL, canonical, SEO owner, routing, content or schema mutations.
 * Loaded before page adapters (xg-home-ui01.css / xg-ui-pro-v1.css).
 */

body.xe-ghep-service-site{
  /* Brand */
  --xg-color-brand:#0871d8;
  --xg-color-brand-strong:#075d99;
  --xg-color-brand-deep:#0b2b57;
  --xg-color-success:#16a34a;
  --xg-color-success-strong:#15803d;
  --xg-color-action:#ffc928;
  --xg-color-action-strong:#f4b900;

  /* Text + surfaces */
  --xg-color-ink:#102236;
  --xg-color-heading:#102b4d;
  --xg-color-copy:#385268;
  --xg-color-muted:#60758a;
  --xg-color-subtle:#71869a;
  --xg-color-line:#dce7ef;
  --xg-color-line-strong:#c8d9e5;
  --xg-color-surface:#ffffff;
  --xg-color-soft:#f5f9fc;
  --xg-color-soft-blue:#eef7fd;
  --xg-color-page:#f6f8fb;

  /* Layout */
  --xg-shell:1280px;
  --xg-reading:800px;
  --xg-sidebar:320px;
  --xg-gutter:24px;
  --xg-gutter-mobile:12px;
  --xg-section-y:48px;

  /* Spacing scale */
  --xg-space-1:4px;
  --xg-space-2:8px;
  --xg-space-3:12px;
  --xg-space-4:16px;
  --xg-space-5:20px;
  --xg-space-6:24px;
  --xg-space-7:32px;
  --xg-space-8:40px;
  --xg-space-9:48px;
  --xg-space-10:64px;

  /* Shape */
  --xg-radius-xs:8px;
  --xg-radius-sm:10px;
  --xg-radius-md:14px;
  --xg-radius-lg:18px;
  --xg-radius-xl:22px;
  --xg-radius-pill:999px;

  /* Elevation */
  --xg-shadow-card:0 8px 24px rgba(15,62,91,.045);
  --xg-shadow-hover:0 14px 32px rgba(15,62,91,.09);
  --xg-shadow-hero:0 18px 48px rgba(11,43,87,.12);

  /* Typography */
  --xg-font-body:16px;
  --xg-line-body:1.7;
  --xg-h1:clamp(34px,4vw,52px);
  --xg-h2:clamp(26px,2.8vw,34px);
  --xg-h3:clamp(19px,2vw,23px);
  --xg-label:12px;

  /* Motion */
  --xg-ease:cubic-bezier(.2,.7,.2,1);
  --xg-duration:180ms;

  color:var(--xg-color-ink);
  background:var(--xg-color-surface);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.xe-ghep-service-site *,
body.xe-ghep-service-site *::before,
body.xe-ghep-service-site *::after{box-sizing:border-box}

body.xe-ghep-service-site img{max-width:100%;height:auto}
body.xe-ghep-service-site button,
body.xe-ghep-service-site input,
body.xe-ghep-service-site select,
body.xe-ghep-service-site textarea{font:inherit}
body.xe-ghep-service-site a{text-underline-offset:3px}

/* Layout primitives */
body.xe-ghep-service-site .xg-container{
  width:min(var(--xg-shell),calc(100% - (var(--xg-gutter) * 2)));
  margin-inline:auto;
}
body.xe-ghep-service-site .xg-reading{width:min(100%,var(--xg-reading));margin-inline:auto}
body.xe-ghep-service-site .xg-section{padding-block:var(--xg-section-y)}
body.xe-ghep-service-site .xg-section--soft{background:var(--xg-color-soft)}
body.xe-ghep-service-site .xg-stack{display:grid;gap:var(--xg-space-4)}
body.xe-ghep-service-site .xg-stack--lg{gap:var(--xg-space-6)}
body.xe-ghep-service-site .xg-inline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--xg-space-3)}
body.xe-ghep-service-site .xg-grid{display:grid;gap:var(--xg-space-4)}
body.xe-ghep-service-site .xg-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
body.xe-ghep-service-site .xg-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
body.xe-ghep-service-site .xg-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
body.xe-ghep-service-site .xg-layout-sidebar{display:grid;grid-template-columns:minmax(0,1fr) var(--xg-sidebar);gap:var(--xg-space-6);align-items:start}

/* Type hierarchy */
body.xe-ghep-service-site .xg-kicker,
body.xe-ghep-service-site .xg-eyebrow{
  display:block;
  margin:0 0 var(--xg-space-2);
  color:var(--xg-color-brand);
  font-size:var(--xg-label);
  line-height:1.3;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
body.xe-ghep-service-site .xg-title-1{margin:0;color:var(--xg-color-heading);font-size:var(--xg-h1);line-height:1.06;letter-spacing:-.035em;font-weight:900;text-wrap:balance}
body.xe-ghep-service-site .xg-title-2{margin:0;color:var(--xg-color-heading);font-size:var(--xg-h2);line-height:1.16;letter-spacing:-.02em;font-weight:900;text-wrap:balance}
body.xe-ghep-service-site .xg-title-3{margin:0;color:var(--xg-color-heading);font-size:var(--xg-h3);line-height:1.3;font-weight:850;text-wrap:balance}
body.xe-ghep-service-site .xg-lead{margin:0;color:var(--xg-color-muted);font-size:17px;line-height:1.68}
body.xe-ghep-service-site .xg-muted{color:var(--xg-color-muted)}

/* Section heading */
body.xe-ghep-service-site .xg-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--xg-space-6);margin-bottom:var(--xg-space-5)}
body.xe-ghep-service-site .xg-section-head__copy{max-width:780px}
body.xe-ghep-service-site .xg-section-head__subtitle{max-width:700px;margin:var(--xg-space-2) 0 0;color:var(--xg-color-muted);font-size:15px;line-height:1.6}

/* Cards */
body.xe-ghep-service-site .xg-card{
  border:1px solid var(--xg-color-line);
  border-radius:var(--xg-radius-lg);
  background:var(--xg-color-surface);
  box-shadow:var(--xg-shadow-card);
  overflow:hidden;
}
body.xe-ghep-service-site .xg-card__body{padding:var(--xg-space-6)}
body.xe-ghep-service-site .xg-card--soft{background:var(--xg-color-soft)}
body.xe-ghep-service-site .xg-card--flat{box-shadow:none}
body.xe-ghep-service-site .xg-card--interactive{transition:transform var(--xg-duration) var(--xg-ease),border-color var(--xg-duration) var(--xg-ease),box-shadow var(--xg-duration) var(--xg-ease)}
@media (hover:hover){
  body.xe-ghep-service-site .xg-card--interactive:hover{transform:translateY(-2px);border-color:#bad6e8;box-shadow:var(--xg-shadow-hover)}
}

/* Buttons */
body.xe-ghep-service-site .xg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:10px 16px;
  border:1px solid transparent;
  border-radius:var(--xg-radius-sm);
  text-decoration:none;
  font-size:14px;
  line-height:1.2;
  font-weight:900;
  cursor:pointer;
  transition:background var(--xg-duration) var(--xg-ease),border-color var(--xg-duration) var(--xg-ease),color var(--xg-duration) var(--xg-ease),transform var(--xg-duration) var(--xg-ease);
}
body.xe-ghep-service-site .xg-btn--primary{background:var(--xg-color-success);border-color:var(--xg-color-success);color:#fff}
body.xe-ghep-service-site .xg-btn--primary:hover{background:var(--xg-color-success-strong);border-color:var(--xg-color-success-strong);color:#fff}
body.xe-ghep-service-site .xg-btn--secondary{background:#fff;border-color:#b8d0e1;color:var(--xg-color-brand-strong)}
body.xe-ghep-service-site .xg-btn--secondary:hover{background:#f5fbff;border-color:var(--xg-color-brand);color:var(--xg-color-brand)}
body.xe-ghep-service-site .xg-btn--action{background:var(--xg-color-action);border-color:var(--xg-color-action);color:#17314c}
body.xe-ghep-service-site .xg-btn--action:hover{background:var(--xg-color-action-strong);border-color:var(--xg-color-action-strong);color:#17314c}
body.xe-ghep-service-site .xg-btn--ghost{background:transparent;border-color:var(--xg-color-line);color:var(--xg-color-ink)}
body.xe-ghep-service-site .xg-btn--block{width:100%}
body.xe-ghep-service-site .xg-actions{display:flex;flex-wrap:wrap;gap:var(--xg-space-2)}

/* Badges / chips */
body.xe-ghep-service-site .xg-chip,
body.xe-ghep-service-site .xg-badge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--xg-radius-pill);font-size:12px;font-weight:850;line-height:1.2}
body.xe-ghep-service-site .xg-chip{min-height:32px;padding:7px 11px;border:1px solid var(--xg-color-line);background:#fff;color:#36536e}
body.xe-ghep-service-site .xg-badge{padding:6px 10px;background:var(--xg-color-soft-blue);color:var(--xg-color-brand-strong)}
body.xe-ghep-service-site .xg-badge--success{background:#ecfdf3;color:#15803d}
body.xe-ghep-service-site .xg-badge--action{background:#fff8d9;color:#7a5a00}

/* Facts */
body.xe-ghep-service-site .xg-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--xg-space-3)}
body.xe-ghep-service-site .xg-fact{min-width:0;padding:14px 15px;border:1px solid var(--xg-color-line);border-radius:var(--xg-radius-md);background:#fff}
body.xe-ghep-service-site .xg-fact__label{display:block;margin-bottom:4px;color:var(--xg-color-muted);font-size:12px;font-weight:750}
body.xe-ghep-service-site .xg-fact__value{display:block;color:var(--xg-color-heading);font-size:16px;line-height:1.4;font-weight:850;overflow-wrap:anywhere}

/* Tables */
body.xe-ghep-service-site .xg-table-wrap{overflow-x:auto;border:1px solid var(--xg-color-line);border-radius:var(--xg-radius-md);background:#fff;-webkit-overflow-scrolling:touch}
body.xe-ghep-service-site .xg-table{width:100%;border-collapse:collapse}
body.xe-ghep-service-site .xg-table th,
body.xe-ghep-service-site .xg-table td{padding:13px 14px;border-bottom:1px solid var(--xg-color-line);text-align:left;vertical-align:top}
body.xe-ghep-service-site .xg-table th{background:var(--xg-color-soft);color:#294b67;font-size:12px;font-weight:900;white-space:nowrap}
body.xe-ghep-service-site .xg-table tr:last-child td{border-bottom:0}

/* Long-form content */
body.xe-ghep-service-site .xg-prose{max-width:var(--xg-reading);color:var(--xg-color-copy);font-size:17px;line-height:1.8}
body.xe-ghep-service-site .xg-prose :is(p,ul,ol){margin:0 0 16px}
body.xe-ghep-service-site .xg-prose h2{margin:34px 0 12px;color:var(--xg-color-heading);font-size:var(--xg-h2);line-height:1.22;letter-spacing:-.015em;text-wrap:balance}
body.xe-ghep-service-site .xg-prose h3{margin:25px 0 9px;color:var(--xg-color-heading);font-size:var(--xg-h3);line-height:1.32;text-wrap:balance}
body.xe-ghep-service-site .xg-prose a{color:var(--xg-color-brand-strong);font-weight:750}
body.xe-ghep-service-site .xg-prose img{border-radius:var(--xg-radius-md)}
body.xe-ghep-service-site .xg-prose blockquote{margin:20px 0;padding:16px 18px;border-left:4px solid var(--xg-color-brand);border-radius:0 var(--xg-radius-md) var(--xg-radius-md) 0;background:var(--xg-color-soft);color:#36536e}

/* Media */
body.xe-ghep-service-site .xg-media{overflow:hidden;border-radius:var(--xg-radius-lg);background:#e8edf3}
body.xe-ghep-service-site .xg-media img{display:block;width:100%;height:100%;object-fit:cover}
body.xe-ghep-service-site .xg-media--16x9{aspect-ratio:16/9}
body.xe-ghep-service-site .xg-media--4x3{aspect-ratio:4/3}

/* Existing XG page adapters consume the same token contract. */
body.xe-ghep-service-site .xgmp{
  --xg-blue:var(--xg-color-brand);
  --xg-ink:var(--xg-color-ink);
  --xg-muted:var(--xg-color-muted);
  --xg-line:var(--xg-color-line);
  --xg-soft:var(--xg-color-soft);
}
body.xe-ghep-service-site.xg-ui01-home .xg-home-ui01{
  --txm-blue:var(--xg-color-brand);
  --txm-blue-dark:var(--xg-color-brand-deep);
  --txm-green:var(--xg-color-success);
  --txm-green-dark:var(--xg-color-success-strong);
  --txm-yellow:var(--xg-color-action);
  --txm-yellow-strong:var(--xg-color-action-strong);
  --txm-ink:var(--xg-color-ink);
  --txm-muted:var(--xg-color-muted);
  --txm-line:var(--xg-color-line);
  --txm-soft:var(--xg-color-soft);
  --txm-soft-blue:var(--xg-color-soft-blue);
}

/* Accessibility */
body.xe-ghep-service-site :is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid rgba(8,113,216,.28)!important;outline-offset:2px!important}
body.xe-ghep-service-site :target{scroll-margin-top:112px}

@media(max-width:991px){
  body.xe-ghep-service-site{--xg-gutter:16px;--xg-section-y:40px}
  body.xe-ghep-service-site .xg-grid--3,
  body.xe-ghep-service-site .xg-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.xe-ghep-service-site .xg-layout-sidebar{grid-template-columns:1fr}
  body.xe-ghep-service-site .xg-section-head{align-items:flex-start;flex-direction:column;gap:var(--xg-space-3)}
}

@media(max-width:767px){
  body.xe-ghep-service-site{--xg-gutter:12px;--xg-section-y:34px;--xg-font-body:16px}
  body.xe-ghep-service-site .xg-container{width:min(var(--xg-shell),calc(100% - 24px))}
  body.xe-ghep-service-site .xg-grid--2,
  body.xe-ghep-service-site .xg-grid--3,
  body.xe-ghep-service-site .xg-grid--4,
  body.xe-ghep-service-site .xg-facts{grid-template-columns:1fr}
  body.xe-ghep-service-site .xg-card__body{padding:18px}
  body.xe-ghep-service-site .xg-actions{display:grid;grid-template-columns:1fr 1fr}
  body.xe-ghep-service-site .xg-actions>.xg-btn:only-child{grid-column:1/-1}
  body.xe-ghep-service-site .xg-prose{font-size:16px;line-height:1.76}
}

@media(max-width:520px){
  body.xe-ghep-service-site .xg-actions{grid-template-columns:1fr}
  body.xe-ghep-service-site .xg-btn{width:100%}
}

@media(prefers-reduced-motion:reduce){
  body.xe-ghep-service-site *,
  body.xe-ghep-service-site *::before,
  body.xe-ghep-service-site *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}


/* =========================================================
   XG-UX06 — INTERNAL LINK + MOBILE + CWV POLISH
   Shared only by Xe Ghép vertical; no extra stylesheet request.
   ========================================================= */
body.xe-ghep-service-site .xg-prose img[width][height]{max-width:100%;height:auto}
body.xe-ghep-service-site :is(.xgmp3-gallery__item,.xgkn-card__media,.xgkn-feature__media,.xgkn-topic-lead__media,.xgkn-article-hero__media,.xgsi-hero__media){contain:paint}
body.xe-ghep-service-site :is(.xgmp3-sidebar,.xgsi-side,.xgkn-article-side){overscroll-behavior:contain}

@media(max-width:600px){
  /* One conversion system on mobile: Call + Zalo. Hide duplicated auxiliary actions. */
  body.xe-ghep-service-site{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))!important}
  body.xe-ghep-service-site .menupcmxh{display:none!important}
  body.xe-ghep-service-site .txs-vf-mobile-contact{
    height:calc(64px + env(safe-area-inset-bottom,0px))!important;
    padding:7px 10px calc(7px + env(safe-area-inset-bottom,0px))!important;
    background:rgba(255,255,255,.985)!important;
  }
  body.xe-ghep-service-site .txs-vf-mobile-contact-inner{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    align-items:center!important;
    height:50px!important;
    max-width:560px!important;
  }
  body.xe-ghep-service-site .txs-vf-mobile-contact-item{display:none!important}
  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-call-main:not(.is-disabled),
  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-zalo-main:not(.is-disabled){
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    width:100%!important;
    height:48px!important;
    min-height:48px!important;
    margin:0!important;
    padding:0 12px!important;
    border-radius:12px!important;
    font-size:14px!important;
    font-weight:900!important;
  }
  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-call-main:not(.is-disabled){
    background:#16a34a!important;
    color:#fff!important;
  }
  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-zalo-main:not(.is-disabled){
    background:#0871c7!important;
    color:#fff!important;
  }

  body.xe-ghep-service-site .txs-vf-mobile-contact-inner:has(.txs-vf-mobile-call-main:not(.is-disabled)):not(:has(.txs-vf-mobile-zalo-main:not(.is-disabled))) .txs-vf-mobile-call-main,
  body.xe-ghep-service-site .txs-vf-mobile-contact-inner:has(.txs-vf-mobile-zalo-main:not(.is-disabled)):not(:has(.txs-vf-mobile-call-main:not(.is-disabled))) .txs-vf-mobile-zalo-main{grid-column:1/-1}
  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-call-main .txs-vf-mobile-call-circle,
  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-zalo-main .txs-vf-mobile-contact-icon{
    width:30px!important;
    height:30px!important;
    flex:0 0 30px!important;
    margin:0!important;
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
  }
  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-call-main .txs-vf-mobile-call-circle img,
  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-zalo-main .txs-vf-mobile-contact-icon img{
    width:30px!important;
    height:30px!important;
    background:transparent!important;
  }
  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-call-main>span:last-child,
  body.xe-ghep-service-site .txs-vf-mobile-contact .txs-vf-mobile-zalo-main>span:last-child{
    margin:0!important;
    color:#fff!important;
    font-size:14px!important;
    line-height:1!important;
    font-weight:900!important;
  }

  /* Stable mobile reading and tap targets across all XG content pages. */
  body.xe-ghep-service-site .xg-prose :is(a,button),
  body.xe-ghep-service-site :is(.xgmp3-jumpnav a,.xgsi-toc a,.xgkn-toc a){overflow-wrap:anywhere}
  body.xe-ghep-service-site :is(.xgmp3-sidebar,.xgsi-side,.xgkn-article-side){position:static!important}
  body.xe-ghep-service-site :is(.xgmp3-section,.xgsi-related,.xgkn-related){scroll-margin-top:92px}
}