/* =========================================================================
   Vinaweb – Trang Gemini Enterprise (pages/gemini-enterprise.php)
   Nạp SAU gws.css + m365.css: bố cục khối (gw-apps, gw-plan, gw-cmp, gw-faq…)
   dùng chung. File này gồm phần riêng của trang và điểm nhấn Gemini (nhẹ),
   bọc trong .gmn (tiền tố gm-).
   ========================================================================= */

.gm-logo { width: 20px; height: 20px; flex: none; }

/* ---------- Banner: quỹ đạo logo hệ thống quanh Gemini ---------- */
.gw-orbit--gm .gw-orbit__chip { background: #fff; box-shadow: 0 12px 26px -8px rgba(0,0,0,.6); }
.gw-orbit--gm .gw-orbit__chip img { width: 62%; height: 62%; object-fit: contain; }
.gw-orbit--gm .gw-orbit__chip > span { display: grid; place-items: center; width: 100%; height: 100%; }
.gw-orbit.gw-orbit--gm .gw-orbit__core { background: #fff; }
.gw-orbit.gw-orbit--host.gw-orbit--gm { --glow: rgba(124,77,204,.8); }

/* ---------- Điểm nhấn Gemini: chấm nhãn hình ngôi sao 4 cánh, dải màu Gemini ---------- */
.gmn { --brand-stripe: linear-gradient(90deg, #4285f4, #9b72cb 50%, #d96570); }
.gmn .badge::before { width: 12px; height: 12px; border-radius: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); background: linear-gradient(135deg, #4285f4, #9b72cb); }

/* Thẻ tính năng: icon nét màu trên ô nhạt */
.gm-ic { color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
.gm-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Số cột riêng chỉ áp từ 681px; điện thoại dùng kiểu lưới vuốt ngang chung của .gw-appgrid (gws.css) */
@media (min-width: 681px) { .gm-feats { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Trợ lý theo phòng ban: khung chat + 4 thẻ ---------- */
.gm-ai { padding-block: var(--sec); background: var(--beige); }
.gm-h2 { max-width: 900px; margin: 22px auto 0; }
.gm-ai__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; margin-top: 44px; }
.gm-ai__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gm-ai__cta { grid-column: 1 / -1; margin-top: 8px; }
.gm-use { padding: 22px 20px; border-radius: 20px; background: #fff; transition: opacity .8s var(--ease), translate .8s var(--ease), box-shadow .35s; }
.gm-use__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
.gm-use__ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gm-use h3 { margin-top: 14px; font-size: 17px; font-weight: 700; color: var(--black); }
.gm-use p { margin-top: 6px; font-size: 14.5px; line-height: 1.65; }
@media (hover: hover) { .gm-use:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 45%, #fff), 0 22px 40px -26px color-mix(in srgb, var(--c) 70%, transparent); } }

.gm-chat { position: relative; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -36px rgba(33,34,82,.5), 0 0 0 1px rgba(33,34,82,.07); }
.gm-chat::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--brand-stripe); }
.gm-chat__bar { display: flex; align-items: center; gap: 9px; padding: 16px 18px 12px; font-size: 14.5px; color: var(--black); border-bottom: 1px solid var(--line); }
.gm-chat__bar img { width: 20px; height: 20px; }
.gm-chat__bar span { margin-left: auto; padding: 3px 10px; border-radius: 100px; font-size: 12px; color: var(--gray); background: #f3f3f3; }
.gm-chat__body { display: grid; gap: 18px; min-height: 300px; padding: 22px 20px; background: linear-gradient(180deg, #fff, #f7f8fd); }
.gm-chat__q { justify-self: end; display: flex; align-items: center; max-width: 86%; min-height: 42px; padding: 10px 16px; border-radius: 18px 18px 4px 18px; background: #e8f0fe; font-size: 14px; color: #1f2a44; }
.gm-chat__caret { flex: none; width: 1.5px; height: 16px; margin-left: 2px; background: #1f2a44; animation: gmBlink 1s steps(1) infinite; }
@keyframes gmBlink { 50% { opacity: 0; } }
.gm-chat__a { display: flex; gap: 12px; align-items: flex-start; }
.gm-chat__av { flex: none; width: 26px; height: 26px; margin-top: 2px; }
.gm-chat__a > div { display: grid; gap: 9px; flex: 1; min-width: 0; }
.gm-chat__step { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #5f6368; }
.gm-chat__step i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #c6d4f7; border-top-color: #4285f4; animation: gmSpin 1s linear infinite; }
@keyframes gmSpin { to { rotate: 360deg; } }
.gm-chat__line { display: block; width: var(--w); height: 10px; border-radius: 6px; background: linear-gradient(90deg, #e3e8f4, #eef1f8, #e3e8f4) 0 0 / 200% 100%; animation: gmShimmer 2.2s linear infinite; }
@keyframes gmShimmer { to { background-position: -200% 0; } }
.gm-chat__src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.gm-chat__src span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 100px; font-size: 12px; color: #3c4043; background: #fff; box-shadow: inset 0 0 0 1px #e1e3e8; }
.gm-chat__src img { width: 15px; height: 15px; object-fit: contain; }
.gm-chat__input { display: flex; align-items: center; gap: 10px; margin: 0 16px 16px; padding: 8px 8px 8px 16px; border-radius: 100px; font-size: 13.5px; color: #80868b; box-shadow: inset 0 0 0 1px #dadce0; }
.gm-chat__input b { margin-left: auto; padding: 6px 12px; border-radius: 100px; font-size: 12px; font-weight: 600; color: #fff; background: linear-gradient(90deg, #4285f4, #9b72cb); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .gm-chat__caret, .gm-chat__step i, .gm-chat__line { animation: none; } }

/* ---------- Dữ liệu & bảo mật: lưới logo kết nối quanh Gemini ---------- */
.gm-hub { position: relative; width: min(100%, 460px); margin-inline: auto; padding: 22px; border-radius: 24px; background: #fff; box-shadow: 0 34px 70px -30px rgba(33,34,82,.4), 0 0 0 1px rgba(33,34,82,.06); }
.gm-hub::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; border-radius: 24px 24px 0 0; background: var(--brand-stripe); }
.gm-hub__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.gm-hub__grid li { display: grid; justify-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 14px; background: #f7f7f9; font-size: 11.5px; color: var(--gray); text-align: center; opacity: 0; scale: .9; transition: opacity .5s var(--ease), scale .5s var(--ease); }
.gm-hub.is-in .gm-hub__grid li { opacity: 1; scale: 1; transition-delay: calc(var(--i, 0) * 45ms); }
.gm-hub__grid img { width: 28px; height: 28px; object-fit: contain; }
.gm-hub__grid span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gm-hub__core { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 18px; font-size: 15px; color: var(--black); }
.gm-hub__core img { width: 44px; height: 44px; padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 6px rgba(155,114,203,.12), 0 14px 28px -10px rgba(66,133,244,.55); }@media (prefers-reduced-motion: reduce) { .gm-hub__grid li { opacity: 1; scale: 1; transition: none; } }

/* ---------- Bảng giá ---------- */
.gm-pricing .gw-plan__price { flex-wrap: wrap; }
.gm-from { flex-basis: 100%; font-size: 13px; }
.gm-pricing .gw-plan__name { display: grid; place-items: center; min-height: 2.6em; }
.gm-plan__app { position: absolute; z-index: 2; left: calc(50% + 26px); bottom: 34px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.16); }
.gm-plan__app img { width: 28px; height: 28px; }
.gm-note { max-width: 860px; margin: 26px auto 0; text-align: center; }
.gmn .ms-pricing + section { margin-top: 0; }

/* ---------- Cách tính phí + ước tính ---------- */
.gm-calc { padding-block: var(--sec); background: var(--beige); }
.gm-calc__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.gm-calc__body .h2 { margin-top: 22px; }
.gm-steps { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: gm; }
.gm-steps li { position: relative; padding: 16px 18px 16px 62px; border-radius: 16px; background: #fff; font-size: 15px; line-height: 1.65; counter-increment: gm; }
.gm-steps li::before { content: counter(gm); position: absolute; left: 18px; top: 15px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #4285f4, #9b72cb); }
.gm-steps b { color: var(--black); }
.gm-est { display: grid; gap: 18px; padding: 28px; border-radius: 24px; background: #fff; box-shadow: 0 34px 70px -34px rgba(33,34,82,.4); }
.gm-est__title { font-size: 18px; font-weight: 700; color: var(--black); }
.gm-est__field { display: grid; gap: 8px; font-size: 14px; font-weight: 600; color: var(--black); }
.gm-est__field select { height: 46px; padding: 0 14px; border: 0; border-radius: 12px; font: inherit; font-weight: 500; color: var(--black); background: #f4f4f6; }
.gm-est__range { display: flex; align-items: center; gap: 14px; }
.gm-est__range input { flex: 1; accent-color: #7c4dcc; }
.gm-est__range output { min-width: 56px; padding: 6px 10px; border-radius: 10px; font-variant-numeric: tabular-nums; text-align: center; background: #f4f4f6; }
.gm-est__out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.gm-est__out div { padding: 14px 12px; border-radius: 14px; background: #f7f5fd; }
.gm-est__out dt { font-size: 12.5px; color: var(--gray); }
.gm-est__out dd { margin: 4px 0 0; font-size: 20px; font-weight: 700; color: var(--black); font-variant-numeric: tabular-nums; }
.gm-est__warn { padding: 10px 14px; border-radius: 12px; font-size: 13.5px; color: var(--red); background: rgba(186,19,26,.06); }
.gm-est__cta { justify-self: start; }
.gm-est__note { font-size: 12.5px; color: var(--gray); }

@media (min-width: 681px) and (max-width: 1200px) { .gm-feats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) {
  .gm-ai__grid, .gm-calc__grid { grid-template-columns: 1fr; gap: 30px; }
  .gm-chat { max-width: 620px; width: 100%; margin-inline: auto; }
}
@media (max-width: 680px) {
  .gm-ai__cards { grid-template-columns: 1fr; gap: 12px; }
  .gm-hub { padding: 16px; }
  .gm-hub__grid { gap: 8px; }
  .gm-est { padding: 20px; }
  .gm-est__out { grid-template-columns: 1fr 1fr; }
  .gm-est__out div:last-child { grid-column: 1 / -1; }
  .gm-est__cta { justify-self: stretch; justify-content: space-between; }
}