/*
Theme Name: GAAS SME
Theme URI: https://sme.gaas.com.vn
Description: Theme con cua Twenty Twenty-Five, mang bo mau va phong chu cua GAAS FOUNDATION cho trang sme.gaas.com.vn. Giu nguyen kha nang sua bai bang khoi.
Author: GAAS FOUNDATION
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
License: GPLv2 or later
Text Domain: gaas-sme
*/

/* ===== Nen trang ===== */
body { background: var(--wp--preset--color--paper); }

/* ===== Thanh dau trang ===== */
/* Thanh dau trang dung chung cau truc va CSS cua landing (.topbar > .wrap > .topbar__frame),
   nen logo va nut do nam dung truc noi dung 1144px. Duoi day chi la luat hoa giai
   cho cac khoi WordPress nam ben trong khung do. */
.topbar__frame .wp-block-site-logo { margin: 0; flex: 0 0 auto; }
.topbar__frame .wp-block-site-logo img { height: 30px; width: auto; display: block; }
.topbar__frame .wp-block-navigation {
  /* Canh giua thanh: logo ben trai, menu o giua, nut ben phai.
     margin-top phai dat 0 vi WordPress gan block-gap 19.2px cho khoi nay,
     lam menu tut xuong 10px so voi logo va nut. */
  margin: 0; font-size: 16px; font-weight: 500;
  gap: 26px; --wp--style--block-gap: 26px;
}

/* Canh giua tuyet doi theo khung, khong phai giua khoang con lai:
   nut do rong hon logo nen neu de margin auto thi menu lech trai 63px.
   Chi ap tu 900px tro len — duoi do menu thu thanh nut mo, khong can canh. */
@media (min-width: 900px) {
  .topbar__frame { position: relative; justify-content: space-between; }
  .topbar__frame .wp-block-navigation {
    position: absolute; left: 50%; transform: translateX(-50%);
  }
}
.topbar__frame .wp-block-navigation a { text-decoration: none; white-space: nowrap; color: var(--wp--preset--color--ink); }
.topbar__frame .wp-block-navigation a:hover { color: var(--wp--preset--color--sky); }
.topbar__frame .wp-block-navigation .current-menu-item a { color: var(--wp--preset--color--sky); }
.topbar__frame .gaas-cta { margin: 0; flex: 0 0 auto; }

/* Man hep: landing goc an han menu (.nav{display:none} duoi 980px) va day nut do
   sang phai bang luat .btn-primary — nut cua WordPress khong an luat do nen dinh vao logo.
   Bat lai menu vi trang con phai vao duoc tu dien thoai; duoi 600px WordPress tu thu
   thanh nut mo. */
@media (max-width: 980px) {
  .topbar__frame { justify-content: flex-start; }
  .topbar__frame .wp-block-navigation { display: flex; flex-wrap: nowrap; font-size: 14px; gap: 18px; --wp--style--block-gap: 18px; }
  .topbar__frame .wp-block-navigation .wp-block-navigation__container { flex-wrap: nowrap; }
  .topbar__frame .gaas-cta { margin-left: auto; }
}

/* Cac muc cua landing phai dinh lien nhau. WordPress chen khoang cach mac dinh
   giua moi khoi (19,2px) va truoc chan trang (16px), ho ra thanh vach trang ngang. */
body.home .wp-block-post-content > *,
body.home .wp-site-blocks > * {
  margin-block-start: 0;
  margin-block-end: 0;
}
.wp-site-blocks > footer { margin-block-start: 0; }
body.home .wp-site-blocks > main { padding: 0; }

/* Landing khong dat chieu cao dong rieng cho h4, no thua huong 1.6 cua body.
   theme.json cua WordPress lai ap chieu cao dong rieng cho moi the tieu de,
   nen cot trong chan trang bi hut mat 6px moi dong. Tra ve dung so cua landing. */
.fcol h4 { line-height: 1.6; }

/* Thanh dau trang noi (position:fixed) nen trang con phai chua cho, khong thi bi che dong dau. */
body:not(.home) .wp-site-blocks > main { padding-top: 118px; }
@media (max-width: 760px) {
  body:not(.home) .wp-site-blocks > main { padding-top: 92px; }
}

/* nut do: mau hanh dong cua GAAS */
.gaas-cta .wp-block-button__link,
.wp-block-button.gaas-cta .wp-block-button__link {
  background: var(--wp--preset--color--scarlet); color: #fff;
  border-radius: 999px; padding: 11px 22px; font-weight: 600; font-size: 15px;
  text-decoration: none;
}
.gaas-cta .wp-block-button__link:hover { background: #9A0D23; }

/* Nut do tren thanh dau trang: dung dang .btn-primary cua landing.
   Vong tron mui ten ve bang ::after de khoi phai nhet SVG vao khoi nut cua WordPress. */
.topbar__frame .gaas-cta .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 6px 0 20px; font-size: 16px; line-height: 1;
}
.topbar__frame .gaas-cta .wp-block-button__link::after {
  content: ""; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 999px;
  background: #fff center / 15px 15px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23C8102E'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E");
}

/* ===== Than bai ===== */
body:not(.home) .wp-block-post-content > * { margin-block: 1rem; }
body:not(.home) .wp-block-post-content p { max-width: 68ch; }
body:not(.home) .wp-block-post-content h2 { margin-top: 2.6rem; }
body:not(.home) .wp-block-post-content h3 { margin-top: 1.6rem; }

/* dong nho dau bai: "Tram la gi", "vi tri" */
body:not(.home) .wp-block-post-content > p.has-small-font-size {
  color: var(--wp--preset--color--ink-soft);
  line-height: 1.62;
}

/* hop "Bai nay ket luan" */
.wp-block-group.has-tertiary-background-color,
.wp-block-group.has-sky-mist-background-color {
  background: var(--wp--preset--color--sky-mist) !important;
  border-left: 4px solid var(--wp--preset--color--sky);
  border-radius: 14px;
}
.wp-block-group.has-tertiary-background-color h3 { margin-top: 0; font-size: 14px; color: var(--wp--preset--color--sky); }
.wp-block-group.has-tertiary-background-color p { font-weight: 500; color: var(--wp--preset--color--sky-deep); }

/* danh sach "Tram nao hong lay theo": chuoi cham noi nhau */
body:not(.home) .wp-block-post-content ul.wp-block-list { list-style: none; padding-left: 0; display: grid; gap: 1rem; }
body:not(.home) .wp-block-post-content ul.wp-block-list > li { position: relative; padding-left: 26px; }
body:not(.home) .wp-block-post-content ul.wp-block-list > li::before {
  content: ""; position: absolute; left: 4px; top: .78em;
  width: 9px; height: 9px; border-radius: 999px; background: var(--wp--preset--color--sky);
}
body:not(.home) .wp-block-post-content ul.wp-block-list > li::after {
  content: ""; position: absolute; left: 8px; top: calc(.78em + 12px); bottom: -1rem;
  width: 1px; background: rgba(26,109,181,.28);
}
body:not(.home) .wp-block-post-content ul.wp-block-list > li:last-child::after { display: none; }
body:not(.home) .wp-block-post-content ul.wp-block-list > li:last-child::before { background: var(--wp--preset--color--scarlet); }

/* cau chot */
.wp-block-quote {
  border-left: 4px solid var(--wp--preset--color--scarlet);
  padding-left: 22px; margin-top: 2.4rem;
}
.wp-block-quote p { max-width: 32ch; }

/* ===== Chan trang ===== */
.gaas-footer { background: var(--wp--preset--color--sky-deep); color: #fff; }
.gaas-footer a { color: var(--wp--preset--color--sky-mist); }
.gaas-footer .wp-block-site-logo img { height: 46px; width: auto; filter: brightness(0) invert(1); }

@media (max-width: 782px) {
  .topbar__frame .wp-block-navigation { font-size: 14px; }
  .topbar__frame .wp-block-site-logo img { height: 24px; }
  .topbar__frame .gaas-cta .wp-block-button__link {
    height: 40px; padding: 0 5px 0 14px; font-size: 14px; gap: 8px;
  }
  .topbar__frame .gaas-cta .wp-block-button__link::after { flex-basis: 24px; width: 24px; height: 24px; }
  body:not(.home) .wp-block-post-content p, body:not(.home) .wp-block-post-content li { font-size: 16px; }
  .wp-block-quote p { font-size: 20px; }
}

/* ==================== TRANG CHU DE: bo cuc vong + luoi the ==================== */
/* Chep tu ban tinh diem-ro.html, giu dung bo cuc da duyet. */

/* --- dau trang: chu ben trai, hop dinh nghia ben phai --- */
.gaas-hero { margin-bottom: var(--wp--preset--spacing--30); }
.gaas-hero .gaas-tag {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(26,109,181,.2);
  font-size: 14px; font-weight: 500; color: var(--wp--preset--color--sky-deep);
}
.gaas-hero h1 { font-size: clamp(36px,4.6vw,60px) !important; margin: 18px 0 0; }
.gaas-hero .gaas-lede { font-size: 20px; line-height: 1.6; max-width: 58ch; }
.gaas-what {
  background: #fff; border: 1px solid rgba(26,109,181,.16); border-radius: 18px;
  padding: 24px 26px; box-shadow: 0 22px 40px -34px rgba(26,109,181,.6);
}
.gaas-what h2 { font-size: 16px !important; margin: 0 0 10px !important; }
.gaas-what p { font-size: 16px; line-height: 1.62; margin: 0 0 10px; }
.gaas-what p:last-child { margin-bottom: 0; }

/* --- vong 7 tram --- */
.gaas-ring svg { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; color: var(--wp--preset--color--sky); }
.gaas-ring .rn-arc { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; opacity: .55; }
.gaas-ring .rn-cut path { fill: none; stroke: var(--wp--preset--color--scarlet); stroke-width: 3.4; stroke-dasharray: 7 5; stroke-linecap: round; }
.gaas-ring .rn-cut:hover path { stroke-width: 4.4; }
.gaas-ring .rn-dot circle { fill: #fff; stroke: var(--wp--preset--color--sky); stroke-width: 2.4; transition: fill .2s; }
.gaas-ring .rn-dot text { font-family: inherit; font-size: 23px; font-weight: 700; fill: var(--wp--preset--color--sky-deep); text-anchor: middle; pointer-events: none; }
.gaas-ring a.rn-dot:hover circle { fill: var(--wp--preset--color--sky-mist); }
.gaas-ring .rn-big { font-family: inherit; font-size: 34px; font-weight: 600; fill: var(--wp--preset--color--sky-deep); text-anchor: middle; }

/* --- dai chang --- */
.gaas-chang { display: flex; align-items: center; gap: 16px; margin: 48px 0 20px !important; }
.gaas-chang b {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 52px; height: 52px; border-radius: 15px;
  background: var(--wp--preset--color--sky-deep); color: #fff;
  font-size: 28px; font-weight: 700; line-height: 1;
}
.gaas-chang span { display: block; font-size: 14px; font-weight: 600; color: var(--wp--preset--color--sky); }
.gaas-chang em { font-style: normal; font-size: 20px; font-weight: 600; color: var(--wp--preset--color--sky-deep); }

/* --- luoi 8 the --- */
.gaas-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.gaas-card {
  display: flex; flex-direction: column; padding: 26px 28px 24px;
  border-radius: 24px; background: #fff; border: 1px solid rgba(14,27,42,.08);
  box-shadow: 0 26px 50px -44px rgba(0,38,77,.6);
  text-decoration: none; color: inherit;
  transition: border-color .2s, transform .2s;
}
.gaas-card:hover { border-color: rgba(26,109,181,.42); transform: translateY(-2px); }
.gaas-card .c-so { font-size: 26px; line-height: 1; font-weight: 600; color: var(--wp--preset--color--sky); }
.gaas-card .c-ten { display: block; margin: 10px 0 0; font-size: 24px; line-height: 1.25; font-weight: 600; color: var(--wp--preset--color--sky-deep); }
.gaas-card .c-hoi { margin: 10px 0 0; flex: 1; font-size: 16px; line-height: 1.6; color: var(--wp--preset--color--ink-soft); }
.gaas-card .c-chot { margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(14,27,42,.08); font-size: 17px; line-height: 1.45; font-weight: 600; color: var(--wp--preset--color--ink); }
.gaas-card .c-di { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--wp--preset--color--scarlet); }
.gaas-card--quay { grid-column: 1 / -1; background: var(--wp--preset--color--sky-deep); border-color: transparent; }
.gaas-card--quay .c-so { color: #fff; font-size: 30px; }
.gaas-card--quay .c-ten { color: #fff; font-size: 28px; }
.gaas-card--quay .c-hoi { color: var(--wp--preset--color--sky-mist); }
.gaas-card--quay .c-chot { border-top-color: rgba(255,255,255,.16); color: #fff; }
.gaas-card--quay .c-di { color: #FF8A8A; }
.gaas-card--quay:hover { border-color: rgba(255,255,255,.3); }

/* trang chu de rong hon bai viet */
.gaas-rong { max-width: 1240px !important; }

@media (max-width: 900px) {
  .gaas-cards { grid-template-columns: 1fr; gap: 16px; }
  .gaas-card { padding: 22px 20px 20px; }
  .gaas-card .c-ten { font-size: 21px; }
  .gaas-card--quay .c-ten { font-size: 24px; }
  .gaas-hero h1 { font-size: clamp(30px,7.4vw,40px) !important; }
  .gaas-hero .gaas-lede { font-size: 18px; }
  .gaas-chang { margin: 36px 0 16px !important; }
  .gaas-chang b { flex-basis: 44px; height: 44px; font-size: 24px; }
  .gaas-chang em { font-size: 18px; }
}

/* ==================== SUA LECH SO VOI BAN TINH (do 23/09) ==================== */
/* Ban tinh: chu than 16px, rieng THAN BAI VIET moi 18px. */
body.single .wp-block-post-content > p,
body.single .wp-block-post-content li { font-size: 18px; line-height: 1.72; }

/* Tieu de muc o TRANG CHU DE to hon o bai viet, dung nhu ban tinh. */
/* Trang "Ban do diem ro" (truoc day la trang chu, nay la trang con id 14).
   Khong dung body.home nua: trang chu bay gio la landing, luat nay se de len h2 cua landing. */
body.page-id-14 .wp-block-post-content h2 { font-size: clamp(24px,2.4vw,32px) !important; line-height: 1.25; }

/* Cot dau trang: ti le 57 / 32 nhu ban tinh, khoang trong don ve giua. */
.gaas-hero .wp-block-columns { justify-content: space-between; }

/* Doan chu canh vong: ban tinh 17px, khong phai 18. */
.gaas-ring + .wp-block-column p { font-size: 17px; line-height: 1.65; max-width: 56ch; }
.gaas-ring + .wp-block-column h2 { margin-top: 0; }

/* ==================== TRANG BAI: dong nhan + danh sach ben ==================== */
body.single .wp-block-post-title { font-size: clamp(28px,3.2vw,42px) !important; line-height: 1.15; }
body.single .wp-block-quote p { font-size: 26px; max-width: 32ch; }
.gaas-bai { align-items: flex-start; }

/* dong nhan tren tieu de */
.gaas-eyeb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--wp--preset--color--sky); }
.gaas-eyeb i { font-style: normal; display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--wp--preset--color--sky-deep); color: #fff; font-size: 14px; }
.gaas-eyeb u { text-decoration: none; color: var(--wp--preset--color--ink-soft); font-weight: 500; }

/* danh sach bai ben phai, dinh khi cuon */
.gaas-side { position: sticky; top: 90px; }
.gaas-side .gs-tieu { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--wp--preset--color--ink-soft); }
.gaas-side .gs-ds { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: none; }
.gaas-side .gs-ds a { display: flex; gap: 9px; padding: 7px 10px; border-radius: 10px; text-decoration: none; font-size: 14px; line-height: 1.35; color: var(--wp--preset--color--ink-soft); }
.gaas-side .gs-ds a b { flex: 0 0 20px; font-weight: 700; color: var(--wp--preset--color--sky); }
.gaas-side .gs-ds a:hover { background: rgba(26,109,181,.06); color: var(--wp--preset--color--sky-deep); }
.gaas-side .gs-ds a.dang-doc { background: var(--wp--preset--color--sky-mist); color: var(--wp--preset--color--sky-deep); font-weight: 600; }
.gaas-side .gs-quay b { color: var(--wp--preset--color--scarlet); }
.gaas-dieuhuong { gap: 20px; }

@media (max-width: 900px) {
  .gaas-bai { flex-wrap: wrap; }
  .gaas-bai > .wp-block-column { flex-basis: 100% !important; }
  .gaas-side { position: static; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(14,27,42,.1); }
  body.single .wp-block-quote p { font-size: 21px; }
}