/* =========================================================================
   Vinaweb – Trang Zoom (pages/zoom.php)
   Nạp SAU gws.css và odoo.css: bảng giá/hỏi đáp dùng gw-*, khối chữ–hình và
   thẻ dùng od-*. File này chỉ gồm phần riêng của trang.
   ========================================================================= */

/* Tiêu đề của trang Zoom viết thường (không viết hoa toàn bộ như Odoo) nên dùng cỡ chữ của site */
.zm-h2 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.32; font-weight: 600; }
.od-intro__body .badge + .zm-h2 { margin-top: 22px; }
.zm-lead { margin-top: 16px; font-size: 16.5px; line-height: 1.8; }
.zm-note { margin-top: 14px; font-size: 14px; font-style: italic; color: var(--gray); }

/* ---------- Banner ---------- */
.zm-hero__badge { display: block; width: auto; max-width: 220px; height: auto; margin-top: 30px; border-radius: 10px; animation: pheroIn 1s var(--ease) .32s both; }
.zoom + .contact, .zoom { --zoom: #0b5cff; }

/* ---------- Bảng giá ---------- */
.zm-plans { grid-template-columns: repeat(var(--cols, 3), 1fr); max-width: calc(var(--cols, 3) * 372px); margin-inline: auto; }
.zm-pricing .gw-plan__name { min-height: 54px; display: grid; place-items: center; }
.zm-pricing .gw-plan__name a { transition: color .25s; }
.zm-pricing .gw-plan__name a:hover { color: var(--red); }
.zm-price { justify-content: center; margin-top: 14px; text-align: center; }
.zm-price.gw-plan__price--text { font-size: 22px; letter-spacing: 0; color: var(--red); }
.zm-pricing .gw-plan__old { text-align: center; }
.zm-gift { display: grid; grid-template-columns: 20px 1fr; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.55; color: var(--black); background: #fdecec; }
.zm-gift svg { width: 20px; height: 20px; color: var(--red); }
.zm-pricing .gw-plan__cta { margin-top: 18px; }
/* Danh sách tính năng do quản trị soạn (ul/li) */
.zm-feats { display: block; }
.zm-feats ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.zm-feats li { position: relative; padding-left: 28px; }
.zm-feats li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; 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; }
.zm-feats :is(strong, b) { font-weight: 700; color: var(--black); }
.zm-feats > * + * { margin-top: 11px; }

/* ---------- Bảng so sánh do quản trị soạn ---------- */
/* Bảng dài: zoom.js thu gọn còn phần đầu, bấm nút để mở hết */
.zm-cmp { position: relative; margin-top: 40px; }
.zm-cmp.is-short .zm-table { max-height: 760px; overflow-y: hidden; -webkit-mask-image: linear-gradient(#000 calc(100% - 110px), transparent); mask-image: linear-gradient(#000 calc(100% - 110px), transparent); }
.zm-cmp__more { margin-top: 26px; }
.zm-cmp__toggle[hidden] { display: none; }
.zm-cmp__toggle .btn__ic svg { transition: rotate .3s; }
.zm-cmp:not(.is-short) .zm-cmp__toggle .btn__ic svg { rotate: 180deg; }
.zm-cmp__toggle:hover .btn__ic { transform: none; }
.zm-table { margin-top: 0; overflow-x: auto; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); -webkit-overflow-scrolling: touch; }
.zm-table:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.zm-table table { display: table; width: 100%; min-width: 760px; margin: 0; border-collapse: collapse; table-layout: fixed; font-size: 14.5px; line-height: 1.5; }
.zm-table :is(td, th) { padding: 14px 16px; border: 0; border-bottom: 1px solid #ececec; text-align: center; vertical-align: middle; }
.zm-table tr > :first-child { width: 34%; text-align: left; font-weight: 500; color: var(--black); }
.zm-table thead :is(td, th) { padding: 24px 14px; vertical-align: top; background: #fff; }
.zm-table .header_name { font-size: 16.5px; font-weight: 700; color: var(--black); }
.zm-table thead 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; }
.zm-table thead a:hover { color: #fff; background: var(--red); }
.zm-table tbody tr:hover > * { background: #fbfaf6; }
/* Dòng tiêu đề nhóm: ô chữ đậm trải hết hàng */
.zm-table tr:has(> td[colspan]) > *, .zm-table tr:has(> td > strong:only-child) > * { background: var(--beige); font-weight: 700; color: var(--black); }
.zm-table img { display: inline-block; width: 22px !important; height: 22px !important; vertical-align: middle; }
.zm-table tbody tr:last-child > * { border-bottom: 0; }

/* ---------- Khối nổi bật ---------- */
.zm-feature .od-intro__media > img { box-shadow: 0 30px 60px -34px rgba(33,34,82,.45); }
.zm-h2 :is(span, em, b, strong) { font-style: normal; font-weight: inherit; color: var(--red); }

/* ---------- Nền tảng Zoom: các hàng chữ – hình ---------- */
.zm-rows { display: grid; gap: 22px; margin-top: 44px; }
.zm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 24px; background: #fff; overflow: hidden; }
.zm-row--flip .zm-row__media { order: 2; }
.zm-row__media { display: grid; place-items: center; min-height: 300px; padding: 28px; background: #f3f1ea; }
.zm-row__media :is(img, video) { display: block; max-width: 100%; height: auto; border-radius: 14px; }
.zm-row__body { align-self: center; padding: 38px 40px; }
.zm-row__body h3 { font-size: clamp(21px, 1.9vw, 26px); font-weight: 700; line-height: 1.3; color: var(--black); }
.zm-row__body h3 a { transition: color .25s; }
.zm-row__body h3 a:hover { color: var(--red); }
.zm-row__sub { margin-top: 10px; font-size: 15.5px; line-height: 1.7; }
.zm-row__body .od-rich { margin-top: 18px; }
/* Danh sách ngắn nhiều mục: chia hai cột cho gọn */
.zm-cols ul { grid-template-columns: 1fr 1fr; column-gap: 20px; }
.zm-cols p:has(> strong:only-child) { margin-top: 16px; }

/* ---------- Ngành nghề ---------- */
.zm-industries__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.zm-industries__img { display: block; max-width: 180px; height: auto; margin-bottom: 20px; }
.zm-industries__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.zm-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; list-style: none; }
.zm-tile { border-radius: 20px; background: var(--beige); text-align: center; transition: opacity .8s var(--ease), translate .8s var(--ease), background .35s, box-shadow .35s, transform .35s var(--ease); }
.zm-tile, .zm-tile > a { display: grid; justify-items: center; gap: 14px; padding: 26px 14px 22px; }
.zm-tile:has(> a) { padding: 0; }
.zm-tile img { width: 64px; height: 64px; object-fit: contain; }
.zm-tile b { font-size: 15.5px; font-weight: 700; color: var(--black); }
@media (hover: hover) { .zm-tile: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); } }

/* ---------- Khối phụ ---------- */
.zm-outstanding { max-width: 900px; margin: 40px auto 0; }
.zm-partners__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 48px; list-style: none; }
.zm-partners__list li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: var(--black); }
.zm-partners__list img { width: auto; max-height: 44px; }

/* ---------- Điểm nhấn nhận diện Zoom (nhẹ) ---------- */
.zoom .badge::before { background: var(--zoom); box-shadow: 0 0 0 3px rgba(11,92,255,.2); }

@media (max-width: 1024px) {
  .zm-plans { grid-template-columns: 1fr 1fr; max-width: none; }
  .zm-row { grid-template-columns: 1fr; }
  .zm-row--flip .zm-row__media { order: 0; }
  .zm-row__media { min-height: 0; }
  .zm-row__body { padding: 30px 28px 34px; }
  .zm-industries__grid { grid-template-columns: 1fr; gap: 36px; }
  .zm-rows { margin-top: 34px; }
}
@media (max-width: 680px) {
  .zm-plans { grid-template-columns: 1fr; }
  .zm-pricing .gw-plan__name { min-height: 0; }
  .zm-cmp { margin-top: 30px; }
  .zm-table { margin: 0 calc(var(--gutter) * -1); border-radius: 0; }
  .zm-table table { min-width: 620px; font-size: 13.5px; }
  .zm-table :is(td, th) { padding: 12px 10px; }
  /* Cột tên tính năng đứng yên khi vuốt ngang bảng */
  .zm-table tr > :first-child { position: sticky; left: 0; z-index: 1; width: 150px; background: #fff; box-shadow: 1px 0 0 #ececec; }
  .zm-row__body { padding: 24px 20px 28px; }
  .zm-row__media { padding: 18px; }
  .zm-cols ul { grid-template-columns: 1fr; }
  .zm-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .zm-tile, .zm-tile > a { padding: 20px 10px 18px; }
  .zm-tile img { width: 52px; height: 52px; }
}

/* =========================================================================
   Trang Email doanh nghiệp (pages/lark-starter.php) – dùng lại các khối ở trên
   ========================================================================= */
.ls-hero__badge { max-width: 300px; }
.ls-sub { margin-top: 16px; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--red); }
.ls-apps { max-width: 420px; }
.ls-included { margin-top: 30px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); }
.ls-suite { margin-top: 16px; }
.ls-suite img { width: 22px; height: 22px; object-fit: contain; }
.ls-group { margin-top: 44px; font-size: 20px; font-weight: 700; color: var(--black); }
.ls-banner { display: block; border-radius: 20px; overflow: hidden; }
.ls-banner + .ls-banner { margin-top: 18px; }
.ls-banner img { display: block; width: 100%; height: auto; }
/* Nội dung do quản trị soạn (không phải bảng): cột chữ hẹp cho dễ đọc */
.ls-prose { max-width: 900px; margin: 36px auto 0; padding: 36px 40px; border-radius: 24px; background: #fff; }
.ls-prose h4 { margin-top: 26px; font-size: 19px; font-weight: 700; color: var(--black); }
.ls-prose ul ul { margin-top: 8px; }
.ls-prose li > p { margin: 0; }
.ls-prose li li::before { width: 6px; height: 6px; top: .7em; left: 6px; background: var(--red); }
.ls-apps-grid { margin-top: 0; }
.ls-stat__img { display: block; width: auto; max-height: 64px; margin: 0 auto; }
.lark .od-stat__label { line-height: 1.5; }
@media (max-width: 680px) {
  .ls-prose { margin-top: 26px; padding: 24px 20px; border-radius: 18px; }
  .ls-apps-grid { grid-template-columns: 1fr; }
}

/* Chấm đầu nhãn của trang Email doanh nghiệp: ba màu logo Lark */
.zoom.lark .badge::before { background: conic-gradient(#3370ff 0 34%, #00d6b9 0 67%, #133c9a 0); box-shadow: none; }

/* ---------- Nhịp dọc: hai khối nền trắng liền nhau chỉ giữ MỘT khoảng đệm (--sec), không cộng dồn thành gấp đôi ---------- */
.zoom > :is(.od-intro, .gw-pricing, .gw-compare, .gw-faq, .od-sec:not(.od-sec--beige)) + :is(.od-intro, .gw-pricing, .gw-compare, .gw-faq, .od-sec:not(.od-sec--beige)) { margin-top: -1px; padding-top: 1px; }

/* ---------- Bảng giá Zoom: nền gradient nhạt theo màu nhận diện Zoom (xanh lam – xanh nhạt – tím nhạt),
   thẻ gói nền trắng nổi trên nền; bỏ vạch màu ngang ở mép trên thẻ.
   Chỉ áp dụng cho trang Zoom (.zoom không kèm .lark) – trang Email doanh nghiệp dùng chung zm-pricing không đổi ---------- */
.zoom:not(.lark) > .zm-pricing {
  background:
    radial-gradient(58% 68% at 0% 0%, rgba(11,92,255,.2), transparent 62%),
    radial-gradient(55% 65% at 100% 0%, rgba(45,140,255,.22), transparent 62%),
    radial-gradient(60% 62% at 100% 100%, rgba(122,92,255,.16), transparent 62%),
    radial-gradient(55% 60% at 0% 100%, rgba(45,140,255,.14), transparent 62%),
    #f5f8ff;
}
.zoom:not(.lark) > .zm-pricing .gw-plan::before { content: none; }
.zoom:not(.lark) > .zm-pricing .gw-plan { box-shadow: inset 0 0 0 1px rgba(33,34,82,.08), 0 22px 44px -30px rgba(33,34,82,.35); }
.zoom:not(.lark) > .zm-pricing .gw-plan--hot { background: #fff; box-shadow: inset 0 0 0 2px var(--red), 0 30px 60px -34px rgba(186,19,26,.55); }
/* Bảng giá giờ có nền riêng nên nó và khối liền sau giữ đủ khoảng đệm (ghi đè quy tắc gộp đệm của các khối trắng liền nhau ở trên) */
.zoom:not(.lark) > .zm-pricing, .zoom:not(.lark) > .zm-pricing + section { margin-top: 0 !important; padding-top: var(--sec) !important; }

/* ---------- Khối "Zoom Workspace là gì": cụm quỹ đạo trên nền sáng (logo Zoom ở giữa, tính năng quay quanh) ---------- */
.zm-orbit { display: grid; place-items: center; }
.zm-orbit .gw-orbit { width: 100%; max-width: 470px; animation: none; }
.zm-orbit .gw-orbit__ring { border-color: rgba(11,92,255,.28); }
.zm-orbit .gw-orbit__core { background: #fff; box-shadow: 0 0 0 10px rgba(11,92,255,.07), 0 24px 50px -16px rgba(11,92,255,.45); }
.zm-orbit .gw-orbit__core img { width: 76px; height: 76px; border-radius: 18px; object-fit: contain; }
.zm-orbit .gw-orbit__chip { background: #fff; box-shadow: 0 0 0 1px rgba(11,92,255,.14), 0 12px 24px -12px rgba(33,34,82,.4); }
.zm-orbit .gw-orbit__chip img { width: 26px; height: 26px; border-radius: 0; }
@media (max-width: 680px) { .zm-orbit .gw-orbit { scale: .8; margin: -40px 0; } }

/* Bảng so sánh mới (gw-cmp, dữ liệu trong _zoom-compare-rows.php): icon nét theo màu Zoom, ghi chú nguồn */
.zm-cmp-note { margin-top: 18px; font-size: 13px; line-height: 1.6; text-align: center; color: #616161; }
.gw-compare .gw-cmp__ic svg { stroke: #0b5cff; }

/* Thẻ gói Zoom: nút tô màu chuyển ngang, bo góc nhẹ và icon nét theo màu vòng tròn của từng gói (--pk) – giống bảng giá Google Workspace / Microsoft 365 */
.zoom:not(.lark) > .zm-pricing .gw-plan:nth-child(1) { --pk: #2e6fdb; }
.zoom:not(.lark) > .zm-pricing .gw-plan:nth-child(2) { --pk: #1590c4; }
.zoom:not(.lark) > .zm-pricing .gw-plan:nth-child(3) { --pk: #ee161f; }
.zoom:not(.lark) > .zm-pricing .gw-plan:nth-child(4) { --pk: #2e9e4f; }
.zoom:not(.lark) > .zm-pricing .gw-plan__cta,
.zoom:not(.lark) > .zm-pricing .gw-plan--hot .gw-plan__cta { --cta: linear-gradient(95deg, color-mix(in srgb, var(--pk) 76%, #fff), color-mix(in srgb, var(--pk) 94%, #000)); border-radius: 8px; color: #fff; background: var(--cta); box-shadow: 0 12px 24px -14px var(--pk); }
.zoom:not(.lark) > .zm-pricing .gw-plan__cta:hover { color: #fff; background: var(--cta); filter: brightness(1.06); transform: translateY(-2px); }
.zoom:not(.lark) > .zm-pricing .zm-feats li { display: flex; gap: 12px; padding-left: 0; }
.zoom:not(.lark) > .zm-pricing .zm-feats li::before { content: none; }
.zoom:not(.lark) > .zm-pricing .zm-feats svg { flex: none; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--pk); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.zoom:not(.lark) > .zm-pricing .zm-feats span { min-width: 0; }
.zoom:not(.lark) > .zm-pricing .zm-gift { background: color-mix(in srgb, var(--pk) 9%, #fff); }
.zoom:not(.lark) > .zm-pricing .zm-gift svg { color: var(--pk); }
/* Mỗi thẻ có đúng 7 hàng (hình, tên, giá, giá gốc, ưu đãi, nút, tính năng) dùng chung lưới hàng → nút của các gói thẳng nhau */
.zoom:not(.lark) > .zm-pricing .gw-plan { display: grid; grid-template-rows: subgrid; grid-row: span 7; row-gap: 0; align-content: start; }
.zoom:not(.lark) > .zm-pricing .gw-plan > * { min-width: 0; }
.zoom:not(.lark) > .zm-pricing .gw-plan__old:empty { margin: 0; }
.zm-gift--none { display: block; margin: 0; padding: 0; background: none !important; }
.zoom:not(.lark) > .zm-pricing .gw-plan__cta { align-self: end; }
.zoom:not(.lark) > .zm-pricing .zm-feats { align-self: start; }