/* =====================================================================
   OnMeeting – element trang (om_hero, om_section, om_panel, om_features, …)
   Mọi màu / độ mờ / bo góc lấy từ token trong om-base.css → đúng cả sáng lẫn tối.
   ===================================================================== */

/* ---------- Section (khung) ---------- */
.om-sec { position: relative; z-index: 1; max-width: var(--om-max); margin: 0 auto; padding: var(--om-sec-pt, var(--om-sec-def, var(--om-sec-space))) var(--om-gutter) var(--om-sec-pb, 0); display: flex; flex-direction: column; gap: var(--om-sec-gap, 24px); }
.om-sec.is-flush, .om-hero + .om-sec { --om-sec-def: var(--om-sec-first); }
.om-sec.w-narrow { max-width: 960px; }
.om-sec.w-full { max-width: none; }
.om-sec > .om { min-width: 0; }
.om-content > .om-sec:last-child { padding-bottom: 8px; }

/* ---------- Tiêu đề khối ---------- */
.om-hd { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin-bottom: 8px; }
.om-hd.is-center { text-align: center; align-items: center; }
.om-hd-title { margin: 0; font-weight: 800; letter-spacing: -.03em; line-height: 1.12; font-size: var(--om-h2); }
.om-hd-lead { margin: 0; max-width: var(--om-hd-w, 680px); font-size: 17px; line-height: 1.65; color: var(--om-ink-3); }
.om-panel .om-hd-lead { font-size: 16px; color: var(--om-ink-2); }
.om-hd.is-left .om-hd-lead { max-width: var(--om-hd-w, 640px); }

/* ---------- Hero trang ---------- */
.om-hero { position: relative; z-index: 2; min-height: var(--om-hero-min, 640px); display: flex; flex-direction: column; }
.om-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.om-hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--om-hero-pos, center); }
.om-hero:not(.has-img) .om-hero-bg {
	background:
		radial-gradient(55% 80% at 4% 8%, color-mix(in srgb, var(--om-accent) calc(30% * var(--om-blob-k)), transparent), transparent 70%),
		radial-gradient(45% 75% at 96% 80%, color-mix(in srgb, var(--om-blue) calc(34% * var(--om-blob-k)), transparent), transparent 70%);
}
.om-hero-in { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; padding-top: calc(var(--om-header-h) + var(--om-hero-pt, 64px)); padding-bottom: var(--om-hero-pb, 72px); }
.om-hero.is-center .om-hero-in { justify-content: center; text-align: center; }
.om-hero .om-hero-fade { height: 200px; }
.om-hero.is-center .om-hero-btns { justify-content: center; }
.om-hero-card { width: 100%; max-width: var(--om-hero-w, 680px); display: flex; flex-direction: column; gap: 20px; }
.om-hero-card.om-glass { border-radius: var(--om-r-xl); padding: var(--om-pad-card); box-shadow: 0 0 0 1px var(--om-edge), inset 0 1px 0 var(--om-hi-1), var(--om-shadow-3); }
.om-hero-title { margin: 0; font-weight: 800; letter-spacing: -.035em; line-height: 1.08; font-size: var(--om-h1); }
.om-hero-lead { margin: 0; font-size: 17px; line-height: 1.65; color: var(--om-ink-2); max-width: 700px; }
.om-hero-btns { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: flex-start; padding-top: 4px; }
.om-hero-bc { margin-bottom: -6px; }
.om-hero.is-center .om-hero-bc .om-bc ol { justify-content: center; }
.om-hero-note { margin: 0; font-size: 14px; color: var(--om-ink-3); }

/* ---------- Panel / thẻ kính ---------- */
.om-panel { border-radius: var(--om-r-xl); padding: var(--om-pp, var(--om-pad-card)); display: flex; flex-direction: column; gap: var(--om-pgap, var(--om-card-gap)); min-width: 0; position: relative; }
.om-panel.is-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
.om-panel.is-soft { background: var(--om-glass-2); border: 1px solid var(--om-line-2); box-shadow: 0 0 0 1px var(--om-edge), inset 0 1px 0 var(--om-hi-2), var(--om-shadow-2); }
.om-panel.is-mid { background: var(--om-glass-3); border: 1px solid var(--om-line-2); box-shadow: 0 0 0 1px var(--om-edge), inset 0 1px 0 var(--om-hi-2), var(--om-shadow-2); }
.om-panel.is-strong { background: var(--om-glass-1); border: 1px solid var(--om-line-1); box-shadow: 0 0 0 1px var(--om-edge), inset 0 1px 0 var(--om-hi-1), var(--om-shadow-2); }
.om-panel.is-vivid { background: var(--om-glass-4); border: 1px solid var(--om-line-1); box-shadow: 0 0 0 1px var(--om-edge), inset 0 1px 0 var(--om-hi-1), var(--om-shadow-2); }
.om-panel.is-soft, .om-panel.is-mid, .om-panel.is-strong, .om-panel.is-vivid { -webkit-backdrop-filter: blur(var(--om-blur)) saturate(160%); backdrop-filter: blur(var(--om-blur)) saturate(160%); }
.om-panel.is-none { padding: 0; background: none; border: 0; box-shadow: none; }
.om-panel.is-center { align-items: center; text-align: center; }
.om-panel.is-xl { border-radius: calc(var(--om-radius) + 12px); }
.om-panel.is-accent { background: var(--om-accent); color: var(--om-on-accent); border: 0; box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--om-accent) 55%, transparent); }
.om-panel.is-accent .om-hd-title, .om-panel.is-accent h2, .om-panel.is-accent p { color: var(--om-on-accent); }

/* ---------- Lưới / chia cột ---------- */
.om-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--om-col, 300px), 100%), 1fr)); gap: var(--om-gap, var(--om-grid-gap)); align-items: var(--om-al, stretch); min-width: 0; }
.om-split { display: flex; flex-wrap: wrap; gap: var(--om-gap, var(--om-grid-gap)); align-items: var(--om-al, stretch); min-width: 0; }
.om-split > .om:nth-child(1) { flex: var(--om-r1, 1 1 520px); min-width: 0; }
.om-split > .om:nth-child(2) { flex: var(--om-r2, 1 1 520px); min-width: 0; }
.om-split > .om:nth-child(n+3) { flex: 1 1 320px; min-width: 0; }

/* ---------- Ảnh trong khung ---------- */
.om-ipanel { display: flex; align-items: center; justify-content: center; min-width: 0; padding: var(--om-ip-pad, 16px); border-radius: var(--om-r-lg); overflow: hidden; min-height: var(--om-ip-min, 0); }
.om-ipanel.bg-white { background: #FFFFFF; }
.om-ipanel.bg-soft { background: rgba(255, 255, 255, .88); }
html[data-om-theme="light"] .om-ipanel.bg-soft { background: rgba(255, 255, 255, .96); }
.om-ipanel.bg-glass { background: var(--om-glass-1); border: 1px solid var(--om-line-1); -webkit-backdrop-filter: blur(var(--om-blur)) saturate(160%); backdrop-filter: blur(var(--om-blur)) saturate(160%); }
.om-ipanel.bg-none { background: none; }
.om-ipanel.al-left { justify-content: flex-start; }
.om-ipanel.r-none { border-radius: 0; }
.om-ipanel.r-md { border-radius: var(--om-r-md); }
.om-ipanel.r-xl { border-radius: var(--om-r-xl); }
.om-ipanel img { display: block; width: 100%; max-width: var(--om-ip-max, none); height: auto; }
.om-ipanel.has-shadow img { filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .5)); }
html[data-om-theme="light"] .om-ipanel.has-shadow img { filter: drop-shadow(0 34px 40px rgba(36, 52, 110, .28)); }

/* ---------- Văn bản trong thẻ ---------- */
.om-tcard { padding: var(--om-pp, var(--om-pad-card)); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.om-tcard-title { margin: 0; font-weight: 800; letter-spacing: -.03em; line-height: 1.12; font-size: var(--om-h2); }
.om-tcard.t-accent .om-tcard-title { font-size: 18px; letter-spacing: .01em; line-height: 1.3; color: var(--om-accent-text); }
.om-tcard.t-h3 .om-tcard-title { font-size: var(--om-h3); letter-spacing: 0; line-height: 1.3; }
.om-prose p { margin: 0 0 14px; font-size: 15px; line-height: 1.7; color: var(--om-ink-2); }
.om-prose > *:last-child { margin-bottom: 0; }
.om-prose strong { color: var(--om-ink); }
.om-prose ul { margin: 0 0 14px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.6; color: var(--om-ink-2); }
.om-prose h3, .om-prose h4 { margin: 8px 0 0; font-size: 17px; font-weight: 700; letter-spacing: 0; }
body.om-theme .om-prose a { color: var(--om-ink); font-weight: 600; }
body.om-theme .om-prose a:hover { color: var(--om-accent-text); }
.om-tcard.is-compact .om-prose p { font-size: 14px; line-height: 1.65; }
.om-tcard-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; font-weight: 600; }
body.om-theme .om-tcard-links a { color: var(--om-ink); }
body.om-theme .om-tcard-links a:hover { color: var(--om-accent-text); }
.om-tcard-meta { margin: 0; font-size: 13px; color: var(--om-ink-3); }

/* ---------- Danh sách ô ---------- */
.om-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--om-col, 220px), 100%), 1fr)); gap: var(--om-tile-gap); }
.om-list li { margin: 0; border-radius: 16px; padding: 14px 16px; font-size: 14px; line-height: 1.55; color: var(--om-ink-2); background: var(--om-tile); border: 1px solid var(--om-line-3); box-shadow: 0 0 0 1px var(--om-edge); }
.om-list li strong { color: var(--om-ink); }

/* ---------- Chip / đối tác ---------- */
.om-chips { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--om-col, 120px), 100%), 1fr)); gap: var(--om-tile-gap); }
.om-chips li { margin: 0; border-radius: 14px; padding: 12px 14px; font-size: 15px; font-weight: 700; text-align: center; background: var(--om-glass-3); border: 1px solid var(--om-line-2); box-shadow: 0 0 0 1px var(--om-edge); }
.om-chips li.is-hot { background: var(--om-accent); color: var(--om-on-accent); border-color: transparent; }
.om-chips.v-partner li { height: 72px; border-radius: var(--om-r-md); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; letter-spacing: -.01em; background: var(--om-tile); border-color: var(--om-line-2); -webkit-backdrop-filter: blur(var(--om-blur)); backdrop-filter: blur(var(--om-blur)); }
.om-chips.v-pill { display: flex; flex-wrap: wrap; gap: 6px; }
.om-chips.v-pill li { border-radius: var(--om-pill); padding: 6px 12px; font-size: 12px; font-weight: 600; }

/* ---------- Icon (ảnh trắng dùng làm mask → theo màu chữ) ---------- */
.om-mimg { display: inline-block; flex: none; width: var(--mi, 32px); height: var(--mi, 32px); background-color: currentColor; -webkit-mask: var(--mi-src) center / contain no-repeat; mask: var(--mi-src) center / contain no-repeat; }
.om-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--om-ink); }
.om-ico.c-accent { color: var(--om-accent-text); }

/* ---------- Tính năng (ô icon + chữ) ---------- */
.om-feats { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--om-col, 340px), 100%), 1fr)); gap: var(--om-gap, var(--om-grid-gap)); min-width: 0; }
.om-feat { margin: 0; display: flex; min-width: 0; }
.om-feat-body { min-width: 0; }
.om-feat-title { margin: 0; font-weight: 700; }
.om-feat-text { margin: 0; color: var(--om-ink-3); }
/* compact */
.om-feats.s-compact { --om-col: 200px; --om-gap: var(--om-tile-gap); }
.om-feats.s-compact .om-feat { gap: 14px; align-items: center; padding: 14px; border-radius: var(--om-r-md); background: var(--om-tile); border: 1px solid var(--om-line-3); box-shadow: 0 0 0 1px var(--om-edge); }
.om-feats.s-compact .om-ico { width: 40px; height: 40px; }
.om-feats.s-compact .om-feat-title { font-size: 16px; }
.om-feats.s-compact .om-feat-text { margin-top: 2px; font-size: 13px; color: var(--om-ink-3); }
/* card */
.om-feats.s-card .om-feat { gap: 16px; align-items: flex-start; padding: var(--om-pad-item); border-radius: var(--om-r-lg); background: var(--om-glass-3); border: 1px solid var(--om-line-2); box-shadow: 0 0 0 1px var(--om-edge); -webkit-backdrop-filter: blur(var(--om-blur)); backdrop-filter: blur(var(--om-blur)); }
.om-feats.s-card .om-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--om-glass-3); }
.om-feats.s-card .om-feat-title { font-size: 17px; }
.om-feats.s-card .om-feat-text { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--om-ink-3); }
/* plain */
.om-feats.s-plain { --om-col: 340px; }
.om-feats.s-plain .om-feat { gap: 18px; align-items: flex-start; padding: 24px; border-radius: var(--om-r-lg); background: var(--om-glass-3); border: 1px solid var(--om-line-2); box-shadow: 0 0 0 1px var(--om-edge), inset 0 1px 0 var(--om-hi-2); -webkit-backdrop-filter: blur(var(--om-blur)); backdrop-filter: blur(var(--om-blur)); }
.om-feats.s-plain .om-ico { width: 52px; height: 52px; }
.om-feats.s-plain .om-feat-title { font-size: 19px; }
.om-feats.s-plain .om-feat-text { margin-top: 6px; font-size: 14px; line-height: 1.6; }
/* tile */
.om-feats.s-tile .om-feat { gap: 18px; align-items: center; min-height: 108px; padding: var(--om-pad-item); border-radius: var(--om-r-lg); background: var(--om-glass-3); border: 1px solid var(--om-line-2); box-shadow: 0 0 0 1px var(--om-edge), inset 0 1px 0 var(--om-hi-2), 0 24px 48px -24px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(var(--om-blur)); backdrop-filter: blur(var(--om-blur)); }
.om-feats.s-tile .om-ico { width: 60px; height: 60px; border-radius: 18px; background: var(--om-glass-3); border: 1px solid var(--om-line-2); }
.om-feats.s-tile .om-feat-title { font-size: 17px; font-weight: 600; line-height: 1.4; }

/* ---------- Showcase (thẻ nổi bật: tiêu đề + ảnh + ô tính năng) ---------- */
.om-showcase-head { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; }
.om-showcase-title { margin: 0; font-size: var(--om-h2); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; }
.om-showcase-logo { display: block; height: var(--om-sc-logo, 40px); width: auto; max-width: 100%; }
html[data-om-theme="light"] .om-showcase-logo.has-alt { display: none; }
.om-showcase-logo.is-alt { display: none; }
html[data-om-theme="light"] .om-showcase-logo.is-alt { display: block; }
.om-showcase-body { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.om-showcase-media { flex: 7 1 520px; min-width: 0; min-height: 300px; display: flex; align-items: center; justify-content: center; }
.om-showcase-media img { width: 100%; max-width: var(--om-ip-max, 620px); height: auto; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .55)); }
html[data-om-theme="light"] .om-showcase-media img { filter: drop-shadow(0 34px 40px rgba(36, 52, 110, .3)); }
.om-showcase-feats { flex: 5 1 340px; min-width: 0; }
.om-showcase.is-right .om-showcase-body { flex-direction: row-reverse; }

/* ---------- Thống kê ---------- */
.om-stats { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--om-col, 300px), 100%), 1fr)); gap: var(--om-gap, var(--om-grid-gap)); min-width: 0; }
.om-stat { margin: 0; min-width: 0; }
.om-stats.s-card .om-stat { border-radius: var(--om-r-lg); padding: var(--om-pad-item); display: flex; flex-direction: column; gap: 10px; background: var(--om-glass-3); border: 1px solid var(--om-line-2); box-shadow: 0 0 0 1px var(--om-edge), inset 0 1px 0 var(--om-hi-2), var(--om-shadow-2); -webkit-backdrop-filter: blur(var(--om-blur)) saturate(160%); backdrop-filter: blur(var(--om-blur)) saturate(160%); }
.om-stats.s-card .om-stat-v { margin: 0; font-size: clamp(36px, 3.6vw, 48px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--om-accent-text); }
.om-stats.s-card .om-stat-t { margin: 0; font-size: 19px; font-weight: 700; }
.om-stats.s-card .om-stat-d { margin: 0; font-size: 15px; line-height: 1.6; color: var(--om-ink-3); }
.om-stats.s-tile { --om-col: 130px; --om-gap: var(--om-tile-gap); }
.om-stats.s-tile .om-stat { border-radius: var(--om-r-md); padding: 16px; text-align: center; background: var(--om-glass-3); border: 1px solid var(--om-line-3); box-shadow: 0 0 0 1px var(--om-edge); }
.om-stats.s-tile .om-stat-v { margin: 0; font-family: var(--om-mono); font-size: 22px; font-weight: 600; color: var(--om-accent-text); }
.om-stats.s-tile .om-stat-v.k-text { font-family: var(--om-font); font-size: 17px; font-weight: 700; color: var(--om-ink); }
.om-stats.s-tile .om-stat-t { margin: 6px 0 0; font-size: 13px; color: var(--om-ink-3); }
.om-stats.s-tile .om-stat-d { display: none; }
.om-stats.s-mini { --om-col: 150px; --om-gap: var(--om-tile-gap); }
.om-stats.s-mini .om-stat { border-radius: var(--om-r-md); padding: 16px; background: var(--om-glass-3); border: 1px solid var(--om-line-3); box-shadow: 0 0 0 1px var(--om-edge); }
.om-stats.s-mini .om-stat-v { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--om-accent-text); }
.om-stats.s-mini .om-stat-t { margin: 4px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--om-ink-3); }
.om-stats.s-mini .om-stat-d { display: none; }
.om-stats.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- Các bước ---------- */
.om-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--om-col, 260px), 100%), 1fr)); gap: var(--om-grid-gap); counter-reset: omstep; }
.om-step { margin: 0; border-radius: var(--om-r-lg); padding: var(--om-pad-item); display: flex; flex-direction: column; gap: 12px; background: var(--om-glass-3); border: 1px solid var(--om-line-2); box-shadow: 0 0 0 1px var(--om-edge), inset 0 1px 0 var(--om-hi-2); -webkit-backdrop-filter: blur(var(--om-blur)) saturate(160%); backdrop-filter: blur(var(--om-blur)) saturate(160%); }
.om-step-n { font-family: var(--om-mono); font-size: 30px; font-weight: 600; color: var(--om-accent-text); }
.om-step-t { margin: 0; font-size: var(--om-h3); font-weight: 700; }
.om-step-d { margin: 0; font-size: 15px; line-height: 1.6; color: var(--om-ink-3); }

/* ---------- Bảng thông số ---------- */
.om-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--om-col, 280px), 100%), 1fr)); gap: var(--om-grid-gap); }
.om-specgrp { border-radius: var(--om-r-lg); padding: var(--om-pad-item); display: flex; flex-direction: column; gap: 12px; background: var(--om-glass-3); border: 1px solid var(--om-line-2); box-shadow: 0 0 0 1px var(--om-edge); -webkit-backdrop-filter: blur(var(--om-blur)); backdrop-filter: blur(var(--om-blur)); }
.om-specgrp-t { margin: 0; font-size: 18px; font-weight: 700; color: var(--om-accent-text); }
.om-specgrp dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; font-size: 14px; }
.om-specgrp dt, .om-specgrp dd { text-transform: none; letter-spacing: 0; line-height: 1.5; }
.om-specgrp dt { color: var(--om-ink-3); font-weight: 400; }
.om-specgrp dd { margin: 0; font-weight: 600; text-align: right; }

/* ---------- Giải pháp (thẻ trên ảnh nền) ---------- */
.om-solutions { position: relative; overflow: hidden; border-radius: var(--om-r-xl); padding: var(--om-pad-card); display: flex; flex-direction: column; gap: var(--om-card-gap); }
.om-solutions-bg { position: absolute; inset: 0; z-index: 0; }
.om-solutions-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.om-solutions-bg::after { content: ""; position: absolute; inset: 0; background: var(--om-scrim); opacity: .55; }
.om-solutions > .om-hd, .om-solutions > .om-solutions-grid { position: relative; z-index: 1; }
.om-solutions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--om-grid-gap); }
.om-solution { border-radius: var(--om-r-lg); padding: var(--om-pad-item); display: flex; flex-direction: column; gap: 16px; background: var(--om-glass-1); border: 1px solid var(--om-line-1); box-shadow: 0 0 0 1px var(--om-edge), inset 0 1px 0 var(--om-hi-1), var(--om-shadow-2); -webkit-backdrop-filter: blur(var(--om-blur)) saturate(160%); backdrop-filter: blur(var(--om-blur)) saturate(160%); }
.om-solution-top { display: flex; justify-content: space-between; align-items: center; }
.om-solution-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--om-glass-1); display: flex; align-items: center; justify-content: center; color: var(--om-accent-text); }
.om-solution-n { font-family: var(--om-mono); font-size: 28px; font-weight: 600; color: var(--om-ink-4); }
.om-solution-t { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.om-solution-d { margin: 0; font-size: 15px; line-height: 1.65; color: var(--om-ink-2); }

/* ---------- CTA ---------- */
.om-cta { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: center; justify-content: space-between; border-radius: calc(var(--om-radius) + 12px); padding: var(--om-pad-card); background: var(--om-glass-1); border: 1px solid var(--om-line-1); box-shadow: 0 0 0 1px var(--om-edge), inset 0 1px 0 var(--om-hi-1), var(--om-shadow-2); -webkit-backdrop-filter: blur(var(--om-blur)) saturate(170%); backdrop-filter: blur(var(--om-blur)) saturate(170%); }
.om-cta-main { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.om-cta-title { margin: 0; font-size: var(--om-h2); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; }
.om-cta-text { margin: 0; font-size: 17px; line-height: 1.65; color: var(--om-ink-2); }
.om-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.om-cta-img { flex: none; width: var(--om-cta-img, 140px); height: auto; }
.om-cta.v-compact .om-cta-main { flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 24px; }
.om-cta.v-compact > .om-cta-btns { flex: none; padding-top: 0; justify-content: flex-end; margin-left: auto; }
.om-cta.v-accent { background: var(--om-accent); border: 0; color: var(--om-on-accent); border-radius: calc(var(--om-radius) + 8px); padding: var(--om-pad-item) var(--om-pad-card); box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--om-accent) 55%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
.om-cta.v-accent .om-cta-main { flex: 0 1 auto; }
.om-cta.v-accent .om-cta-title { color: var(--om-on-accent); }
.om-cta.v-accent .om-cta-text { color: var(--om-on-accent); }
.om-cta-badge { flex: none; width: 64px; height: 64px; border-radius: 18px; background: rgba(255, 255, 255, .22); display: flex; align-items: center; justify-content: center; }
.om-cta .om-btn.om-btn--ghost { color: inherit; }

/* ---------- Highlight (khối nhấn xanh) ---------- */
.om-hl { --om-hl: #6EE7B7; border-radius: var(--om-r-lg); padding: var(--om-pad-item); display: flex; flex-direction: column; gap: 18px; background: radial-gradient(circle at 25% 15%, color-mix(in srgb, var(--om-hl) 32%, transparent), transparent 60%), var(--om-glass-2); border: 1px solid var(--om-line-2); box-shadow: 0 0 0 1px var(--om-edge); -webkit-backdrop-filter: blur(var(--om-blur)); backdrop-filter: blur(var(--om-blur)); min-width: 0; }
html[data-om-theme="light"] .om-hl { --om-hl-text: color-mix(in srgb, var(--om-hl) 45%, #000); }
.om-hl-ic { width: 72px; height: 72px; border-radius: 22px; background: color-mix(in srgb, var(--om-hl) 14%, transparent); border: 1px solid color-mix(in srgb, var(--om-hl) 35%, transparent); display: flex; align-items: center; justify-content: center; color: var(--om-hl-text, var(--om-hl)); }
.om-hl-eb { margin: 0; font-family: var(--om-mono); font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--om-hl-text, var(--om-hl)); }
.om-hl-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.om-hl-list li { margin: 0; border-radius: var(--om-r-md); padding: 16px 18px; background: var(--om-tile); border: 1px solid var(--om-line-3); }
.om-hl-v { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--om-hl-text, var(--om-hl)); }
.om-hl-l { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--om-ink-3); }

/* ---------- Tải ứng dụng: banner + khối app ---------- */
.om-stores { display: flex; flex-wrap: wrap; gap: 10px; }
.om-stores.is-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.om-store { display: block; line-height: 0; text-decoration: none; }
.om-store img { height: 44px; width: auto; max-width: 100%; display: block; }
.om-store-label { margin: 0; font-size: 15px; font-weight: 700; }

.om-dlbanner { position: relative; overflow: hidden; border-radius: var(--om-r-xl); padding: var(--om-pad-card); display: flex; flex-wrap: wrap; gap: var(--om-grid-gap); align-items: stretch; }
.om-dlbanner-bg { position: absolute; inset: 0; z-index: 0; }
.om-dlbanner-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.om-dlbanner-bg::after { content: ""; position: absolute; inset: 0; background: var(--om-scrim); opacity: .35; }
.om-dlbanner-pane { position: relative; z-index: 1; min-width: 0; border-radius: var(--om-r-lg); padding: var(--om-pad-card); display: flex; flex-direction: column; gap: var(--om-card-gap); background: var(--om-glass-4); border: 1px solid var(--om-line-1); box-shadow: 0 0 0 1px var(--om-edge), inset 0 1px 0 var(--om-hi-1), 0 30px 60px -24px rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(var(--om-blur)) saturate(160%); backdrop-filter: blur(var(--om-blur)) saturate(160%); }
.om-dlbanner-pane.is-main { flex: 1 1 520px; }
.om-dlbanner-pane.is-side { flex: 1 1 360px; justify-content: center; }
.om-dlbanner-eb { display: flex; gap: 14px; align-items: center; }
.om-dlbanner-eb img { flex: none; width: 48px; height: auto; }
.om-dlbanner-eb p { margin: 0; font-family: var(--om-mono); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.om-dlbanner-title { margin: 0; font-size: var(--om-h2); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; }
.om-dlbanner-text { margin: 0; font-size: 17px; line-height: 1.65; color: var(--om-ink-2); }
html:not([data-om-theme="light"]) .om-dlbanner-eb img { filter: none; }

.om-app { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: center; border-radius: var(--om-r-xl); padding: var(--om-pad-card); background: var(--om-glass-3); border: 1px solid var(--om-line-2); box-shadow: 0 0 0 1px var(--om-edge), inset 0 1px 0 var(--om-hi-2), var(--om-shadow-2); -webkit-backdrop-filter: blur(var(--om-blur)) saturate(160%); backdrop-filter: blur(var(--om-blur)) saturate(160%); }
.om-app-main { flex: 7 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.om-app-title { margin: 0; font-size: var(--om-h2); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; }
.om-app.m-device .om-app-main { flex: 6 1 420px; }
.om-app-text { margin: 0; font-size: 17px; line-height: 1.65; color: var(--om-ink-2); }
.om-app-media { flex: 4 1 260px; min-width: 0; display: flex; justify-content: center; }
.om-phone { width: 240px; padding: 10px; border-radius: 40px; background: var(--om-glass-4); border: 1px solid var(--om-line-1); -webkit-backdrop-filter: blur(var(--om-blur)); backdrop-filter: blur(var(--om-blur)); box-shadow: inset 0 1px 0 var(--om-hi-1), 0 40px 80px -24px rgba(0, 0, 0, .7); }
html[data-om-theme="light"] .om-phone { box-shadow: inset 0 1px 0 var(--om-hi-1), 0 40px 70px -28px rgba(36, 52, 110, .5); }
.om-phone img { display: block; width: 100%; height: auto; border-radius: 32px; }
.om-app.m-device .om-app-media { flex: 6 1 420px; position: relative; display: flex; align-items: flex-end; justify-content: flex-end; min-height: 440px; }
.om-laptop { position: absolute; left: 0; top: 0; width: 86%; }
.om-laptop-screen { padding: 10px 10px 14px; border-radius: 18px 18px 6px 6px; background: rgba(20, 24, 34, .92); border: 1px solid var(--om-line-1); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7); }
.om-laptop-screen img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.om-laptop-base { height: 12px; margin: 0 -4%; border-radius: 0 0 14px 14px; background: linear-gradient(#3A4050, #20242E); }
.om-app.m-device .om-phone { position: relative; width: 190px; padding: 8px; border-radius: 32px; }
.om-app.m-device .om-phone img { border-radius: 26px; }

/* ---------- Liên hệ ---------- */
.om-channels { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: var(--om-grid-gap); }
.om-channel { margin: 0; }
body.om-theme .om-channel-in { text-decoration: none; height: 100%; border-radius: calc(var(--om-radius) + 4px); padding: var(--om-pad-item) 28px; display: flex; gap: 20px; align-items: center; color: var(--om-ink); background: var(--om-glass-3); border: 1px solid var(--om-line-2); box-shadow: 0 0 0 1px var(--om-edge), inset 0 1px 0 var(--om-hi-1), var(--om-shadow-2); -webkit-backdrop-filter: blur(var(--om-blur)) saturate(160%); backdrop-filter: blur(var(--om-blur)) saturate(160%); transition: transform .2s ease; }
body.om-theme .om-channel-in:hover { transform: translateY(-3px); color: var(--om-ink); }
body.om-theme .om-channel.v-accent .om-channel-in { color: var(--om-on-accent); background: var(--om-accent); border: 0; box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--om-accent) 55%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
.om-channel-ic { flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--om-glass-3); display: flex; align-items: center; justify-content: center; color: var(--om-accent-text); }
.om-channel.v-accent .om-channel-ic { background: rgba(255, 255, 255, .25); color: var(--om-on-accent); }
.om-channel-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.om-channel-l { font-size: 13px; color: var(--om-ink-3); }
.om-channel.v-accent .om-channel-l { color: var(--om-on-accent); font-weight: 600; }
.om-channel-v { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.om-channel.v-accent .om-channel-v { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.om-channel-v.is-xl { font-size: 18px; }

.om-form-card { padding: var(--om-pad-card); display: flex; flex-direction: column; gap: var(--om-card-gap); }
.om-form-intro { display: flex; flex-direction: column; gap: 8px; }
.om-form-title { margin: 0; font-size: var(--om-h2); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; }
.om-form-note { margin: 0; font-size: 14px; line-height: 1.6; color: var(--om-ink-3); }
body.om-theme .om-form-card form, body.om-theme .om-form, body.om-theme .wpcf7, body.om-theme .wpcf7 form, body.om-theme .wpcf7-form { margin: 0; }
.om-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--om-grid-gap); }
.om-field { display: flex; flex-direction: column; gap: 8px; }
.om-field.is-full { grid-column: 1 / -1; }
body.om-theme .om-field label, body.om-theme .wpcf7 label { margin: 0; font-size: 13px; font-weight: 600; color: var(--om-ink); text-transform: none; letter-spacing: 0; }
.om-field label i { color: var(--om-accent-text); font-style: normal; }
body.om-theme .om-field input, body.om-theme .om-field select, body.om-theme .om-field textarea { width: 100%; margin: 0; height: 50px; border-radius: 14px; padding: 0 16px; font: inherit; font-size: 15px; color: var(--om-ink); background: rgba(var(--om-bg-rgb), .35); border: 1px solid var(--om-line-1); box-shadow: none; outline-color: var(--om-accent); transition: border-color .15s ease, box-shadow .15s ease; }
html[data-om-theme="light"] body.om-theme .om-field input, html[data-om-theme="light"] body.om-theme .om-field select, html[data-om-theme="light"] body.om-theme .om-field textarea { background: rgba(255, 255, 255, .75); border-color: rgba(10, 14, 26, .16); }
body.om-theme .om-field textarea { height: auto; min-height: 130px; padding: 14px 16px; line-height: 1.6; resize: vertical; }
body.om-theme .om-field input:focus, body.om-theme .om-field select:focus, body.om-theme .om-field textarea:focus { border-color: var(--om-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--om-accent) 28%, transparent); }
body.om-theme .om-field select { padding: 0 14px; }
.om-field input::placeholder, .om-field textarea::placeholder { color: var(--om-ink-4); }
.om-form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.om-form-consent { margin: 0; font-size: 13px; color: var(--om-ink-3); }
body.om-theme .om-form-consent a { color: var(--om-ink); text-decoration: underline; text-underline-offset: 3px; }
body.om-theme button.om-form-btn { border: 0; margin: 0 !important; min-height: 0; line-height: 1.2; text-transform: none; letter-spacing: 0; }
.om-form-btn[disabled] { opacity: .6; cursor: wait; }
.om-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.om-form-msg { grid-column: 1 / -1; margin: 0; border-radius: var(--om-r-md); padding: 14px 18px; font-size: 14px; line-height: 1.5; display: none; }
.om-form-msg.is-ok, .om-form-msg.is-err { display: block; }
.om-form-msg.is-ok { background: color-mix(in srgb, #34d399 18%, transparent); border: 1px solid color-mix(in srgb, #34d399 45%, transparent); }
.om-form-msg.is-err { background: color-mix(in srgb, #f87171 18%, transparent); border: 1px solid color-mix(in srgb, #f87171 45%, transparent); }

.om-offices { display: flex; flex-direction: column; gap: var(--om-grid-gap); min-width: 0; }
.om-offices-title { margin: 0 0 6px; font-size: var(--om-h2); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; }
.om-office { border-radius: var(--om-r-lg); padding: var(--om-pad-item); display: flex; flex-direction: column; gap: 10px; background: var(--om-glass-2); border: 1px solid var(--om-line-2); box-shadow: 0 0 0 1px var(--om-edge); -webkit-backdrop-filter: blur(var(--om-blur)); backdrop-filter: blur(var(--om-blur)); }
.om-office-t { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.45; letter-spacing: .01em; color: var(--om-accent-text); }
.om-office-a { margin: 0; font-size: 14px; line-height: 1.6; color: var(--om-ink-2); }
body.om-theme .om-office-map { align-self: flex-start; display: flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; color: var(--om-ink); }
body.om-theme .om-office-map:hover { color: var(--om-accent-text); }

/* ---------- Mobile ---------- */
@media (max-width: 849px) {
	.om-app.m-device .om-app-media { min-height: 380px; }
}
@media (max-width: 549px) {
	.om-stores.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.om-store img { height: 40px; }
	.om-dlbanner-pane { padding: var(--om-pad-item); }
	.om-channel.v-accent .om-channel-v { font-size: 24px; }
	.om-laptop { width: 100%; }
	.om-app.m-device .om-phone { width: 140px; }
}

/* ---------- Marquee logo (om_marquee) ---------- */
.om-mq { position: relative; overflow: hidden; --mq-gap: 16px; --mq-h: 30px; --mq-th: 72px; --mq-speed: 40s; --mq-fade: 140px; -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--mq-fade), #000 calc(100% - var(--mq-fade)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--mq-fade), #000 calc(100% - var(--mq-fade)), transparent); }
.om-mq-track { display: flex; width: max-content; animation: om-mq var(--mq-speed) linear infinite; will-change: transform; }
.om-mq.is-rev .om-mq-track { animation-direction: reverse; }
.om-mq.is-pause:hover .om-mq-track { animation-play-state: paused; }
.om-mq-list { display: flex; flex: none; gap: var(--mq-gap); margin: 0; padding: 0 var(--mq-gap) 0 0; list-style: none; }
.om-mq-item { flex: none; margin: 0; display: flex; align-items: center; justify-content: center; height: var(--mq-th); min-width: 170px; padding: 0 32px; color: var(--om-ink); }
.om-mq.s-tile .om-mq-item { border-radius: var(--om-r-md); background: var(--om-tile); border: 1px solid var(--om-line-2); box-shadow: 0 0 0 1px var(--om-edge); -webkit-backdrop-filter: blur(var(--om-blur)); backdrop-filter: blur(var(--om-blur)); }
.om-mq.s-plain .om-mq-item { min-width: 0; padding: 0 28px; }
.om-mq-item a { display: flex; align-items: center; }
.om-mq-logo { display: block; height: var(--mq-h); aspect-ratio: var(--mq-ar, 1); background-color: currentColor; -webkit-mask: var(--mq-src) center / contain no-repeat; mask: var(--mq-src) center / contain no-repeat; opacity: .9; }
.om-mq-img { display: block; height: var(--mq-h); width: auto; max-width: 160px; object-fit: contain; }
@keyframes om-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.om-mq { -webkit-mask-image: none; mask-image: none; }
	.om-mq-track { animation: none; flex-wrap: wrap; width: auto; }
	.om-mq-list[aria-hidden="true"], 	.om-mq-list { flex-wrap: wrap; justify-content: center; padding-right: 0; }
}

/* Select: danh sách thả xuống dùng nền đặc để chữ luôn đọc được ở cả hai giao diện */
body.om-theme .om-field select option, body.om-theme .wpcf7 select option { background: #141a2c; color: #fff; }
html[data-om-theme="light"] body.om-theme .om-field select option, html[data-om-theme="light"] body.om-theme .wpcf7 select option { background: #fff; color: #0A0E1A; }
/* Trình duyệt tự điền: giữ nền/màu chữ của theme */
body.om-theme .om-field input:-webkit-autofill, body.om-theme .om-field textarea:-webkit-autofill, body.om-theme .wpcf7 input:-webkit-autofill { -webkit-text-fill-color: var(--om-ink); caret-color: var(--om-ink); box-shadow: 0 0 0 1000px #1b2236 inset; transition: background-color 9999s ease; }
html[data-om-theme="light"] body.om-theme .om-field input:-webkit-autofill, html[data-om-theme="light"] body.om-theme .om-field textarea:-webkit-autofill, html[data-om-theme="light"] body.om-theme .wpcf7 input:-webkit-autofill { box-shadow: 0 0 0 1000px #fff inset; }

/* Contact Form 7: cùng kiểu với biểu mẫu của theme */
body.om-theme .wpcf7 form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
body.om-theme .wpcf7 form > p { margin: 0; }
body.om-theme .wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: 8px; }
body.om-theme .wpcf7 :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100%; margin: 0; height: 50px; border-radius: 14px; padding: 0 16px; font: inherit; font-size: 15px; color: var(--om-ink); background: rgba(var(--om-bg-rgb), .35); border: 1px solid var(--om-line-1); box-shadow: none; }
html[data-om-theme="light"] body.om-theme .wpcf7 :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), select, textarea) { background: rgba(255, 255, 255, .75); border-color: rgba(10, 14, 26, .16); }
body.om-theme .wpcf7 textarea { height: auto; min-height: 130px; padding: 14px 16px; line-height: 1.6; }
body.om-theme .wpcf7 :is(input, select, textarea):focus { border-color: var(--om-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--om-accent) 28%, transparent); outline: 0; }
body.om-theme .wpcf7 .wpcf7-submit { height: auto; width: auto; margin: 0; padding: 16px 28px; border: 0; border-radius: var(--om-pill); background: var(--om-accent); color: var(--om-on-accent); font-weight: 700; font-size: 16px; cursor: pointer; text-transform: none; letter-spacing: 0; box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--om-accent) 70%, transparent); }
body.om-theme .wpcf7 .wpcf7-spinner { margin: 0 0 0 10px; }
body.om-theme .wpcf7 .wpcf7-not-valid-tip { margin-top: 6px; font-size: 13px; color: #f87171; }
body.om-theme .wpcf7 .wpcf7-response-output { grid-column: 1 / -1; margin: 0; border-radius: var(--om-r-md); padding: 14px 18px; font-size: 14px; border-width: 1px; color: var(--om-ink); }