/* Viewer 123Website - giao diện loading hiện đại (ghi đè style.css, gỡ bằng cách bỏ <link> modern.css) */
/* ---- Thanh trên cùng: tối, kính mờ, viền thương hiệu ---- */
html .switcher { background: rgba(14,21,33,.92); -webkit-backdrop-filter: saturate(1.5) blur(18px); backdrop-filter: saturate(1.5) blur(18px); border-bottom: 1px solid rgba(255,255,255,.06); box-shadow: 0 12px 32px rgba(6,12,24,.22); }
html .switcher:after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, rgba(0,180,216,0) 0%, #00b4d8 28%, #ffe45c 72%, rgba(255,228,92,0) 100%); opacity: .75; pointer-events: none; }
html .switcher .woologo img { height: 38px; }
html .switcher .magd { min-height: 38px; padding: 0 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); box-shadow: none; }
html .switcher .magd strong { color: rgba(226,236,248,.66); font-size: .86em; letter-spacing: .1em; }
html .switcher .magd em { color: #ffe45c; font-size: 1.12em; font-style: normal; }
html .switcher .theme-code-link:hover .magd { background: rgba(255,255,255,.11); }
html .switcher .switcher-device-panel { gap: 4px; padding: 4px; border: 0; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
html .switcher .thuthietbi { padding: 0 12px 0 10px; color: rgba(236,244,252,.82); font-size: 15px; font-weight: 600; letter-spacing: .02em; }
html .switcher .thuthietbi:before { color: #5ad1f5; }
html .switcher ul.respond a { width: 40px; height: 36px; border-radius: 10px; background: transparent; box-shadow: none; transform: none; opacity: 1; }
html .switcher ul.respond a:before { color: rgba(226,236,248,.55) !important; line-height: 36px; font-size: 18px; }
html .switcher ul.respond a:hover { background: rgba(255,255,255,.08); box-shadow: none; transform: none; }
html .switcher ul.respond a:hover:before { color: #fff !important; }
html .switcher ul.respond a.active { background: linear-gradient(180deg, rgba(90,209,245,.26), rgba(90,209,245,.10)); box-shadow: inset 0 0 0 1px rgba(90,209,245,.42); transform: none; }
html .switcher ul.respond a.active:before { color: #8fe4ff !important; }
html .switcher .switcher-toggle { width: 42px; height: 42px; top: 13px; right: 14px; border-radius: 12px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
html .switcher .switcher-toggle:hover { background: rgba(255,255,255,.14); }
html .switcher .switcher-toggle:before { color: #9fe5ff; line-height: 42px; }
html.switcher-hidden .switcher:after { display: none; }
html.switcher-hidden .switcher .switcher-toggle { top: 10px; right: 12px; background: rgba(14,21,33,.92); box-shadow: 0 10px 28px rgba(6,12,24,.35); }

.iframe-loader { padding: 20px; background: #eef3f8; overflow: hidden; }
.iframe-loader .ifl-bg { position: absolute; inset: -40px; background-size: cover; background-position: top center; filter: blur(34px) saturate(1.15); opacity: .55; transform: scale(1.1); }
.iframe-loader:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(247,250,253,.55), rgba(238,243,248,.85)); }
.iframe-loader .ifl-card { position: relative; z-index: 1; display: flex; gap: 22px; align-items: stretch; width: min(640px, 100%); padding: 18px; border-radius: 22px; background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 24px 60px rgba(16,32,56,.16), 0 2px 6px rgba(16,32,56,.06); transform: translateY(8px); opacity: 0; animation: iflIn .45s .05s ease forwards; }
.iframe-loader .ifl-thumb { flex: 0 0 190px; border-radius: 14px; overflow: hidden; background: #e3eaf2; aspect-ratio: 4 / 5; box-shadow: inset 0 0 0 1px rgba(16,32,56,.06); }
.iframe-loader .ifl-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.iframe-loader .ifl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 6px 6px 6px 0; }
.iframe-loader .ifl-eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #0891c9; }
.iframe-loader .ifl-title { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 700; color: #121c2b; letter-spacing: .005em; }
.iframe-loader .ifl-bar { position: relative; height: 6px; margin: 22px 0 12px; border-radius: 999px; background: #e3eaf2; overflow: hidden; }
.iframe-loader .ifl-bar i { position: absolute; inset: 0 auto 0 0; width: 4%; border-radius: inherit; background: linear-gradient(90deg, #0ea5e9, #22d3ee); animation: iflBar 14s cubic-bezier(.1,.7,.2,1) forwards; }
.theme-wrapper.loaded .iframe-loader .ifl-bar i { animation: none; width: 100%; transition: width .2s ease; }
.iframe-loader .ifl-hint { margin: 0; min-height: 20px; font-size: 15px; color: #52627a; }
.iframe-loader .ifl-open { display: none; align-self: flex-start; margin-top: 14px; padding: 9px 16px; border-radius: 999px; background: #121c2b; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; pointer-events: auto; }
.iframe-loader .ifl-open:hover { background: #0891c9; color: #fff; }
.iframe-loader.is-slow .ifl-open { display: inline-block; }
@keyframes iflIn { to { transform: none; opacity: 1; } }
@keyframes iflBar { 0% { width: 4%; } 30% { width: 55%; } 100% { width: 92%; } }
@media (max-width: 560px) {
  .iframe-loader .ifl-card { flex-direction: column; gap: 14px; padding: 14px; }
  .iframe-loader .ifl-thumb { flex-basis: auto; width: 100%; aspect-ratio: 16 / 9; }
  .iframe-loader .ifl-body { padding: 0 4px 4px; }
  .iframe-loader .ifl-title { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .iframe-loader .ifl-card { animation: none; opacity: 1; transform: none; }
  .iframe-loader .ifl-bar i { animation: none; width: 60%; }
}

/* ---- Thanh mỏng: 68px -> 48px (máy tính/tablet), 50px -> 44px (điện thoại) ---- */
html .switcher:after { height: 1px; }
html .switcher .woologo img { height: 28px; }
html .switcher .magd { min-height: 30px; padding: 0 12px; }
html .switcher .switcher-device-panel { gap: 2px; padding: 3px; }
html .switcher .thuthietbi { padding: 0 10px 0 8px; font-size: 14px; }
html .switcher ul.respond { padding: 0; margin: 0; }
html .switcher .thuthietbi { margin-right: 6px; }
html .switcher ul.respond a { width: 34px; height: 30px; border-radius: 8px; }
html .switcher ul.respond a:before { line-height: 30px; font-size: 16px; }
html .switcher .switcher-toggle { width: 34px; height: 34px; border-radius: 10px; }
html .switcher .switcher-toggle:before { line-height: 34px; }
@media only screen and (min-width: 768px) {
  :root { --switcher-offset: 48px; }
  html .switcher { height: 48px; min-height: 48px; }
  html .switcher .switcher-shell { flex-wrap: nowrap; justify-content: flex-end; padding: 0 60px 0 16px; }
  html .switcher .switcher-toggle { top: 7px; right: 12px; }
  html.switcher-hidden .switcher .switcher-toggle { top: 8px; right: 10px; }
}
@media only screen and (min-width: 768px) and (max-width: 1180px) {
  html .switcher .switcher-brand { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: auto; }
  html .switcher .switcher-device-panel { position: absolute; left: 50%; transform: translateX(-50%); width: auto; }
}
@media only screen and (min-width: 768px) and (max-width: 1000px) {
  html .switcher .thuthietbi { display: none; }
}
@media only screen and (max-width: 767px) {
  html .switcher { height: 44px; min-height: 44px; }
  html .theme-wrapper:not(.iOSdevice) { height: calc(100vh - 44px); min-height: calc(100vh - 44px); }
  html .switcher .switcher-toggle { top: 5px; right: 8px; }
  html .switcher .woologo img { height: 26px; }
  html .switcher .magd { min-height: 28px; }
}

/* ---- Khung thiết bị (tablet/điện thoại): màn hình chờ nằm trong màn hình mockup, giữ góc bo ---- */
.theme-wrapper.iOSdevice .iframe-loader { inset: 8px; border-radius: 32px; padding: 16px; }
.theme-wrapper.iOSdevice .iframe-loader .ifl-card { flex-direction: column; gap: 14px; padding: 14px; }
.theme-wrapper.iOSdevice .iframe-loader .ifl-thumb { flex-basis: auto; width: 100%; aspect-ratio: 16 / 9; }
.theme-wrapper.iOSdevice .iframe-loader .ifl-body { padding: 0 4px 4px; }
.theme-wrapper.iOSdevice .iframe-loader .ifl-title { font-size: 20px; }

/* ---- Nút liên hệ nhanh giống hệt site chính (CSS chép từ theme 123website-2026, 10/2026) ---- */
.quick-contact, .quick-contact * { box-sizing: border-box; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; }
.quick-contact { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; text-transform: none; letter-spacing: normal; }
.quick-contact button, .quick-contact a { margin: 0; text-transform: none; letter-spacing: normal; line-height: normal; min-height: 0; font-weight: inherit; }
.quick-contact [hidden] { display: none !important; }
.quick-contact{align-items:flex-start;bottom:1.25rem;display:flex;flex-direction:column;gap:.875rem;left:1.25rem;position:fixed;z-index:60}
.quick-contact__interest,.quick-contact__menu,.quick-contact__toggle{align-self:flex-start}
.quick-contact__interest.is-pulsing{animation:quick-contact-interest-pulse .52s cubic-bezier(.22,1,.36,1)}
@keyframes quick-contact-interest-pulse{0%{box-shadow:0 8px 18px rgba(37,99,235,.08);transform:translateY(0) scale(1)}38%{box-shadow:0 14px 28px rgba(37,99,235,.14);transform:translateY(-3px) scale(1.03)}72%{box-shadow:0 7px 16px rgba(37,99,235,.07);transform:translateY(1px) scale(.985)}to{box-shadow:0 8px 18px rgba(37,99,235,.08);transform:translateY(0) scale(1)}}
.quick-contact__menu{backdrop-filter:blur(16px);background:radial-gradient(circle at top right,rgba(219,234,254,.7),transparent 34%),linear-gradient(180deg,hsla(0,0%,100%,.98),rgba(248,250,252,.96));border:1px solid rgba(203,213,225,.72);border-radius:1.5rem;box-shadow:0 28px 70px rgba(15,23,42,.18);padding:1rem;width:min(20rem,calc(100vw - 2.5rem))}
.quick-contact__menu>:not([hidden])~:not([hidden]){margin-top:.75rem}
.quick-contact__item{--quick-contact-accent:#2563eb;--quick-contact-accent-strong:#1d4ed8;--quick-contact-surface:rgba(239,246,255,.92);--quick-contact-border:rgba(191,219,254,.96);--quick-contact-border-hover:#93c5fd;--quick-contact-shadow:rgba(37,99,235,.16);align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(180deg,#fff,hsla(0,0%,100%,.98)),var(--quick-contact-surface);border:1px solid var(--quick-contact-border);border-radius:1.125rem;color:#0f172a;cursor:pointer;display:flex;gap:.875rem;padding:.875rem 1rem;text-align:left;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease;width:100%}
.quick-contact__item:hover{border-color:var(--quick-contact-border-hover);box-shadow:0 16px 34px var(--quick-contact-shadow);transform:translateY(-2px)}
.quick-contact__item-icon{align-items:center;background:linear-gradient(135deg,var(--quick-contact-accent) 0,var(--quick-contact-accent-strong) 100%);border-radius:9999px;box-shadow:inset 0 1px 0 hsla(0,0%,100%,.22);display:inline-flex;flex-shrink:0;height:2.75rem;justify-content:center;width:2.75rem}
.quick-contact__item-icon img,.quick-contact__toggle img{display:block;height:1.5rem;-o-object-fit:contain;object-fit:contain;width:1.5rem}
.quick-contact__toggle-icons{align-items:center;display:flex;height:1.75rem;justify-content:center;position:relative;width:1.75rem}
.quick-contact__toggle-icon{height:100%!important;inset:0;-o-object-fit:contain;object-fit:contain;opacity:0;pointer-events:none;position:absolute;transform:scale(.6) rotate(-20deg);transition:opacity .3s ease,transform .3s ease;width:100%!important}
.quick-contact__toggle-icon.is-active{opacity:1;transform:scale(1) rotate(0deg)}
@keyframes qc-pulse{0%{box-shadow:0 20px 50px rgba(29,78,216,.28)}50%{box-shadow:0 20px 50px rgba(29,78,216,.48),0 0 0 6px rgba(96,165,250,.18)}to{box-shadow:0 20px 50px rgba(29,78,216,.28)}}
.quick-contact__toggle.is-pulsing{animation:qc-pulse .6s ease}
.quick-contact__item-copy{display:block;min-width:0}
.quick-contact__item-title{display:block;font-size:.95rem;font-weight:700;line-height:1.35}
.quick-contact__item-subtitle{color:#475569;display:block;font-size:.8125rem;line-height:1.4;margin-top:.125rem}
.quick-contact__item--consult{--quick-contact-accent:#7c3aed;--quick-contact-accent-strong:#5b21b6;--quick-contact-surface:linear-gradient(135deg,#f5f3ff,#eef2ff);--quick-contact-border:#ddd6fe;--quick-contact-border-hover:#c4b5fd;--quick-contact-shadow:rgba(124,58,237,.16)}
.quick-contact__item--zalo{--quick-contact-accent:#0068ff;--quick-contact-accent-strong:#0050c8;--quick-contact-surface:linear-gradient(135deg,#eff6ff,#e0f2fe);--quick-contact-border:#bfdbfe;--quick-contact-border-hover:#93c5fd;--quick-contact-shadow:rgba(0,104,255,.16)}
.quick-contact__item--hotline{--quick-contact-accent:#ea580c;--quick-contact-accent-strong:#c2410c;--quick-contact-surface:linear-gradient(135deg,#fff7ed,#fef2f2);--quick-contact-border:#fed7aa;--quick-contact-border-hover:#fdba74;--quick-contact-shadow:rgba(234,88,12,.16)}
.quick-contact__item--live{--quick-contact-accent:#36a84d;--quick-contact-accent-strong:#2f8f43;--quick-contact-surface:linear-gradient(135deg,#f0fdf4,#ecfdf5);--quick-contact-border:#bbf7d0;--quick-contact-border-hover:#86efac;--quick-contact-shadow:rgba(54,168,77,.16)}
.quick-contact__toggle{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:radial-gradient(circle at top left,rgba(96,165,250,.38),transparent 34%),linear-gradient(135deg,#0f172a,#1d4ed8 52%,#0ea5e9);border:1px solid rgba(96,165,250,.32);border-radius:9999px;box-shadow:0 20px 50px rgba(29,78,216,.28);color:#fff;display:inline-flex;height:3.875rem;justify-content:center;-webkit-mask-image:-webkit-radial-gradient(#fff,#000);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;width:3.875rem}
.quick-contact__toggle:hover{box-shadow:0 24px 58px rgba(29,78,216,.36);filter:saturate(1.08);transform:translateY(-2px)}
.quick-contact.is-open .quick-contact__toggle{transform:scale(.98)}
@media (max-width:1023px){.quick-contact{bottom:1rem;left:1rem}.quick-contact__interest{margin-left:.2rem;min-width:12rem;padding:.8rem .9rem}.quick-contact__menu{width:min(18rem,calc(100vw - 2rem))}}
@media (max-width:767px){.quick-contact{align-items:flex-start;width:3.875rem}.quick-contact__interest{border-radius:9999px;gap:0;height:3.2rem;justify-content:center;margin-left:.3rem;max-width:none;min-width:0;padding:0;width:3.2rem}.quick-contact__interest-icon{height:2.35rem;width:2.35rem}.quick-contact__interest-tooltip{display:none}.quick-contact__interest-badge{font-size:.72rem;height:1.45rem;left:50%;line-height:1.45rem;min-width:1.45rem;right:auto;top:-.35rem;transform:translateX(-50%)}}

/* ---- Thanh trên cùng: logo mới + màu thương hiệu (navy #001435, xanh #0fa4fe) ---- */
html .switcher { background: #001435; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: none; }
html .switcher:after { display: none; }
html .switcher .woologo img { width: auto; height: 22px; }
html .switcher .magd { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.06); }
html .switcher .magd strong { color: rgba(255,255,255,.62); }
html .switcher .magd em { color: #0fa4fe; }
html .switcher .thuthietbi { color: rgba(255,255,255,.8); }
html .switcher .thuthietbi:before { color: #0fa4fe; }
html .switcher ul.respond a.active { background: rgba(15,164,254,.18); box-shadow: inset 0 0 0 1px rgba(15,164,254,.55); }
html .switcher ul.respond a.active:before { color: #fff !important; }
html .switcher .switcher-toggle:before { color: #fff; }
html.switcher-hidden .switcher .switcher-toggle { background: #001435; }
@media (max-width: 767px) { html .switcher .woologo img { height: 20px; } }