/* =========================================================================
   Vinaweb – Trang Lark Suite
   Nạp SAU gws.css: bố cục các khối (gw-apps, gw-plan, gw-cmp, gw-faq…) dùng
   chung với trang Google Workspace. File này chỉ gồm phần riêng của trang và
   điểm nhấn nhận diện Lark (nhẹ) – bọc trong .lark.
   ========================================================================= */

/* ---------- Banner ---------- */
.lk-stars { letter-spacing: 2px; color: #ffc53d; }
.gw-orbit--lark .gw-orbit__core { width: 128px; height: 128px; box-shadow: 0 0 0 10px rgba(255,255,255,.08), 0 24px 60px -10px rgba(51,112,255,.65); }
.gw-orbit--lark .gw-orbit__core img { width: 84px; height: 84px; object-fit: contain; }
.gw-orbit--lark .gw-orbit__chip { width: 58px; height: 58px; }
.gw-orbit--lark .gw-orbit__chip img { width: 32px; height: 32px; }

/* ---------- Lark AI: 4 hướng ứng dụng ---------- */
.lk-head__cta { justify-self: end; }
/* Băng thẻ trượt ngang, mỗi thẻ một tông màu riêng; hình minh hoạ giữ nguyên bản cũ (pages/_lark-ai-cards.php) */
.lk-ai { --text-muted: #6b7280; --gray-400: #9aa1ad; }
.lk-ai .hcar-viewport { position: relative; z-index: 1; margin-top: 38px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline: 0; }
.lk-ai .hcar-viewport::-webkit-scrollbar { display: none; }
.lk-ai .hcar-viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--red); }
.lk-ai .hcar-track { display: flex; gap: 20px; width: max-content; padding: 10px max(var(--gutter), calc((100vw - var(--container)) / 2)) 14px; }
.lk-ai .hcard { scroll-snap-align: center; flex: none; display: flex; flex-direction: column; width: clamp(350px, 29vw, 420px); min-height: 560px; padding: 32px 30px 30px; border-radius: 24px; color: var(--black); transition: transform .45s var(--ease), box-shadow .45s; }
.lk-ai .hcard.agent { background: linear-gradient(135deg, #fceadb 0%, #f7c889 100%); }
.lk-ai .hcard.workspace { background: linear-gradient(135deg, #ebe8f6 0%, #e7ecf8 100%); }
.lk-ai .hcard.workflows { background: linear-gradient(135deg, #e8f1de 0%, #eaf3e4 100%); }
.lk-ai .hcard.creation { background: linear-gradient(135deg, #cfe9fb 0%, #aedbf6 100%); }
.lk-ai .hcard .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lk-ai .hcard.agent .eyebrow { color: #cf6a1c; }
.lk-ai .hcard.workspace .eyebrow { color: #5b62d6; }
.lk-ai .hcard.workflows .eyebrow { color: #4c9a3f; }
.lk-ai .hcard.creation .eyebrow { color: #2e7bc4; }
.lk-ai .hcard h3 { margin-top: 14px; font-size: 23px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--black); text-wrap: balance; }
.lk-ai .hcard .lead { margin-top: 14px; font-size: 15px; line-height: 1.65; color: #3a4250; }
.lk-ai .h-btn { align-self: flex-start; height: 46px; margin-top: 24px; padding: 0 24px; border-radius: 100px; font-size: 14.5px; font-weight: 700; white-space: nowrap; color: var(--black); background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 6px 14px -8px rgba(0,0,0,.25); transition: transform .25s var(--ease), color .25s, box-shadow .25s; }
.lk-ai .h-btn:hover { color: var(--red); transform: translateY(-2px); box-shadow: 0 0 0 1px var(--red), 0 10px 18px -10px rgba(186,19,26,.5); }
.lk-ai .h-btn:focus-visible, .lk-ai .hcar-nav button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.lk-ai .hcard .illus { margin-top: auto; padding-top: 34px; font-size: 14px; line-height: 1.45; }
.lk-ai .chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--black); background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.lk-ai .chip .ci { display: flex; align-items: center; justify-content: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 6px; }
.lk-ai .il-flow { display: flex; align-items: center; gap: 26px; }
.lk-ai .il-col { display: flex; flex-direction: column; gap: 12px; }
.lk-ai .il-spark { display: flex; align-items: center; justify-content: center; flex: 0 0 78px; width: 78px; height: 78px; border-radius: 20px; background: linear-gradient(135deg, #c9b6f5, #f3b7c8 55%, #9fd0f5); box-shadow: 0 10px 26px rgba(140,110,220,.3); animation: lkSpark 5s ease-in-out infinite; }
/* Đường nét đứt nối các ứng dụng với biểu tượng AI (lark.js vẽ vào thẻ AI Workspace) */
.lk-ai .il-flow.has-links { position: relative; }
.lk-ai .il-flow.has-links > :not(.il-links) { position: relative; z-index: 1; }
.lk-ai .il-links { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.lk-ai .il-links path { fill: none; stroke: #8b7fe8; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 5 7; opacity: .75; animation: lkLink 1.4s linear infinite; }
@keyframes lkLink { to { stroke-dashoffset: -24; } }
/* Quầng sáng lan ra từ biểu tượng AI */
.lk-ai .il-flow.has-links .il-spark::before, .lk-ai .il-flow.has-links .il-spark::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: inherit; opacity: 0; animation: lkPulse 2.8s ease-out infinite; }
.lk-ai .il-flow.has-links .il-spark::after { animation-delay: -1.4s; }
@keyframes lkPulse { 0% { scale: 1; opacity: .45; } 100% { scale: 1.55; opacity: 0; } }
@keyframes lkSpark { 50% { translate: 0 -6px; box-shadow: 0 18px 30px rgba(140,110,220,.38); } }
.lk-ai .il-panel { padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.07); }
.lk-ai .il-bar { height: 7px; margin-top: 7px; border-radius: 4px; background: #e7eaf0; position: relative; overflow: hidden; }
/* Thanh tiến trình "đang chạy": phần màu dâng dần rồi lặp lại, kèm vệt sáng lướt qua */
.lk-ai .il-bar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--bar) 55%, #fff), var(--bar)); transform-origin: left; animation: lkBarFill 3.6s cubic-bezier(.4, 0, .2, 1) infinite; }
.lk-ai .il-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); translate: -100% 0; animation: lkBarShine 1.6s linear infinite; }
.lk-ai .hcard { --bar: #7a8cf0; }
.lk-ai .hcard.agent { --bar: #f08a2e; }
.lk-ai .hcard.workflows { --bar: #57ad46; }
/* Các thanh trong cùng một thẻ chạy lệch pha nhau cho tự nhiên */
.lk-ai .il-panel + .il-panel .il-bar::before { animation-delay: -1.5s; }
.lk-ai .il-panel + .il-panel .il-bar::after { animation-delay: -.7s; }
@keyframes lkBarFill { 0% { scale: .06 1; opacity: 1; } 70% { scale: 1 1; opacity: 1; } 88% { scale: 1 1; opacity: 1; } 100% { scale: 1 1; opacity: 0; } }
@keyframes lkBarShine { to { translate: 100% 0; } }
.lk-ai .anygen-logo-badge img { width: 44px; height: 44px; margin: 0 auto; }
.lk-ai .illus svg { flex: none; }
@media (hover: hover) { .lk-ai .hcard:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -34px rgba(33,34,82,.5); } }
.lk-ai .hcar-nav { position: relative; z-index: 1; display: flex; justify-content: center; gap: 12px; margin-top: 22px; }
.lk-ai .hcar-nav button { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--red); background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: background .3s, color .3s, box-shadow .3s, opacity .3s; }
.lk-ai .hcar-nav button:hover { color: #fff; background: var(--red); box-shadow: none; }
.lk-ai .hcar-nav button:disabled { opacity: .35; pointer-events: none; }

/* ---------- Video + khách hàng ---------- */
.lk-video .gw-video { margin-top: 40px; }
.lk-customers__label { margin-top: 40px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.lk-customers { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; margin-top: 18px; list-style: none; font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: rgba(255,255,255,.82); }

/* ---------- Icon ứng dụng: bộ icon chính thức của Lark (bundle/vw/assets/lark) ---------- */
.lark .gw-app__ic { width: 58px; height: 58px; }
.lark .gw-app__ic img { width: 38px; height: 38px; }
.lk-suite span { background: #fff; }
.lk-suite img { width: 24px; height: 24px; object-fit: contain; }
.lk-ai .chip img.ci { display: block; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 0; object-fit: contain; }

/* ---------- Bảng giá ---------- */
.gw-cmp__table thead th span i { font-style: normal; }
/* Icon đầu mỗi mục trong bảng so sánh */
.lark .gw-cmp__grp :is(img, svg) { display: inline-block; width: 22px; height: 22px; margin-right: 10px; vertical-align: -5px; object-fit: contain; }
.lark .gw-cmp__grp svg { fill: none; stroke: #3370ff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 680px) { .lark .gw-cmp--fit .gw-cmp__table tbody td span { font-size: 10px; } }

/* ---------- Điểm nhấn nhận diện Lark (nhẹ) – cơ chế chung ở cuối gws.css ---------- */
.lark { --brand-stripe: linear-gradient(90deg, #3370ff, #00d6b9); }
/* Chấm đầu nhãn: ba màu của logo Lark */
.lark .badge::before { width: 12px; height: 12px; clip-path: none; border-radius: 50%; background: conic-gradient(#3370ff 0 34%, #00d6b9 0 67%, #133c9a 0); }
.lark .gw-plan:nth-child(1) { --pc: #3370ff; }
.lark .gw-plan:nth-child(2) { --pc: #00d6b9; }
.lark .gw-plan:nth-child(4) { --pc: #133c9a; }

@media (max-width: 1024px) {
  .lk-head__cta { justify-self: start; }
  .lk-ai .hcar-viewport { margin-top: 28px; }
}
@media (max-width: 680px) {
  .lk-ai .hcar-track { gap: 14px; }
  .lk-ai .hcard { width: 84vw; min-height: 520px; padding: 26px 22px 24px; border-radius: 20px; }
  .lk-ai .il-flow { gap: 14px; }
  /* Ô AnyGen thu hẹp để hai ô tiến trình bên cạnh đủ chỗ (bản gốc đặt cứng 150px trong style nội dòng) */
  .lk-ai .hcard.agent .il-flow > .il-panel { width: 118px !important; padding: 12px 10px; }
  .lk-customers { gap: 10px 22px; font-size: 16px; }
  .lk-customers__label { margin-top: 34px; }
  .gw-orbit--lark .gw-orbit__core { width: 112px; height: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .lk-ai .il-spark, .lk-ai .il-bar::before, .lk-ai .il-bar::after, .lk-ai .il-links path, .lk-ai .il-spark::before, .lk-ai .il-spark::after { animation: none; }
  .lk-ai .il-bar::before { scale: .6 1; }
  .lk-ai .il-bar::after { content: none; }
}

/* ---------- Bảng giá Lark: nền gradient nhạt theo màu nhận diện Lark (xanh lam – xanh ngọc – 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ẻ ---------- */
.lk-pricing {
  padding-top: var(--sec);
  background:
    radial-gradient(58% 68% at 0% 0%, rgba(51,112,255,.22), transparent 62%),
    radial-gradient(55% 65% at 100% 0%, rgba(0,214,185,.2), transparent 62%),
    radial-gradient(60% 62% at 100% 100%, rgba(51,112,255,.16), transparent 62%),
    radial-gradient(55% 60% at 0% 100%, rgba(123,103,238,.16), transparent 62%),
    #f6f9fe;
}
.lk-pricing .gw-plan::before { content: none; }
.lk-pricing .gw-plan { box-shadow: inset 0 0 0 1px rgba(33,34,82,.08), 0 22px 44px -30px rgba(33,34,82,.35); }
.lk-pricing .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, nhãn ưu đãi và icon tính năng ăn theo màu vòng tròn của từng gói (--pk); nút tô màu chuyển ngang, bo góc nhẹ – giống bảng giá Microsoft 365 */
.lk-pricing .gw-plan:nth-child(1) { --pk: #2e6fdb; }
.lk-pricing .gw-plan:nth-child(2) { --pk: #1590c4; }
.lk-pricing .gw-plan:nth-child(3) { --pk: #ee161f; }
.lk-pricing .gw-plan:nth-child(4) { --pk: #2e9e4f; }
.lk-pricing .gw-plan__save { align-self: center; color: color-mix(in srgb, var(--pk) 82%, #000); background: color-mix(in srgb, var(--pk) 11%, #fff); }
.lk-pricing .gw-plan__cta,
.lk-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); }
.lk-pricing .gw-plan__cta:hover { color: #fff; background: var(--cta); filter: brightness(1.06); transform: translateY(-2px); }
.lk-pricing .gw-plan__price { justify-content: center; text-align: center; }
.lk-pricing .gw-plan__price small { flex-basis: 100%; text-align: center; } /* đơn vị giá luôn nằm dòng riêng → hàng nút các gói thẳng nhau */
.lk-pricing .gw-plan__old { text-align: center; }
.lk-pricing .gw-plan__feats li { display: flex; gap: 12px; padding-left: 0; }
.lk-pricing .gw-plan__feats li::before { content: none; }
.lk-pricing .gw-plan__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; }
.lk-pricing .gw-plan__feats span { min-width: 0; }
/* 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 */
.lark :is(.gw-apps, .gw-compare, .gw-gallery, .gw-faq) + .lk-pricing { margin-top: 0; padding-top: var(--sec); }
.lark .lk-pricing + section { margin-top: 0; padding-top: var(--sec); }