/* =========================================================================
   Vinaweb – Trang con Odoo (pages/subpageodoo.php)
   Các khối od-intro, od-rich, od-cards, od-cta, od-hero… cũng được trang Zoom dùng lại.
   Nạp SAU gws.css: dùng chung nhịp dọc --sec, khối hỏi đáp (gw-faq), thẻ bài
   viết (ncard) và cơ chế điểm nhấn nhận diện hãng. File này chỉ gồm phần riêng.
   ========================================================================= */

/* ---------- Tiêu đề do quản trị nhập (thường viết hoa toàn bộ) ---------- */
.od-h2 { font-size: clamp(24px, 2.8vw, 36px); line-height: 1.35; font-weight: 700; letter-spacing: 0; color: var(--black); }
.od-h2.center { max-width: 880px; margin-inline: auto; }
.od-h2 :is(span, em, b, strong) { font-style: normal; font-weight: inherit; color: var(--red); }

/* ---------- Nội dung soạn từ trình soạn thảo ---------- */
.od-rich { font-size: 16.5px; line-height: 1.8; }
.od-rich > * + * { margin-top: 12px; }
.od-rich :is(ul, ol) { display: grid; gap: 9px; padding: 0; list-style: none; }
.od-rich li { position: relative; padding-left: 28px; }
.od-rich li::before { content: ""; position: absolute; left: 0; top: .32em; 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; }
.od-rich a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.od-rich :is(strong, b) { font-weight: 700; color: var(--black); }
.od-rich img { max-width: 100%; height: auto; border-radius: 12px; }
.od-rich--sm { font-size: 14.5px; line-height: 1.65; }
.od-rich--sm :is(ul, ol) { gap: 7px; }
.od-rich--sm li { padding-left: 24px; }
.od-rich--sm li::before { width: 16px; height: 16px; background-size: 10px; }

/* ---------- Banner ---------- */
.od-hero .phero__title { font-size: clamp(30px, 4.2vw, 38px); line-height: 1.25; }
.od-hero .phero__title :is(span, b, strong) { font-weight: inherit; background: linear-gradient(90deg, #ff6b70, #ffc59a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.od-hero .phero__lead { max-width: 560px; }
.od-hero .phero__lead.od-rich { font-size: 17px; line-height: 1.7; }
.od-hero .od-rich :is(strong, b) { color: #fff; }
.od-hero .od-rich li::before { background-color: rgba(255,255,255,.18); }
.od-hero__img { border-radius: 24px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 40px 80px -30px rgba(0,0,0,.8); }
.od-hero__img img { display: block; width: 100%; height: auto; }
/* Ảnh ghép nền trong suốt: không đóng khung */
.od-hero__img--free { border-radius: 0; overflow: visible; box-shadow: none; filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
/* Video nhúng (YouTube…) co theo khung 16:9 */
.od-embed { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 30px 60px -30px rgba(33,34,82,.55); }
.od-embed iframe, .od-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.od-hero .od-embed { box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 40px 80px -30px rgba(0,0,0,.8); }

/* ---------- Khối giới thiệu: chữ – hình xen kẽ ---------- */
.od-intro { padding: var(--sec) 0; background: #fff; }
.od-intro + .od-intro { margin-top: -1px; padding-top: 1px; }
.od-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.od-intro--flip .od-intro__media { order: 2; }
.od-intro--text .od-intro__grid { grid-template-columns: minmax(0, 860px); justify-content: center; }
.od-intro__media > img { display: block; width: 100%; height: auto; border-radius: 20px; }
.od-intro__body .od-rich { margin-top: 18px; }
.od-intro__extra { display: block; max-width: 100%; height: auto; margin-top: 22px; border-radius: 14px; }

/* ---------- Số liệu ---------- */
.od-stats { position: relative; isolation: isolate; overflow: hidden; padding: 64px 0; color: #fff; background: var(--ink); }
.od-stats::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--bg, none) center / cover no-repeat; }
.od-stats::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 400px at 100% 0%, rgba(186,19,26,.6), transparent 70%), rgba(10,13,36,.82); }
.od-stats__grid { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 24px; text-align: center; }
.od-stat + .od-stat { border-left: 1px solid rgba(255,255,255,.18); }
.od-stat__num { font-size: clamp(34px, 4vw, 56px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.od-stat__label { margin-top: 8px; font-size: 15.5px; color: rgba(255,255,255,.78); }

/* ---------- Khối thẻ dùng chung ---------- */
.od-sec { position: relative; padding: var(--sec) 0; background: #fff; }
.od-sec--beige { background: var(--beige); }
.od-sec:not(.od-sec--beige) + .od-sec:not(.od-sec--beige), .od-intro + .od-sec:not(.od-sec--beige) { margin-top: -1px; padding-top: 1px; }
.od-sec__cta { margin-top: 40px; }
.od-cards { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 18px; margin-top: 44px; }
.od-card { padding: 26px 22px 28px; border-radius: 20px; background: var(--beige); transition: opacity .8s var(--ease), translate .8s var(--ease), background .35s, box-shadow .35s, transform .35s var(--ease); }
.od-card--white { background: #fff; }
.od-card__ic { display: grid; place-items: center; width: 60px; height: 60px; 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); }
.od-card--white .od-card__ic { background: var(--beige); box-shadow: none; }
.od-card__ic img { width: 36px; height: 36px; object-fit: contain; }
.od-card h3, .od-pic h3 { margin-top: 18px; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--black); }
.od-card p { margin-top: 10px; font-size: 14.5px; line-height: 1.7; }
.od-card .od-rich { margin-top: 12px; }
@media (hover: hover) { .od-card: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); } }
/* Thẻ có ảnh lớn phía trên (giải pháp theo ngành) */
.od-pic { display: flex; flex-direction: column; border-radius: 20px; background: var(--beige); overflow: hidden; }
.od-pic__img { aspect-ratio: 3 / 2; overflow: hidden; background: #e8e5dc; }
.od-pic__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.od-pic:hover .od-pic__img img { transform: scale(1.06); }
.od-pic h3 { padding: 0 20px; }
.od-pic .od-rich { margin-top: 10px; padding: 0 20px 24px; }

/* ---------- Năng lực / đối tác ---------- */
.od-capacity__lead, .od-news__lead { max-width: 820px; margin: 18px auto 0; font-size: 16.5px; line-height: 1.75; }
.od-capacity__img { margin-top: 40px; text-align: center; }
.od-capacity__img img { display: inline-block; max-width: min(100%, 900px); height: auto; }

/* ---------- Quy trình ---------- */
.od-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; list-style: none; counter-reset: none; }
.od-step { display: grid; grid-template-columns: auto 1fr; gap: 22px; padding: 28px 26px; border-radius: 20px; background: var(--beige); }
.od-step__no { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--red); }
.od-step h3 { font-size: 18.5px; font-weight: 700; line-height: 1.4; color: var(--black); }
.od-step .od-rich { margin-top: 8px; }

/* ---------- Câu chuyện khách hàng / tin tức ---------- */
.od-news + .od-news { padding-top: 0; }
.od-news .nlist { margin-top: 44px; gap: 40px 22px; }
.od-news .ncard__title { margin-top: 4px; }

/* ---------- Lời mời tư vấn ---------- */
.od-cta { position: relative; isolation: isolate; overflow: hidden; padding: 72px 0; color: #fff; background: radial-gradient(700px 420px at 100% 0%, rgba(186,19,26,.7), transparent 70%), radial-gradient(600px 400px at 0% 100%, rgba(63,70,160,.45), transparent 65%), var(--ink); }
.od-cta__hex { position: absolute; right: -40px; bottom: -70px; z-index: -1; width: 300px; height: 265px; fill: none; stroke: rgba(255,255,255,.2); stroke-width: 1; }
.od-cta__grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.od-cta__title { font-size: clamp(24px, 2.6vw, 36px); font-weight: 700; line-height: 1.3; text-wrap: balance; }
.od-cta__title :is(span, b, strong, em) { font-style: normal; font-weight: inherit; color: var(--red-soft); }
.od-cta__text { max-width: 760px; margin-top: 14px; font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,.8); }

/* ---------- Điểm nhấn nhận diện Odoo (nhẹ) ---------- */
.odoo .badge::before { width: 12px; height: 12px; clip-path: none; border-radius: 50%; background: #714b67; box-shadow: 0 0 0 3px rgba(113,75,103,.22); }

@media (max-width: 1200px) {
  .od-cards { grid-template-columns: repeat(min(var(--cols, 4), 3), 1fr); }
}
@media (max-width: 1024px) {
  .od-intro__grid { grid-template-columns: 1fr; gap: 30px; }
  .od-intro--flip .od-intro__media { order: 0; }
  .od-cards { grid-template-columns: 1fr 1fr; margin-top: 34px; }
  .od-cta__grid { grid-template-columns: 1fr; gap: 26px; }
  .od-stats { padding: 52px 0; }
}
@media (max-width: 680px) {
  .od-rich { font-size: 16px; }
  .od-cards, .od-steps { grid-template-columns: 1fr; gap: 12px; }
  .od-card { padding: 22px 20px 24px; }
  .od-stats__grid { grid-template-columns: 1fr; gap: 0; }
  .od-stat { padding: 18px 0; }
  .od-stat + .od-stat { border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
  .od-step { grid-template-columns: 1fr; gap: 10px; padding: 24px 20px; }
  .od-step__no { font-size: 38px; }
  .od-cta { padding: 56px 0; }
  .od-embed { border-radius: 14px; }
}