﻿/* Windows license page styles. Source structure: frontend/views/site/ban-quyen-windows/index.html */
.windows-license-page {
  --red-50:#FEECED; --red-100:#FCD3D5; --red-200:#F9A6AA; --red-300:#F5747A;
  --red-400:#F1414A; --red-500:#EE161F; --red-600:#D30E17; --red-700:#AE0B12;
  --gray-950:#0D0D0D; --gray-900:#1A1A1A; --gray-800:#2B2B2B; --gray-700:#404040;
  --gray-600:#595959; --gray-500:#737373; --gray-400:#9C9C9C; --gray-300:#C4C4C4;
  --gray-200:#E0E0E0; --gray-100:#EFEFEF; --gray-50:#F7F7F7; --white:#FFFFFF;
  --accent:var(--red-500); --accent-hover:var(--red-600); --accent-active:var(--red-700);
  --on-accent:var(--white); --text-heading:#000; --text-body:var(--gray-900);
  --text-secondary:var(--gray-600); --text-muted:var(--gray-500); --text-link:var(--red-600);
  --surface-page:var(--white); --surface-subtle:var(--gray-50); --surface-card:var(--white);
  --border-subtle:var(--gray-200); --border-strong:var(--gray-300);
  --font-display:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.06); --shadow-md:0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg:0 8px 24px rgba(0,0,0,0.14); --ease-out:cubic-bezier(0.2,0.8,0.2,1);
  color:var(--text-body); font-family:var(--font-body); font-size:16px; font-weight:400; line-height:1.55; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.windows-license-page *, .windows-license-page *::before, .windows-license-page *::after { box-sizing:border-box; }
.windows-license-page button, .windows-license-page a { font:inherit; }
.windows-license-page button,
.windows-license-page a,
.windows-license-page [role="button"] { outline:none; -webkit-tap-highlight-color:transparent; }
.windows-license-page button:focus,
.windows-license-page button:active,
.windows-license-page a:focus,
.windows-license-page a:active,
.windows-license-page [role="button"]:focus,
.windows-license-page [role="button"]:active { outline:none !important; box-shadow:none; }
.windows-license-page img { max-width:100%; }
.windows-license-page [hidden] { display:none !important; }
/* ============================================================
   Trang bản quyền Windows — phong cách Microsoft 365 Business
   ============================================================ */

/* ---- Hero ---- */
.wh { position:relative; background:linear-gradient(120deg,#FBEFF7 0%,#F1ECFA 32%,#EAF1FC 66%,#E6F8FD 100%); font-family:var(--font-body); overflow:hidden; }
.wh::before { content:""; position:absolute; top:-18%; left:-6%; width:44%; aspect-ratio:1/1; border-radius:50%; background:radial-gradient(circle, rgba(227,0,140,0.10) 0%, rgba(119,25,170,0.05) 46%, rgba(227,0,140,0) 72%); pointer-events:none; }
.wh::after { content:""; position:absolute; right:-10%; bottom:-30%; width:56%; aspect-ratio:1/1; border-radius:50%; background:radial-gradient(circle, rgba(80,230,255,0.20) 0%, rgba(0,120,212,0.09) 46%, rgba(0,120,212,0) 74%); pointer-events:none; }
.wh-in { position:relative; z-index:1; }
.wh-in { max-width:1200px; margin:0 auto; padding:26px 24px; box-sizing:border-box; }
.wh-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.wh-eyebrow { font-size:12.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); }
.wh-title { margin:10px 0 12px; max-width:520px; font-family:var(--font-display); font-size:34px; font-weight:800; line-height:1.12; letter-spacing:-0.02em; color:var(--text-heading); text-wrap:pretty; }
.wh-lead { margin:0 0 14px; max-width:470px; font-size:16px; line-height:1.6; color:var(--text-secondary); }
.wh-strip { display:flex; align-items:center; gap:16px; margin:0 0 16px; color:var(--gray-700); }
.wh-strip svg { flex:none; opacity:0.85; }
.wh-cta { display:inline-flex; align-items:center; gap:10px; white-space:nowrap; height:46px; padding:0 14px 0 28px; border-radius:999px; background:var(--accent); color:#fff; font-size:16px; font-weight:700; text-decoration:none; box-shadow:0 8px 18px -8px rgba(238,22,31,0.5); transition:background .15s var(--ease-out), box-shadow .15s var(--ease-out); }
.wh-cta:hover { background:var(--accent-hover); color:#fff; box-shadow:0 10px 24px -8px rgba(238,22,31,0.55); }
.wh-cta i { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.2); }

/* Orbit */
.wh-orbit { position:relative; width:100%; max-width:360px; aspect-ratio:1/1; justify-self:center; }
.wh-ring { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; border:1.5px dashed rgba(238,22,31,0.18); }
.wh-ring.r1 { width:44%; height:44%; }
.wh-ring.r2 { width:66%; height:66%; }
.wh-ring.r3 { width:88%; height:88%; }
.wh-orb { position:absolute; top:50%; left:50%; }
.wh-orb.r1 { width:44%; height:44%; }
.wh-orb.r2 { width:66%; height:66%; }
.wh-orb.r3 { width:88%; height:88%; }
.wh-spin { display:block; width:100%; height:100%; }
.wh-orb.r1 .wh-spin { animation:whOrbit 34s linear infinite; }
.wh-orb.r2 .wh-spin { animation:whOrbit 46s linear infinite; }
.wh-orb.r3 .wh-spin { animation:whOrbit 58s linear infinite; }
.wh-orb .wh-spin.ccw { animation-direction:reverse; }
.wh-sat { position:absolute; top:0; left:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:var(--white); box-shadow:var(--shadow-md); }
.wh-cc { display:flex; align-items:center; justify-content:center; }
.wh-orb.r1 .wh-cc { animation:whOrbit 34s linear infinite reverse; }
.wh-orb.r2 .wh-cc { animation:whOrbit 46s linear infinite reverse; }
.wh-orb.r3 .wh-cc { animation:whOrbit 58s linear infinite reverse; }
.wh-orb .wh-cc.cw { animation-direction:normal; }
.wh-orb .wh-cc.ccw { animation-direction:reverse; }
.wh-fix { display:flex; align-items:center; justify-content:center; }
.wh-fix img { display:block; object-fit:contain; }
@keyframes whOrbit { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wh-spin, .wh-cc { animation:none; } }
.wh-figure { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; width:96%; height:96%; }
.wh-figure img { display:block; width:100%; height:100%; object-fit:contain; }
.wh-figure-slot { display:flex; align-items:center; justify-content:center; width:100%; height:100%; padding:14px; border:1px dashed var(--gray-300); border-radius:50%; background:rgba(255,255,255,0.6); box-sizing:border-box; font-size:11px; line-height:1.4; color:var(--text-muted); text-align:center; }

/* ---- 3 SKU thương mại ---- */
.wsku-sec { background:var(--white); font-family:var(--font-body); }
.wsku-in { max-width:1200px; margin:0 auto; padding:80px 24px; box-sizing:border-box; }
.wsku-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px; }
.wsku { display:flex; flex-direction:column; border:1px solid var(--border-subtle); border-radius:12px; background:var(--surface-card); box-shadow:var(--shadow-sm); overflow:hidden; transition:box-shadow .18s var(--ease-out); }
.wsku:hover { box-shadow:var(--shadow-md); }
.wsku-head { padding:26px 26px 24px; text-align:center; }
.wsku-ic { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,0.22); color:#fff; }
.wsku-code { margin:12px 0 0; font-family:var(--font-display); font-size:30px; font-weight:800; letter-spacing:-0.01em; color:#fff; }
.wsku-sub { margin:6px 0 0; font-size:13px; font-style:italic; color:#fff; }
.wsku-body { flex:1; padding:24px 26px 28px; }
.wsku-lbl { margin:0 0 14px; font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.wsku-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.wsku-list li { display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.5; color:var(--text-body); }
.wsku-list li svg { flex:none; margin-top:2px; }

/* ---- Bảng giá ---- */
.wp { position:relative; background:linear-gradient(145deg,#EAF2E9 0%,#F7F2EC 22%,#FBE9E4 44%,#F6E7EF 62%,#EFE9F6 78%,#DCEAF4 100%); font-family:var(--font-body); overflow:hidden; }
.wp::before { content:""; position:absolute; left:-8%; top:-14%; width:46%; aspect-ratio:1/1; border-radius:50%; background:radial-gradient(circle, rgba(240,196,168,0.34) 0%, rgba(240,196,168,0) 70%); pointer-events:none; }
.wp::after { content:""; position:absolute; right:-10%; bottom:-24%; width:56%; aspect-ratio:1/1; border-radius:50%; background:radial-gradient(circle, rgba(168,206,232,0.36) 0%, rgba(168,206,232,0) 72%); pointer-events:none; }
.wp-in { position:relative; z-index:1; }
.wp-in { max-width:1200px; margin:0 auto; padding:72px 24px 80px; box-sizing:border-box; }
.wp-eyebrow { font-size:12.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); text-align:center; }
.wp-title { margin:10px 0 28px; font-family:var(--font-display); font-size:34px; font-weight:800; line-height:1.22; letter-spacing:-0.02em; color:var(--text-heading); text-align:center; text-wrap:balance; }
.wp-pills { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.wp-pill { padding:9px 20px; border-radius:999px; border:1px solid var(--border-strong); background:var(--white); font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--text-body); cursor:pointer; transition:background .15s var(--ease-out), color .15s var(--ease-out), border-color .15s var(--ease-out); }
.wp-pill:hover { border-color:var(--accent); color:var(--accent); }
.wp-pill.active { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

.wp-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:stretch; }
.wp-grid.cols-2 { grid-template-columns:repeat(2,1fr); max-width:640px; margin:0 auto; }
.wpc { position:relative; display:flex; flex-direction:column; min-width:0; padding:24px; border:1px solid var(--border-subtle); border-radius:12px; background:var(--surface-card); box-shadow:var(--shadow-sm); }
.wpc.popular { border:2px solid var(--accent); box-shadow:var(--shadow-lg); }
.wpc.is-hidden { display:none; }
.wpc-tag { position:absolute; top:-12px; left:24px; padding:5px 12px; border-radius:999px; background:var(--accent); font-size:11.5px; font-weight:700; color:#fff; }
.wpc-rings { display:flex; justify-content:center; margin:8px 0 18px; }
.wpc-r1 { display:flex; align-items:center; justify-content:center; width:176px; height:176px; border-radius:50%; }
.wpc-r2 { display:flex; align-items:center; justify-content:center; width:146px; height:146px; border-radius:50%; }
.wpc-r3 { display:flex; align-items:center; justify-content:center; width:118px; height:118px; border-radius:50%; }
.wpc-name { min-height:42px; font-size:16px; font-weight:700; line-height:1.3; color:var(--text-heading); text-align:center; }
.wpc-price { margin:14px 0 2px; font-family:var(--font-display); font-size:27px; font-weight:900; letter-spacing:-0.01em; color:var(--text-heading); text-align:center; }
.wpc-price-note { font-size:12.5px; color:var(--text-secondary); text-align:center; }
.wpc-pill-wrap { display:flex; justify-content:center; margin:14px 0 4px; }
.wpc-pill { display:inline-flex; align-items:center; gap:10px; padding:7px 16px; border-radius:999px; }
.wpc-pill b { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.wpc-pill i { width:1px; height:12px; background:var(--border-strong); }
.wpc-pill span { font-size:13px; font-weight:700; }
.wpc-btn { width:100%; margin:14px 0; padding:12px 16px; border:none; border-radius:8px; font-family:var(--font-body); font-size:14px; font-weight:700; color:#fff; cursor:pointer; transition:filter .15s var(--ease-out); }
.wpc-btn:hover { filter:brightness(1.07); }
.wpc-feats { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; flex:1; }
.wpc-feats li { display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.5; color:var(--text-body); }
.wpc-feats li svg { flex:none; margin-top:1px; }
.wpc-more { display:flex; align-items:center; gap:6px; padding:12px 0 0; border:none; background:none; font-family:var(--font-body); font-size:13px; font-weight:700; color:var(--text-link); cursor:pointer; }
.wpc-more svg { transition:transform .15s var(--ease-out); }
.wpc-more[aria-expanded="true"] svg { transform:rotate(180deg); }
.wpc-extra { display:none; flex-direction:column; gap:9px; padding-top:12px; }
.wpc-extra.open { display:flex; }
.wpc-extra span { display:flex; align-items:flex-start; gap:8px; font-size:12.5px; line-height:1.5; color:var(--text-secondary); }
.wpc-extra span::before { content:""; flex:none; width:5px; height:5px; margin-top:7px; border-radius:50%; background:var(--gray-400); }
.wp-foot { margin:28px 0 0; font-size:13px; line-height:1.6; color:var(--text-muted); text-align:center; }

@media (max-width: 1080px) {
  .wsku-grid { grid-template-columns:1fr; }
  .wp-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 900px) {
  .wh-grid { grid-template-columns:1fr; gap:40px; }
  .wh-in { padding:36px 24px 44px; }
  .wh-title { font-size:33px; }
  .wp-title { font-size:26px; }
}
@media (max-width: 620px) {
  .wp-grid, .wp-grid.cols-2 { grid-template-columns:1fr; }
  .wh-strip { flex-wrap:wrap; gap:14px; }
}

/* ---- Giá trị mang lại ---- */
.wval-sec { background:#FFFCFA; font-family:var(--font-body); }
.wval-in { max-width:1280px; margin:0 auto; padding:48px 24px 40px; box-sizing:border-box; }
.wval-title { margin:0 auto; max-width:940px; font-family:var(--font-display); font-size:36px; font-weight:800; line-height:1.24; letter-spacing:-0.02em; color:var(--text-heading); text-align:center; text-wrap:balance; }

/* Sân khấu dùng chiều cao cố định để vòng tròn, tâm và đường nối luôn khớp nhau */
.wval-stage { position:relative; margin:12px auto 0; width:100%; max-width:1180px; height:520px; }
.wval-ring { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(37,99,235,0.10); }
.wval-ring.o1 { background:rgba(37,99,235,0.045); }
.wval-ring.o2 { background:rgba(37,99,235,0.028); }
.wval-ring.o3 { background:rgba(37,99,235,0.016); }
.wval-ring.o1 { width:290px; height:290px; }
.wval-ring.o2 { width:392px; height:392px; }
.wval-ring.o3 { width:466px; height:466px; }
.wval-dot { position:absolute; transform:translate(-50%,-50%); width:11px; height:11px; border-radius:50%; }
.wval-avatar { position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; width:76px; height:76px; border-radius:50%; border:3px solid var(--white); background:var(--gray-100); box-shadow:var(--shadow-sm); overflow:hidden; }
.wval-avatar.sm { width:58px; height:58px; }
.wval-avatar span { font-size:9.5px; line-height:1.25; color:var(--text-muted); text-align:center; }
.wval-avatar img { width:100%; height:100%; object-fit:cover; }

.wval-core { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; display:flex; align-items:center; justify-content:center; width:285px; height:285px; }
.wval-core-art { display:flex; align-items:center; justify-content:center; width:100%; height:100%; padding:26px; border-radius:50%; background:var(--gray-50); border:1px dashed var(--gray-300); box-sizing:border-box; font-size:12px; line-height:1.5; color:var(--text-muted); text-align:center; }
.wval-core img { width:100%; height:100%; object-fit:contain; display:block; }

/* Cột thẻ: rộng cố định để đường nối 44px luôn dừng trước vòng tâm */
.wval-col { position:absolute; top:50%; transform:translateY(-50%); z-index:1; display:flex; flex-direction:column; gap:34px; width:340px; }
.wval-col.left { left:0; }
.wval-col.right { right:0; }
.wval { position:relative; display:flex; gap:16px; padding:24px 26px; border-radius:14px; background:var(--white); box-shadow:0 10px 30px -12px rgba(9,12,20,0.14), 0 2px 8px rgba(9,12,20,0.05); }
.wval::after { content:""; position:absolute; top:50%; width:32px; height:1px; background:var(--gray-200); }
.wval-left::after { right:-32px; }
.wval-right::after { left:-32px; }
.wval-ic { flex:none; display:flex; align-items:flex-start; justify-content:center; padding-top:2px; }
.wval-ic img { display:block; object-fit:contain; }
.wval-txt { min-width:0; }
.wval-name { margin:0 0 8px; font-size:17px; font-weight:700; line-height:1.35; color:var(--text-heading); }
.wval-desc { margin:0; font-size:13.5px; line-height:1.62; color:var(--text-secondary); }

/* Dưới 1180px: bỏ dựng vòng tròn, xếp thành lưới để không bị chồng lấn */
@media (max-width: 1180px) {
  .wval-stage { height:auto; display:grid; grid-template-columns:1fr 1fr; gap:26px; max-width:780px; }
  .wval-ring, .wval-dot, .wval-avatar { display:none; }
  .wval-core { position:static; transform:none; grid-column:1 / -1; width:260px; height:260px; margin:0 auto 8px; }
  .wval-col { position:static; transform:none; width:auto; gap:24px; }
  .wval::after { display:none; }
}
@media (max-width: 620px) {
  .wval-title { font-size:26px; }
  .wval-stage { grid-template-columns:1fr; }
  .wval-in { padding:40px 24px 44px; }
}

/* ---- CTA băng ngang ---- */
.wcta-sec { position:relative; z-index:2; margin:-134px 0; padding:0 24px; box-sizing:border-box; background:transparent; font-family:var(--font-body); }
.wcta { position:relative; max-width:1140px; min-height:268px; display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0 auto; padding:48px; box-sizing:border-box; border-radius:10px; background:url("../../upload/windows/cta-bg.png") center/cover no-repeat, #A8DAF5; overflow:hidden; text-align:center; }
.wcta-ic { position:absolute; display:block; pointer-events:none; }
.wcta-ic.win { left:34px; top:50%; transform:translateY(-50%); width:104px; }
.wcta-ic.msft { right:44px; top:26px; width:52px; }
.wcta-title { position:relative; z-index:1; margin:0 auto; max-width:740px; font-family:var(--font-display); font-size:29px; font-weight:800; line-height:1.34; letter-spacing:-0.01em; color:var(--text-heading); text-wrap:balance; }
.wcta-btn { position:relative; z-index:1; display:inline-flex; align-items:center; gap:12px; white-space:nowrap; margin-top:26px; height:52px; padding:0 10px 0 28px; border:none; border-radius:999px; background:var(--accent); font-family:var(--font-body); font-size:16px; font-weight:700; color:#fff; cursor:pointer; transition:background .15s var(--ease-out); }
.wcta-btn:hover { background:var(--accent-hover); }
.wcta-btn span { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.22); }

/* ---- Windows 11 nâng cấp ---- */
.wup-sec { background:#FFFCFA; font-family:var(--font-body); }
.wup-in { max-width:1200px; margin:0 auto; padding:72px 24px 80px; box-sizing:border-box; }
.wup-title { margin:0 auto; max-width:900px; font-family:var(--font-display); font-size:34px; font-weight:800; line-height:1.26; letter-spacing:-0.02em; color:var(--text-heading); text-align:center; text-wrap:balance; }
.wup-grid { display:grid; grid-template-columns:1fr 1.08fr; gap:48px; align-items:center; margin-top:48px; }
.wup-media { position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; }
.wup-media img { position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block; }
.wup-halo { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; }
.wup-halo.h1 { width:58%; height:58%; background:rgba(96,120,240,0.16); }
.wup-halo.h2 { width:76%; height:76%; background:rgba(96,140,246,0.11); }
.wup-halo.h3 { width:94%; height:94%; background:rgba(120,160,250,0.07); }
.wup-media-slot { display:flex; align-items:center; justify-content:center; width:100%; height:100%; padding:24px; border:1px dashed var(--gray-300); border-radius:10px; background:var(--surface-subtle); box-sizing:border-box; font-size:12.5px; line-height:1.5; color:var(--text-muted); text-align:center; }
.wup-cards { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.wup-card { display:flex; flex-direction:column; gap:14px; padding:30px 28px 32px; border:1px solid var(--gray-100); border-radius:14px; background:var(--white); box-shadow:0 12px 32px -14px rgba(9,12,20,0.16), 0 2px 6px rgba(9,12,20,0.04); transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.wup-card:hover { transform:translateY(-3px); box-shadow:0 20px 44px -16px rgba(9,12,20,0.22), 0 3px 8px rgba(9,12,20,0.05); }
.wup-ic { display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:16px; margin-bottom:2px; }
.wup-name { margin:0; font-size:17.5px; font-weight:700; line-height:1.3; letter-spacing:-0.01em; color:var(--text-heading); }
.wup-desc { margin:0; font-size:14px; line-height:1.65; color:var(--text-secondary); }
.wup-foot { grid-column:1 / -1; display:flex; justify-content:flex-end; }
.wup-btn { display:inline-flex; align-items:center; gap:12px; white-space:nowrap; height:50px; padding:0 10px 0 26px; border:none; border-radius:999px; background:var(--accent); font-family:var(--font-body); font-size:15.5px; font-weight:700; color:#fff; cursor:pointer; transition:background .15s var(--ease-out); }
.wup-btn:hover { background:var(--accent-hover); }
.wup-btn span { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.22); }

@media (max-width: 980px) {
  .wup-grid { grid-template-columns:1fr; gap:36px; }
  .wp-in { padding:56px 24px 64px; }
  .wup-in { padding:56px 24px 60px; }
  .wup-media { max-width:460px; margin:0 auto; }
  .wcta { min-height:0; padding:40px 24px; }
  .wcta-ic.win { width:64px; left:12px; }
  .wcta-ic.msft { width:36px; right:16px; top:16px; }
  .wcta-title { font-size:24px; }
  .wup-title { font-size:26px; }
}
@media (max-width: 620px) {
  .wup-cards { grid-template-columns:1fr; }
  .wup-foot { justify-content:stretch; }
  .wup-btn { width:100%; justify-content:center; }
  .wup-in { padding:56px 24px; }
}

.windows-license-page .wpc { transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out); }
.windows-license-page .wpc:hover { transform:translateY(-4px); box-shadow:0 20px 44px -16px rgba(9,12,20,0.22), 0 3px 8px rgba(9,12,20,0.05); }
.windows-license-page .wpc-btn { transition:filter .18s var(--ease-out), transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.windows-license-page .wpc-btn:hover { filter:brightness(1.06); transform:translateY(-1px); }
.windows-license-page .wh-cta, .windows-license-page .wup-btn { text-decoration:none; transition:background .18s var(--ease-out), box-shadow .18s var(--ease-out), transform .18s var(--ease-out); }
.windows-license-page .wh-cta:hover, .windows-license-page .wup-btn:hover { transform:translateY(-1px); text-decoration:none; }
.windows-license-page .wpc-r3 { overflow:visible; position:relative; }
.windows-license-page .wpc-product-img { bottom:0; display:block; height:200px; left:50%; max-width:none; object-fit:contain; position:absolute; transform:translateX(-50%); width:auto; z-index:4; }
.windows-license-page .wh-fix img { display:block; width:34px !important; height:34px !important; max-width:34px !important; max-height:34px !important; object-fit:contain; }
.windows-license-page .wval-ic { width:58px; height:58px; align-items:center; justify-content:center; }
.windows-license-page .wval-ic img { display:block; width:58px !important; height:58px !important; max-width:58px !important; max-height:58px !important; object-fit:contain; }
.windows-license-page .wval-ic img[width="52"] { width:52px !important; height:52px !important; max-width:52px !important; max-height:52px !important; }
.windows-license-page .ms-articles-section { margin-top:0; }
.windows-license-page .wh-grid > * { min-width:0; }
.windows-license-page .wh-title,
.windows-license-page .wh-lead { max-width:100%; overflow-wrap:break-word; }
@media (max-width:620px) {
  .windows-license-page .wh-title { font-size:30px; }
  .windows-license-page .wh-orbit { max-width:320px; }
  .windows-license-page .wpc { padding:22px 18px; }
}
