/* =========================================================================
   Vinaweb – Trang Google Workspace
   Dùng chung biến màu, khung, nút, badge với trang chủ (style.css) và
   banner/thanh mục lục với trang Giới thiệu (about.css).
   ========================================================================= */
:root { --sec: 96px; } /* khoảng cách dọc giữa các khối của trang sản phẩm */
.gw-g { width: 20px; height: 20px; flex: none; stroke: none; }

/* ---------- Banner ---------- */
.phero--gws { padding: 160px 0 100px; }
.phero--gws .phero__title { font-size: clamp(30px, 4.2vw, 38px); }
.gw-trust { display: flex; align-items: center; gap: 10px; margin-top: 30px; font-size: 14px; color: rgba(255,255,255,.72); animation: pheroIn 1s var(--ease) .32s both; }
.gw-trust b { font-weight: 600; color: #fff; }
/* Quỹ đạo ứng dụng quay quanh Gemini */
.gw-orbit { position: relative; height: 460px; animation: pheroIn 1.1s var(--ease) .2s both; }
.gw-orbit__ring, .gw-orbit__core, .gw-orbit__path { position: absolute; top: 50%; left: 50%; }
.gw-orbit__ring { translate: -50% -50%; border: 1px dashed rgba(255,255,255,.26); border-radius: 50%; }
.gw-orbit__ring--r1 { width: 180px; height: 180px; }
.gw-orbit__ring--r2 { width: 300px; height: 300px; }
.gw-orbit__ring--r3 { width: 430px; height: 430px; }
.gw-orbit__core { translate: -50% -50%; display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 10px rgba(255,255,255,.08), 0 24px 60px -10px rgba(155,114,203,.7); }
.gw-orbit__core svg { width: 56px; height: 56px; }
.gw-orbit__path { width: 0; height: 0; }
.gw-orbit__path--r1 { --r: 90px; }
.gw-orbit__path--r2 { --r: 150px; }
.gw-orbit__path--r3 { --r: 215px; }
.gw-orbit__chip { position: absolute; top: calc(-1 * var(--r) * cos(var(--a))); left: calc(var(--r) * sin(var(--a))); translate: -50% -50%; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fff; box-shadow: 0 12px 26px -8px rgba(0,0,0,.55); }
.gw-orbit__chip > span { display: grid; place-items: center; }
.gw-orbit__chip img { width: 26px; height: 26px; object-fit: contain; }
.gw-spin-cw { animation: gwSpin 42s linear infinite; }
.gw-spin-ccw { animation: gwSpin 42s linear infinite reverse; }
@keyframes gwSpin { to { rotate: 360deg; } }
/* Biến thể có nhân vật: tâm quỹ đạo dời sang phải – lên trên; nhân vật đứng lệch trái, tay đưa về phía tâm.
   Nhân vật đứng trước các vòng nên vệ tinh quay tới sẽ khuất sau lưng rồi hiện ra lại (tạo chiều sâu). */
.gw-orbit--host { --cx: 58%; --cy: 45%; --hw: 500px; --core: 96px; --glow: rgba(66,133,244,.85); }
/* Trang Microsoft 365 / Lark: tâm to hơn một chút và ánh sáng theo màu riêng (đè kích thước đặt trong m365.css, lark.css) */
.gw-orbit--host.gw-orbit--ms { --core: 108px; --glow: rgba(186,19,26,.75); }
.gw-orbit--host.gw-orbit--lark { --core: 108px; --glow: rgba(51,112,255,.8); }
.gw-orbit--host .gw-orbit__ring, .gw-orbit--host .gw-orbit__core, .gw-orbit--host .gw-orbit__path { left: var(--cx); top: var(--cy); }
.gw-orbit.gw-orbit--host .gw-orbit__core { z-index: 3; width: var(--core); height: var(--core); animation: gwCore 3.4s ease-in-out infinite alternate; }
.gw-orbit.gw-orbit--host .gw-orbit__core img { width: 62%; height: 62%; }
.gw-orbit--host .gw-orbit__core svg { width: 50px; height: 50px; }
@keyframes gwCore { from { transform: translateY(3px); box-shadow: 0 0 0 8px rgba(255,255,255,.08), 0 20px 50px -10px color-mix(in srgb, var(--glow) 65%, transparent); } to { transform: translateY(-5px); box-shadow: 0 0 0 14px rgba(255,255,255,.1), 0 26px 70px -6px var(--glow); } }
/* Người đứng lệch hẳn sang trái tâm quỹ đạo: bàn tay (đầu ngón ở 74,5% × 55,5% của ảnh) đưa về phía tâm, chạm mép dưới trái của nó */
.gw-host { position: absolute; z-index: 2; left: calc(var(--cx) - var(--hw) * .835); top: calc(var(--cy) + var(--core) / 2 + 2px - var(--hw) * .667 * .555); width: var(--hw); aspect-ratio: 1000 / 667; pointer-events: none; }
.gw-host img { display: block; width: 100%; height: 100%; -webkit-mask: linear-gradient(#000 82%, transparent); mask: linear-gradient(#000 82%, transparent); }
.gw-host__halo { position: absolute; left: 40%; top: 48%; width: 60%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(66,133,244,.34), rgba(155,114,203,.14) 55%, transparent); }
@media (max-width: 1024px) { .gw-orbit--host { --cx: 54%; --hw: 460px; } }
@media (max-width: 680px) { .gw-orbit--host { --cx: 50%; --cy: 44%; --hw: 366px; } }
@media (prefers-reduced-motion: reduce) { .gw-orbit--host .gw-orbit__core { animation: none; } }

/* ---------- Đầu mục dùng chung ---------- */
.gw-head { display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: center; }
.gw-head .h2, .gw-partner__body .h2, .gw-faq__intro .h2, .gw-about__body .h2 { margin-top: 22px; }
.gw-head__lead { font-size: 16.5px; line-height: 1.75; }
.gw-pricing .h2, .gw-compare .h2, .gw-gemini .h2, .gw-gallery .h2 { max-width: 900px; margin: 22px auto 0; }

/* ---------- Bộ ứng dụng ---------- */
.gw-apps { position: relative; overflow: hidden; padding: var(--sec) 0; background: #fff; }
.gw-appgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 44px; }
.gw-app { position: relative; padding: 24px 20px 26px; border-radius: 20px; background: var(--beige); transition: opacity .8s var(--ease), translate .8s var(--ease), background .35s, box-shadow .35s, transform .35s var(--ease); }
.gw-app__ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(33,34,82,.07), 0 8px 18px -10px rgba(33,34,82,.3); }
.gw-app__ic img { width: 30px; height: 30px; object-fit: contain; }
.gw-app h3 { margin-top: 18px; font-size: 17px; font-weight: 700; color: var(--black); }
.gw-app p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--gray); }
@media (hover: hover) { .gw-app:hover { background: #fff; box-shadow: 0 0 0 1px rgba(186,19,26,.35), 0 24px 40px -24px rgba(33,34,82,.4); transform: translateY(-4px); } }

/* ---------- Đối tác Google Cloud ---------- */
.gw-partner { padding: var(--sec) 0; background: var(--beige); }
.gw-partner__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: center; }
.gw-partner__lead { margin: 20px 0 30px; font-size: 16.5px; line-height: 1.8; }
.gw-cert { position: relative; display: grid; place-items: center; min-height: 380px; }
.gw-cert__doc { width: 280px; border-radius: 16px; background: #fff; box-shadow: 0 30px 60px -24px rgba(33,34,82,.35); }
.gw-cert__doc--back { position: absolute; top: 20px; left: calc(50% - 110px); height: 330px; rotate: 5deg; opacity: .8; }
.gw-cert__doc--front { position: relative; min-height: 330px; padding: 26px 28px; rotate: -3deg; }
.gw-cert__top { display: flex; align-items: flex-start; justify-content: space-between; }
.gw-cert__brand { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: #3c4043; }
.gw-cert__lines { display: grid; gap: 6px; padding-top: 6px; }
.gw-cert__lines i { display: block; width: 40px; height: 3px; border-radius: 2px; background: #e3e6ea; }
.gw-cert__lines i:last-child { width: 48px; }
.gw-cert__date { margin-top: 22px; font-size: 12px; color: var(--gray); }
.gw-cert__hi { margin-top: 14px; font-size: 13px; }
.gw-cert__org, .gw-cert__role { margin-top: 18px; font-size: 13px; font-weight: 700; line-height: 1.45; color: var(--black); }
.gw-cert__cap { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--red); }
.gw-cert__sign { margin-top: 26px; font: italic 700 24px Georgia, "Times New Roman", serif; color: var(--navy); }
.gw-cert__badge { position: absolute; right: calc(50% - 190px); bottom: 14px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; padding: 14px 18px; border-radius: 16px; background: #fff; box-shadow: 0 20px 40px -18px rgba(33,34,82,.45); font-size: 13.5px; line-height: 1.3; color: var(--black); }
.gw-cert__badge .gw-g { grid-row: span 2; width: 30px; height: 30px; }
.gw-cert__badge b { font-weight: 700; }
.gw-cert__badge small { font-size: 12px; font-weight: 600; color: var(--red); }

/* ---------- Gemini ---------- */
.gw-gemini { position: relative; isolation: isolate; overflow: hidden; padding: var(--sec) 0; color: #fff; background: radial-gradient(900px 600px at 15% 0%, rgba(63,70,160,.5), transparent 65%), radial-gradient(800px 600px at 100% 100%, rgba(186,19,26,.5), transparent 65%), var(--ink); }
.gw-gemini .h2 em { color: var(--red-soft); }
.gw-gemini__lead { max-width: 640px; margin: 18px auto 0; font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.78); }
.gw-video { max-width: 1000px; margin: 44px auto 0; border-radius: 24px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 50px 90px -40px rgba(0,0,0,.9); }
.gw-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.gw-video--fit video { aspect-ratio: 1230 / 776; object-fit: contain; } /* video có sẵn tỉ lệ riêng: giữ nguyên khung hình, không cắt */

/* ---------- Bảng giá ---------- */
.gw-pricing { padding: var(--sec) 0; background: #fff; }
.gw-suite { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 6px; margin-top: 32px; list-style: none; }
.gw-suite li { display: grid; justify-items: center; gap: 7px; width: 66px; font-size: 11.5px; color: var(--gray); text-align: center; }
.gw-suite span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.gw-suite img { width: 20px; height: 20px; object-fit: contain; }
.gw-bill { display: grid; justify-items: center; gap: 12px; margin-top: 32px; }
.gw-bill__switch { display: inline-flex; gap: 2px; padding: 5px; border-radius: 100px; background: var(--chip); }
.gw-bill__btn { display: inline-flex; white-space: nowrap; align-items: center; gap: 10px; height: 44px; padding: 0 22px; border-radius: 100px; font-size: 15px; font-weight: 600; color: var(--text); transition: background .3s, color .3s, box-shadow .3s; }
.gw-bill__btn span { padding-left: 10px; border-left: 1px solid currentColor; font-size: 13.5px; color: var(--red); }
.gw-bill__btn.is-active { color: #fff; background: var(--red); box-shadow: 0 10px 22px -10px rgba(186,19,26,.7); }
.gw-bill__btn.is-active span { color: #fff; border-left-color: rgba(255,255,255,.5); }
.gw-bill__note { font-size: 13px; color: var(--gray); }
.gw-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; margin-top: 40px; }
.gw-plan { position: relative; display: flex; flex-direction: column; padding: 30px 24px 28px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .35s, transform .35s var(--ease); }
.gw-plan--hot { background: linear-gradient(#fff, #fff8f8); box-shadow: inset 0 0 0 2px var(--red), 0 30px 60px -34px rgba(186,19,26,.55); }
.gw-plan__flag { position: absolute; top: 0; left: 50%; translate: -50% -50%; padding: 7px 16px; border-radius: 100px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: #fff; background: var(--red); }
/* Hình đại diện gói: nhân vật đứng trong các vòng tròn đồng tâm */
.gw-plan__head { position: relative; display: grid; place-items: center; height: 176px; margin: 34px 0 10px; }
.gw-plan__ring { position: absolute; border-radius: 50%; background: var(--ring); }
.gw-plan__ring--3 { width: 176px; height: 176px; opacity: .2; }
.gw-plan__ring--2 { width: 146px; height: 146px; opacity: .42; }
.gw-plan__ring--1 { width: 118px; height: 118px; opacity: .8; }
.gw-plan__avatar { position: relative; width: 96px; height: 96px; border-radius: 50%; background: var(--ring); box-shadow: 0 8px 20px rgba(0,0,0,.16); }
.gw-plan__avatar img { position: absolute; left: 50%; bottom: -11px; width: auto; height: 200px; max-width: none; translate: -50% 0; object-fit: contain; }
.gw-plan:nth-child(1) { --ring: linear-gradient(150deg, #5aa9f0, #2e6fdb); }
.gw-plan:nth-child(2) { --ring: linear-gradient(150deg, #2cc5d6, #1590c4); }
.gw-plan:nth-child(3) { --ring: linear-gradient(150deg, #ff6a3d, #ee161f); }
.gw-plan:nth-child(4) { --ring: linear-gradient(150deg, #6dc85a, #2e9e4f); }
.gw-plan__name { text-align: center; font-size: 20px; font-weight: 700; line-height: 1.35; color: var(--black); }
.gw-plan__sum { min-height: 66px; margin-top: 10px; text-align: center; font-size: 14px; line-height: 1.6; color: var(--gray); }
.gw-plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 18px; font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--black); }
.gw-plan--hot .gw-plan__price { color: var(--red); }
.gw-plan__price small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--gray); }
.gw-plan__old { margin-top: 8px; font-size: 13.5px; color: var(--gray); }
.gw-plan__save { align-self: flex-start; margin-top: 12px; padding: 6px 12px; border-radius: 100px; font-size: 12.5px; font-weight: 600; color: var(--red); background: #fdecec; }
.gw-plan__cta { display: grid; place-items: center; height: 50px; margin-top: 22px; border-radius: 100px; font-size: 15px; font-weight: 700; color: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); transition: background .3s, color .3s, transform .25s var(--ease); }
.gw-plan__cta:hover { color: #fff; background: var(--red); transform: translateY(-2px); }
.gw-plan--hot .gw-plan__cta { color: #fff; background: linear-gradient(135deg, #e0333a, var(--red) 55%, #8f0a10); box-shadow: 0 14px 30px -12px rgba(224,51,58,.75); }
.gw-plan__feats { display: grid; gap: 12px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); list-style: none; font-size: 14px; line-height: 1.55; }
.gw-plan__feats li { position: relative; padding-left: 28px; }
.gw-plan__feats li::before, .gw-checks li::before, .gw-yes { content: ""; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; border-radius: 50%; }
.gw-plan__feats li::before, .gw-checks li::before { position: absolute; left: 0; top: 2px; width: 18px; height: 18px; }
.gw-plan__feats b { font-weight: 700; color: var(--black); }
@media (hover: hover) { .gw-plan:not(.gw-plan--hot):hover { box-shadow: inset 0 0 0 1px var(--red), 0 30px 50px -34px rgba(33,34,82,.45); transform: translateY(-4px); } }

/* ---------- So sánh gói ---------- */
.gw-compare { padding: var(--sec) 0; background: #fff; }
.gw-cmp { margin-top: 40px; }
.gw-cmp__scroll { overflow-x: auto; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); -webkit-overflow-scrolling: touch; }
.gw-cmp__table { width: 100%; min-width: 900px; border-collapse: collapse; table-layout: fixed; font-size: 14.5px; line-height: 1.5; }
.gw-cmp__table :is(td, th) { padding: 14px 16px; text-align: center; vertical-align: middle; border-bottom: 1px solid #ececec; }
.gw-cmp__table tbody th[scope="row"] { width: 30%; text-align: left; font-weight: 500; color: var(--black); }
.gw-cmp__table thead :is(td, th) { padding: 24px 14px; vertical-align: top; background: #fff; }
.gw-cmp__table thead td { width: 30%; }
.gw-cmp__table thead th b { display: block; font-size: 16.5px; font-weight: 700; color: var(--black); }
.gw-cmp__table thead th span { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--red); }
.gw-cmp__table thead th a { display: inline-grid; place-items: center; height: 38px; margin-top: 12px; padding: 0 16px; border-radius: 100px; font-size: 13.5px; font-weight: 700; color: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); transition: background .3s, color .3s; }
.gw-cmp__table thead th a:hover, .gw-cmp__table thead th.is-hot a { color: #fff; background: var(--red); }
.gw-cmp__table td span { font-size: 12.5px; color: var(--gray); }
.gw-cmp__table tbody tr:not(.gw-cmp__grp):hover > * { background: #fbfaf6; }
.gw-cmp__grp th { padding: 16px; text-align: left; background: var(--beige); border-bottom: 0; }
.gw-cmp__grp b { font-size: 15.5px; font-weight: 700; color: var(--black); }
.gw-cmp__grp span { margin-left: 12px; padding-left: 12px; border-left: 1px solid #cfcabb; font-size: 13.5px; font-weight: 400; color: var(--gray); }
.gw-yes, .gw-no { display: inline-block; vertical-align: middle; }
.gw-yes { width: 20px; height: 20px; }
.gw-no { width: 14px; height: 2px; border-radius: 2px; background: #cfcfcf; }
.gw-ai { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 100px; font-size: 11.5px; font-weight: 600; font-style: normal; white-space: nowrap; color: #6b4fb3; background: #f1ecfb; }
/* Bảng so sánh Google Workspace: dòng đầu mỗi mục có icon ứng dụng + giá trị từng gói; dòng .is-more chỉ hiện khi mở đầy đủ */
.gw-cmp .gw-cmp__table tbody tr.gw-cmp__grp--vals > * { background: var(--beige); border-bottom: 0; }
.gw-cmp__table tbody tr.gw-cmp__grp--vals th { display: table-cell; padding: 14px 16px; }
.gw-cmp__grp--vals th { vertical-align: middle; }
.gw-cmp__grp--vals td { font-weight: 600; color: var(--black); }
.gw-cmp__gh { display: flex; align-items: center; gap: 12px; }
.gw-cmp__ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; }
.gw-cmp__ic img { width: 26px; height: 26px; max-width: none; object-fit: contain; }
.gw-cmp__ic svg { width: 24px; height: 24px; fill: none; stroke: #1a73e8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gw-cmp__tt { display: grid; gap: 1px; min-width: 0; }
.gw-cmp__tt b { position: static; font-size: 15.5px; line-height: 1.35; }
.gw-cmp__tt small { font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--gray); }
/* Dấu "có" trong bảng so sánh .gw-cmp--fit (Google Workspace, Microsoft 365): dấu tích mảnh màu đen, không nền tròn đỏ */
.gw-cmp--fit .gw-cmp__table .gw-yes { width: 20px; height: 20px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1f24' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 6.5 9.5 17 4.5 12'/%3E%3C/svg%3E") center / 20px no-repeat; }
.gw-cmp__table tr.is-more { display: none; }
.gw-cmp.is-open .gw-cmp__table tr.is-more { display: table-row; }
.gw-cmp__more { display: none; }
.gw-cmp.is-open .gw-cmp__more { display: table-row-group; }
.gw-cmp__more-wrap { margin-top: 30px; }
.gw-cmp__toggle .btn__ic svg { transition: rotate .3s; }
.gw-cmp.is-open .gw-cmp__toggle .btn__ic svg { rotate: 180deg; }
.gw-cmp__toggle:hover .btn__ic { transform: none; }

/* ---------- Kiến thức ---------- */
.gw-news { padding: var(--sec) 0; }
.gw-news .ncard__img { aspect-ratio: 16 / 9; }
/* Hai khối nền trắng liền nhau: chỉ giữ một khoảng cách, không cộng dồn */
:is(.gw-apps, .gw-pricing, .gw-compare, .gw-gallery, .gw-faq) + :is(.gw-apps, .gw-pricing, .gw-compare, .gw-gallery, .gw-faq) { margin-top: -1px; padding-top: 1px; } /* chồng 1px để không lộ đường kẻ khi ranh giới rơi vào toạ độ lẻ */

/* ---------- Hình ảnh hoạt động ---------- */
.gw-gallery { padding: var(--sec) 0; background: #fff; overflow: hidden; }
.gw-gallery__lead { max-width: 640px; margin: 18px auto 0; font-size: 16.5px; line-height: 1.7; }
.gw-marquee { display: grid; gap: 20px; margin-top: 44px; }
.gw-marquee__track { display: flex; gap: 20px; width: max-content; animation: gwMarquee 60s linear infinite; }
.gw-marquee__track--rev { animation-direction: reverse; }
.gw-marquee:hover .gw-marquee__track { animation-play-state: paused; }
@keyframes gwMarquee { to { translate: -50% 0; } }
.gw-shot { flex: none; width: 340px; }
.gw-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; background: var(--beige); }
.gw-shot figcaption { margin-top: 12px; font-size: 14.5px; font-weight: 600; text-align: center; color: var(--black); }

/* ---------- Hỏi đáp ---------- */
.gw-faq { padding: var(--sec) 0; background: #fff; }
.gw-news + .gw-faq, .gw-gallery + .gw-faq { border-top: 0; }
.gw-faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
.gw-faq__intro { position: sticky; top: 130px; }
.gw-faq__intro p { margin: 18px 0 30px; font-size: 16.5px; line-height: 1.75; }
.gw-faq__list { display: grid; gap: 12px; }
.gw-qa { border-radius: 18px; background: var(--beige); transition: background .3s, box-shadow .3s; }
.gw-qa[open] { background: #fff; box-shadow: inset 0 0 0 1px rgba(186,19,26,.4), 0 24px 40px -30px rgba(33,34,82,.4); }
.gw-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; font-size: 16.5px; font-weight: 600; line-height: 1.5; color: var(--black); cursor: pointer; list-style: none; }
.gw-qa summary::-webkit-details-marker { display: none; }
.gw-qa summary i { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: background .3s, rotate .3s; }
.gw-qa summary i::before, .gw-qa summary i::after { content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 2px; border-radius: 2px; background: var(--red); transition: background .3s; }
.gw-qa summary i::after { rotate: 90deg; }
.gw-qa[open] summary i { background: var(--red); box-shadow: none; rotate: 45deg; }
.gw-qa[open] summary i::before, .gw-qa[open] summary i::after { background: #fff; }
.gw-qa summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 18px; }
.gw-qa__body { padding: 0 22px 22px; font-size: 15.5px; line-height: 1.75; }
.gw-qa__body > * + * { margin-top: 10px; }
.gw-qa__body :is(ul, ol) { padding-left: 22px; }
.gw-qa__body a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Về Vinaweb ---------- */
.gw-about { position: relative; overflow: hidden; padding: var(--sec) 0; background: var(--beige); }
.gw-about__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 70px; align-items: center; }
.gw-about__media { border-radius: 24px; overflow: hidden; }
.gw-about__media img { width: 100%; height: auto; }
.gw-about__lead { margin-top: 20px; font-size: 16.5px; line-height: 1.8; }
.gw-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.gw-stats div { padding: 18px 16px; border-radius: 16px; background: #fff; }
.gw-stats b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--red); }
.gw-stats span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.4; color: var(--gray); }
.gw-checks { display: grid; gap: 12px; margin-top: 28px; list-style: none; font-size: 15.5px; line-height: 1.55; color: var(--black); }
.gw-checks li { position: relative; padding-left: 30px; }
.gw-about__cta { margin-top: 30px; }

.gw-bill__btn:focus-visible, .gw-plan__cta:focus-visible, .gw-cmp__scroll:focus-visible, .gw-cmp__table a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

@media (max-width: 1200px) {
  .gw-appgrid { grid-template-columns: repeat(4, 1fr); }
  .gw-plans { grid-template-columns: repeat(2, 1fr); gap: 34px 18px; }
  .gw-plan__sum { min-height: 0; }
}
@media (max-width: 1024px) {
  :root { --sec: 72px; }
  .phero--gws { padding: 120px 0 80px; }
  .gw-orbit { height: 400px; scale: .9; }
  .gw-head, .gw-partner__grid, .gw-faq__grid, .gw-about__grid { grid-template-columns: 1fr; gap: 36px; }
  .gw-head { align-items: start; gap: 18px; }
  .gw-appgrid { grid-template-columns: repeat(3, 1fr); margin-top: 40px; }
  .gw-faq__intro { position: static; }
  .gw-cert { min-height: 360px; }
}
@media (max-width: 680px) {
  :root { --sec: 56px; }
  .phero--gws { padding: 108px 0 64px; }
  .gw-orbit { height: 340px; margin: -20px 0; scale: .74; }
  .gw-trust { align-items: flex-start; font-size: 13.5px; line-height: 1.5; }
  .gw-appgrid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .gw-app { padding: 18px 16px 20px; border-radius: 16px; }
  .gw-app__ic { width: 46px; height: 46px; border-radius: 14px; }
  .gw-app__ic img { width: 26px; height: 26px; }
  .gw-app h3 { margin-top: 14px; font-size: 15.5px; }
  .gw-app p { font-size: 13px; }
  .gw-cert { scale: .7; margin: -54px 0; } /* thu nhỏ hình chứng nhận trên điện thoại; lề âm bù phần trống do scale */
  .gw-cert__badge { right: calc(50% - 150px); }
  .gw-video { margin-top: 36px; border-radius: 16px; }
  /* Dải icon ứng dụng: một hàng vuốt ngang */
  .gw-suite { flex-wrap: nowrap; justify-content: flex-start; margin: 30px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .gw-suite::-webkit-scrollbar { display: none; }
  .gw-suite li { flex: none; width: 62px; }
  .gw-bill__btn { height: 42px; gap: 8px; padding: 0 13px; font-size: 13.5px; }
  .gw-bill__btn span { padding-left: 8px; font-size: 12px; }
  .gw-bill__note { text-align: center; }
  .gw-plans { grid-template-columns: 1fr; }
  .gw-cmp { margin-top: 32px; }
  .gw-cmp__scroll { margin: 0 calc(var(--gutter) * -1); border-radius: 0; }
  .gw-cmp__table { min-width: 720px; font-size: 13.5px; }
  .gw-cmp__table :is(td, th) { padding: 12px 10px; }
  /* Cột tên tính năng đứng yên khi vuốt ngang bảng */
  .gw-cmp__table tbody th[scope="row"], .gw-cmp__table thead td { position: sticky; left: 0; z-index: 1; width: 150px; background: #fff; box-shadow: 1px 0 0 #ececec; }
  .gw-cmp__grp b, .gw-cmp__grp span { position: sticky; left: 10px; }
  .gw-cmp__grp span { display: none; }
  .gw-shot { width: 250px; }
  .gw-marquee { margin-top: 36px; gap: 14px; }
  .gw-marquee__track { gap: 14px; }
  .gw-qa summary { padding: 16px 18px; font-size: 15.5px; }
  .gw-qa__body { padding: 0 18px 18px; font-size: 15px; }
  .gw-stats { gap: 8px; }
  .gw-stats div { padding: 14px 12px; }
  .gw-stats b { font-size: 24px; }
  .gw-stats span { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .gw-spin-cw, .gw-spin-ccw, .gw-marquee__track { animation: none; }
  .gw-marquee { overflow-x: auto; }
}

/* =========================================================================
   ĐIỂM NHẤN NHẬN DIỆN HÃNG (dùng chung cho các trang sản phẩm)
   Các khối theo tông Vinaweb như trang chủ; nhận diện của hãng chỉ điểm nhẹ.
   Mỗi trang bọc phần dưới banner trong một lớp riêng (.gws, .ms365) và khai báo
   --brand-stripe (dải màu của hãng) cùng chấm ở đầu nhãn.
   ========================================================================= */
/* Thẻ ứng dụng: rê chuột thì ngả nhẹ sang màu của ứng dụng (--c đặt trên thẻ) */
.gw-app { overflow: hidden; }
.gw-app::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c, var(--red)); scale: 0 1; transform-origin: left; transition: scale .45s var(--ease); }
@media (hover: hover) {
  .gw-app:hover { background: color-mix(in srgb, var(--c, var(--red)) 6%, #fff); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c, var(--red)) 45%, #fff), 0 22px 40px -26px color-mix(in srgb, var(--c, var(--red)) 70%, transparent); }
  .gw-app:hover::before { scale: 1 1; }
}
/* Dải màu của hãng ở mép trên khối đối tác và trên tờ chứng chỉ */
.gw-partner { position: relative; }
.gw-partner::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--brand-stripe, none); }
.gw-cert__doc--front::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; border-radius: 16px 16px 0 0; background: var(--brand-stripe, none); }
/* Vạch màu riêng của từng gói ở viền trên thẻ (--pc); gói đề xuất đã có viền đỏ */
.gw-plan::before { content: ""; position: absolute; inset: 0 24px auto 24px; height: 4px; border-radius: 0 0 4px 4px; background: var(--pc, transparent); }
.gw-plan--hot::before { content: none; }

/* ----- Trang Google Workspace ----- */
.gws { --brand-stripe: linear-gradient(90deg, #4285f4 0 25%, #ea4335 25% 50%, #fbbc04 50% 75%, #34a853 75%); }
/* Chấm đầu nhãn: bốn màu Google */
.gws .badge::before { width: 12px; height: 12px; clip-path: none; border-radius: 50%; background: conic-gradient(#ea4335 0 25%, #fbbc04 0 50%, #34a853 0 75%, #4285f4 0); }
.gws .gw-plan:nth-child(1) { --pc: #4285f4; }
.gws .gw-plan:nth-child(3) { --pc: #ea4335; }
.gws .gw-plan:nth-child(4) { --pc: #34a853; }
/* Chữ nhấn của khối Gemini dùng dải màu Gemini */
.gws .gw-gemini .h2 em { background: linear-gradient(90deg, #7cacf8, #c19df0 50%, #f08fa0); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* =========================================================================
   THANH MỤC LỤC TRANG SẢN PHẨM: bám đáy màn hình (không chồng lên menu trên cùng)
   Áp dụng cho thanh .subnav nằm trong lớp bọc của trang sản phẩm (.gws, .ms365, .lark).
   Thanh có thêm lớp .subnav--top thì KHÔNG bám đáy: nằm ở mép dưới banner và bám dưới menu khi cuộn (như trang AutoCAD).
   gws.js ẩn thanh khi cuộn tới form liên hệ / chân trang.
   ========================================================================= */
:is(.gws, .ms365, .lark) > .subnav:not(.subnav--top) { position: fixed; inset: auto 0 calc(18px + env(safe-area-inset-bottom, 0px)) 0; top: auto; z-index: 18; height: auto; transition: opacity .35s, translate .45s var(--ease), visibility 0s; }
:is(.gws, .ms365, .lark) > .subnav:not(.subnav--top) .subnav__inner { margin-top: 0; background: rgba(255,255,255,.92); box-shadow: 0 0 0 1px rgba(33,34,82,.1), 0 18px 44px -14px rgba(33,34,82,.45); }
:is(.gws, .ms365, .lark) > .subnav:not(.subnav--top).is-away { opacity: 0; translate: 0 24px; visibility: hidden; transition: opacity .35s, translate .45s var(--ease), visibility 0s .45s; }
/* Chừa chỗ cho nút gọi nổi ở góc trái khi màn hình hẹp */
@media (max-width: 1100px) {
  :is(.gws, .ms365, .lark) > .subnav:not(.subnav--top) { justify-content: flex-end; padding: 0 14px 0 var(--subnav-left, 210px); }
}
@media (max-width: 680px) {
  :is(.gws, .ms365, .lark) > .subnav:not(.subnav--top) { --subnav-left: 76px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { :is(.gws, .ms365, .lark) > .subnav:not(.subnav--top) { transition: none; } }

/* ---------- Bảng giá Google Workspace: nền gradient nhạt theo phong cách Gemini (xanh lam – tím – hồng),
   thẻ gói nền trắng nổi trên nền; bỏ vạch màu ngang ở mép trên thẻ ---------- */
.gw-pricing--gemini {
  padding-top: var(--sec);
  background:
    radial-gradient(58% 68% at 0% 0%, rgba(71,150,227,.26), transparent 62%),
    radial-gradient(55% 65% at 100% 0%, rgba(145,119,199,.26), transparent 62%),
    radial-gradient(60% 62% at 100% 100%, rgba(202,102,115,.2), transparent 62%),
    radial-gradient(55% 60% at 0% 100%, rgba(145,119,199,.16), transparent 62%),
    #f8f7fd;
}
.gw-pricing--gemini .gw-plan::before { content: none; }
.gw-pricing--gemini .gw-plan { box-shadow: inset 0 0 0 1px rgba(33,34,82,.08), 0 22px 44px -30px rgba(33,34,82,.35); }
.gw-pricing--gemini .gw-plan--hot { background: #fff; box-shadow: inset 0 0 0 2px var(--red), 0 30px 60px -34px rgba(186,19,26,.55); }
/* Nút và nhãn ưu đãi ăn theo màu vòng tròn của từng gói; nút tô màu, bo góc nhẹ */
.gw-pricing--gemini .gw-plan:nth-child(1) { --pa: #5aa9f0; --pb: #2e6fdb; }
.gw-pricing--gemini .gw-plan:nth-child(2) { --pa: #2cc5d6; --pb: #1590c4; }
.gw-pricing--gemini .gw-plan:nth-child(3) { --pa: #ff6a3d; --pb: #ee161f; }
.gw-pricing--gemini .gw-plan:nth-child(4) { --pa: #6dc85a; --pb: #2e9e4f; }
.gw-pricing--gemini .gw-plan__save { color: color-mix(in srgb, var(--pb) 82%, #000); background: color-mix(in srgb, var(--pb) 11%, #fff); }
.gw-pricing--gemini .gw-plan__cta,
.gw-pricing--gemini .gw-plan--hot .gw-plan__cta { border-radius: 8px; color: #fff; background: linear-gradient(100deg, var(--pa), var(--pb)); box-shadow: 0 12px 24px -14px var(--pb); }
/* Khối giá căn giữa thẻ: giá, đơn vị, giá gói tháng, nhãn tiết kiệm */
.gw-pricing--gemini .gw-plan__price { justify-content: center; text-align: center; }
.gw-pricing--gemini .gw-plan__old { text-align: center; }
.gw-pricing--gemini .gw-plan__save { align-self: center; }
.gw-pricing--gemini .gw-plan__price small { flex-basis: 100%; } /* đơn vị giá luôn nằm dòng riêng → hàng nút của bốn gói thẳng nhau */
.gw-pricing--gemini .gw-plan__cta:hover { color: #fff; background: linear-gradient(100deg, var(--pa), var(--pb)); filter: brightness(1.06); transform: translateY(-2px); }
/* Tính năng gói trình bày như bảng giá của Google: câu dẫn + icon ứng dụng của hãng, dấu tích xanh cho mục không có icon */
.gw-plan__intro { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--black); }
.gw-plan__feats--brand { gap: 14px; margin-top: 16px; padding-top: 0; border-top: 0; }
.gw-plan__feats--brand li { display: flex; gap: 12px; padding-left: 0; }
.gw-plan__feats--brand li::before { content: none; }
.gw-plan__feats--brand img { flex: none; width: 22px; height: 22px; object-fit: contain; }
.gw-plan__feats--brand span { min-width: 0; color: #4a4a57; }
.gw-plan__feats--brand b { display: block; font-size: 15px; line-height: 1.4; }
.gw-plan__feats--brand .is-check::before { content: ""; position: static; flex: none; width: 22px; height: 22px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a73e8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7 10 16.5 5.5 12'/%3E%3C/svg%3E") center / 18px no-repeat; }
/* Bảng giá 2 cột: tên gói giữ chỗ 2 dòng để hai nút cùng hàng vẫn thẳng nhau */
@media (min-width: 681px) and (max-width: 1200px) { .gw-pricing--gemini .gw-plan__name { min-height: 54px; } }
/* Khối liền trước/sau (nền trắng) giữ đủ khoảng đệm vì bảng giá giờ có nền riêng */
.gws :is(.gw-apps, .gw-compare, .gw-gallery, .gw-faq) + .gw-pricing--gemini { margin-top: 0; padding-top: var(--sec); }
.gws .gw-pricing--gemini + section { margin-top: 0; padding-top: var(--sec); }

/* Điện thoại: ẩn thanh mục lục bám đáy của trang sản phẩm – nó vướng vào nút chat và các nút nổi ở góc dưới */
@media (max-width: 680px) {
  :is(.gws, .ms365, .lark) > .subnav:not(.subnav--top) { display: none; }
}

/* Điện thoại: lưới ứng dụng xếp 2 hàng và vuốt ngang để xem tiếp (đỡ dài trang).
   Thẻ kế tiếp lộ một phần ở mép phải để người xem biết còn nội dung; kéo tràn ra sát hai mép màn hình. */
@media (max-width: 680px) {
  .gw-appgrid {
    display: grid; grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: 44%;
    gap: 10px; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 14px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .gw-appgrid::-webkit-scrollbar { display: none; }
  .gw-appgrid > .gw-app { scroll-snap-align: start; }
  /* Thẻ nằm ngoài màn hình theo chiều ngang không được ẩn chờ hiệu ứng hiện dần */
  .gw-appgrid > .gw-app.reveal { opacity: 1; translate: none; transform: none; }
}

/* Điện thoại: 3 bài ở khối Kiến thức của trang sản phẩm xếp một hàng và vuốt ngang (đỡ dài trang);
   bài kế tiếp lộ một phần ở mép phải để người xem biết còn nội dung. */
@media (max-width: 680px) {
  .gw-news .nlist {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%;
    gap: 14px; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 14px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .gw-news .nlist::-webkit-scrollbar { display: none; }
  .gw-news .nlist > .ncard { scroll-snap-align: start; }
  .gw-news .nlist > .ncard.reveal { opacity: 1; translate: none; transform: none; }
}

/* ---------- Bảng so sánh trên điện thoại (.gw-cmp--fit – Google Workspace, Microsoft 365): co vừa màn hình như trang giá của Google ----------
   Không cuộn ngang, không che chữ: cột tên tính năng rộng, bốn cột gói hẹp; tên gói viết dọc và bám dưới thanh menu khi cuộn. */
.gw-cmp__short, .gw-cmp__mcta { display: none; }
.gw-cmp__table tbody th[scope="row"] b { font-weight: 700; }
@media (max-width: 680px) {
  .gw-cmp--fit .gw-cmp__scroll { overflow: visible; box-shadow: none; }
  .gw-cmp--fit .gw-cmp__table { min-width: 0; font-size: 13.5px; line-height: 1.45; }
  .gw-cmp--fit .gw-cmp__table :is(td, th) { padding: 12px 3px; }
  .gw-cmp--fit .gw-cmp__table tbody th[scope="row"], .gw-cmp--fit .gw-cmp__table thead td { position: static; width: 46%; padding-left: var(--gutter); padding-right: 8px; box-shadow: none; }
  .gw-cmp--fit .gw-cmp__table tbody td { border-left: 1px solid #ececec; font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
  .gw-cmp--fit .gw-cmp__table thead :is(td, th) { position: sticky; top: 60px; z-index: 2; height: 118px; padding: 10px 0; vertical-align: middle; background: #fff; border-bottom: 2px solid #8a8a8a; }
  .gw-cmp--fit .gw-cmp__table thead th { border-left: 1px solid #ececec; }
  .gw-cmp--fit .gw-cmp__table thead th :is(b, span, a) { display: none; }
  .gw-cmp--fit .gw-cmp__short { display: inline-block; writing-mode: vertical-rl; rotate: 180deg; font-style: normal; font-size: 13px; font-weight: 500; letter-spacing: .01em; color: #5f6368; }
  .gw-cmp--fit .gw-cmp__table thead th.is-hot { box-shadow: inset 0 0 0 2px var(--red); }
  .gw-cmp--fit .gw-cmp__table thead th.is-hot .gw-cmp__short { font-weight: 700; color: var(--red); }
  .gw-cmp--fit .gw-cmp__table thead td { padding-left: var(--gutter); text-align: left; }
  .gw-cmp--fit .gw-cmp__mcta { display: inline-grid; place-items: center; height: 40px; padding: 0 18px; border-radius: 100px; font-size: 13.5px; font-weight: 700; color: #fff; background: var(--red); }
  .gw-cmp--fit .gw-cmp__gh { gap: 10px; }
  .gw-cmp--fit .gw-cmp__grp th[colspan] { padding-left: var(--gutter); }
  .gw-cmp--fit .gw-cmp__grp :is(b, span, img) { position: static; }
  .gw-cmp--fit .gw-cmp__table .gw-yes { width: 18px; height: 18px; background-size: 18px; }
}