/* Bố cục EG-Digital với video hai bên. Chỉ dùng tại bản WebIntro. */
:root { --page-width:min(1180px,78vw); --rail-width:calc((100vw - var(--page-width))/2); }
html { scroll-padding-top:90px; }
body { min-width:0; background:#090b0f; }
.page-shell { position:relative; z-index:1; width:var(--page-width); margin:0 auto; background:#fff; box-shadow:0 0 65px #0008; }
.side-scene { position:fixed; z-index:0; top:0; bottom:0; width:var(--rail-width); overflow:hidden; background:#11141b; }
.side-scene-left { left:0; }.side-scene-right { right:0; }
.ambient-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.side-scene .scene-shade, .side-scene>span { z-index:2; }
.side-scene-left .ambient-video { object-position:38% center; }.side-scene-right .ambient-video { object-position:68% center; }
.scene-shade { position:absolute; inset:0; background:linear-gradient(0deg,#080b10c9,transparent 50%,#080b1030); pointer-events:none; }
.side-scene-left .scene-shade { box-shadow:inset -22px 0 36px #0007; }.side-scene-right .scene-shade { box-shadow:inset 22px 0 36px #0007; }
.side-scene>span { position:absolute; bottom:85px; left:12px; right:12px; color:#e6cc9a; text-align:center; font:600 15px/1.8 Georgia,serif; letter-spacing:.18em; text-shadow:0 2px 10px #000; }
.side-scene i { display:block; font:9px/1.8 Inter,Arial,sans-serif; letter-spacing:.15em; color:#c0bbb3; }
.motion-control { position:fixed; z-index:35; bottom:22px; right:16px; display:flex; align-items:center; justify-content:center; gap:8px; min-height:40px; max-width:calc(var(--rail-width) - 24px); padding:8px 10px; border:1px solid #d7c49c50; border-radius:3px; color:#e5d8bc; background:#101318df; cursor:pointer; font-size:11px; backdrop-filter:blur(8px); }
.motion-control>span:first-child { font-size:18px; line-height:1; }.motion-control:hover { background:#242b30; box-shadow:none; transform:none; filter:none; }
.motion-control:focus-visible { outline:2px solid #e1b965; outline-offset:3px; }
.skip-link { position:fixed; z-index:200; top:-70px; left:20px; padding:12px 18px; background:#fff; color:#111; }.skip-link:focus { top:10px; }
.header { padding:0 28px; gap:18px; }.brand { min-width:180px; }.nav { gap:20px; }
.services { width:calc(100% - 56px); padding-top:45px; min-height:0; }
.section-heading h1 { max-width:930px; font-size:clamp(28px,2.7vw,40px); line-height:1.15; }
.section-heading p { max-width:780px; font-size:14px; line-height:1.8; }
.service-grid { height:auto; grid-template-rows:repeat(2,minmax(220px,auto)); }.service-item { padding:24px 20px; }
.service-detail p { font-size:14px; line-height:1.7; }.service-detail button { font-size:11px; }
.proof-strip { padding:18px; gap:16px; }.proof-strip div { flex-wrap:wrap; gap:3px 10px; }.proof-strip strong { font-size:23px; }
.catalog { padding-inline:28px; padding-top:30px; }.catalog-top { grid-template-columns:190px 1fr; gap:20px; }.video-card { height:158px; }
.price-heading { grid-template-columns:145px 235px 1fr; gap:12px; }.plan-card>header,.plan-card>div { padding:15px 12px; }.plan-card>div>strong { font-size:23px; }
.why-row { grid-template-columns:180px 1fr auto; gap:15px; }
.plan-modal,.contact-modal { z-index:100; }.plan-modal:not(.open),.contact-modal:not(.open) { pointer-events:none; }
.plan-dialog { box-shadow:0 25px 100px #0005; }.modal-info>p,.modal-info li { font-size:14px; }.modal-info h3 { font-size:13px; }
.modal-info>button,.media-tab { font-size:12px; }.media-panel>header { padding-right:42px; }.media-panel header>span { align-self:center; }
.contact-dialog>p,.download-dialog>p { font-size:14px; line-height:1.8; }.contact-dialog a span { font-size:14px; }.contact-dialog a small { font-size:11px; }
.download-dialog { border:0; padding:40px; max-width:460px; width:calc(100% - 32px); color:#161616; background:#fff; }
.download-dialog::backdrop { background:#0009; }.download-dialog>span { font-size:11px; letter-spacing:.1em; color:var(--accent); font-weight:700; }
.download-dialog h2 { font-size:28px; line-height:1.2; margin:15px 0; }.download-dialog>p { color:#666; }
.download-close { position:absolute; right:10px; top:10px; width:32px; height:32px; border:1px solid #ddd; background:#fff; cursor:pointer; font-size:22px; }
.download-contact { border:0; background:var(--accent); color:#fff; padding:12px 18px; font-size:13px; cursor:pointer; }
@media(min-width:1700px) { .side-scene>span { font-size:20px; bottom:100px; }.side-scene i { font-size:10px; }.motion-control { right:28px; font-size:12px; padding:10px 15px; } }
@media(max-width:1250px) {
  :root { --page-width:calc(100vw - 220px); }.header { padding-inline:20px; gap:14px; }.brand { min-width:160px; }.nav { gap:14px; }
  .header-actions { gap:5px; }.header-download,.header-cta { padding:9px; font-size:9px; }
  .proof-strip { grid-template-columns:repeat(3,1fr); }.proof-strip button { grid-column:1/-1; }
  .price-heading { grid-template-columns:1fr 2fr; }.price-heading p { grid-column:1/-1; text-align:left; }
  .plan-card { grid-template-columns:1fr; }.plan-card>div { text-align:left; }
  .motion-label { display:none; }.motion-control { right:33px; width:44px; }.side-scene>span { font-size:12px; letter-spacing:.1em; }.side-scene i { display:none; }
}
@media(max-width:1080px) {
  :root { --page-width:calc(100vw - 160px); }.header-actions { display:none; }.header { justify-content:space-between; }.brand { flex:1; }.nav { flex:initial; }
  .catalog-top { grid-template-columns:1fr; }.service-grid { grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,minmax(210px,auto)); }
  .motion-control { right:18px; }.side-scene>span { writing-mode:vertical-rl; left:50%; right:auto; transform:translateX(-50%); bottom:90px; letter-spacing:.2em; }
}
@media(max-width:900px) {
  .nav { position:absolute; left:0; right:0; top:68px; }.header { padding-inline:22px; }.menu-toggle { flex-shrink:0; padding:9px; }.service-grid { height:auto; }
  .why-row { grid-template-columns:1fr auto; }.why-row p { grid-column:1/-1; }.plan-dialog { grid-template-columns:300px 1fr; }.services { padding-top:36px; }
}
@media(max-width:760px) {
  :root { --page-width:100%; --rail-width:0px; }
  .side-scenes { position:relative; z-index:0; height:190px; display:grid; grid-template-columns:1fr 1fr; gap:2px; }
  .side-scene { position:relative; width:100%; height:190px; }.side-scene .ambient-video { object-position:center 42%; }
  .side-scene-left .ambient-video { object-position:30% 42%; }.side-scene-right .ambient-video { object-position:70% 42%; }
  .side-scene>span { writing-mode:horizontal-tb; transform:none; left:12px; right:12px; bottom:20px; font-size:12px; }
  .scene-shade { box-shadow:none!important; background:linear-gradient(0deg,#090c12d9,transparent 85%); }
  .motion-control { position:absolute; top:10px; bottom:auto; right:10px; width:36px; max-width:none; min-height:34px; padding:5px; }
  .page-shell { box-shadow:none; }.header { top:0; }.nav { left:0; right:0; }.services { width:calc(100% - 36px); }
  .section-heading h1 { font-size:28px; }.section-heading p { font-size:14px; }.catalog { padding-inline:18px; }.service-detail p { font-size:14px; }
  .plan-dialog { grid-template-columns:1fr; grid-template-rows:42vh 1fr; }.modal-info { order:2; }.media-panel { order:1; }
  .proof-strip { grid-template-columns:1fr; }.proof-strip div { justify-content:center; }.plan-card { grid-template-columns:1fr 1fr; }
}
@media(max-width:650px) {
  .service-grid { grid-template-columns:1fr; grid-template-rows:none; }.service-item { min-height:215px; }.video-card { height:195px; }
  .price-heading { display:block; }.price-heading h2 { margin-top:7px; }.price-heading p { margin-top:10px; }.why-row { grid-template-columns:1fr; }
  .plan-dialog { width:100%; height:100%; }.modal-info { padding-top:25px; }.media-panel>header { padding-right:44px; }.modal-info>p,.modal-info li { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }