/* ==========================================================================
   UNIPRO — xưởng may đồng phục. Navy #14306B · vàng CTA #FFC531 · xám nhạt #F3F5F9
   Font: Montserrat (tiêu đề) + Inter (nội dung).
   ========================================================================== */
:root {
  --up-navy: #14306B;
  --up-navy-900: #0B1D45;
  --up-navy-700: #1E4290;
  --up-navy-50: #E9EEF8;
  --up-yellow: #FFC531;
  --up-yellow-600: #F0B000;
  --up-yellow-50: #FFF6DC;
  --up-gray: #F3F5F9;
  --up-border: #DFE5EF;
  --up-text: #1A2233;
  --up-muted: #56617A;
  --up-ok: #12804A;
  --up-err: #B3261E;
  --up-radius: 14px;
  --up-radius-sm: 10px;
  --up-shadow: 0 1px 2px rgba(11, 29, 69, .06), 0 4px 14px rgba(11, 29, 69, .06);
  --up-shadow-lg: 0 18px 50px rgba(11, 29, 69, .16);
  --up-head: "Montserrat", "Inter", system-ui, sans-serif;
  --up-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --up-gap: clamp(1rem, 2.4vw, 1.75rem);
  --up-sec: clamp(3.25rem, 7vw, 6rem);
  --mtop-primary: #14306B;
  --mtop-accent: #FFC531;
  --mtop-font: var(--up-body);
}

/* ---------- Nền tảng ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body.unipro { margin: 0; font-family: var(--up-body); font-size: 16px; line-height: 1.65; color: var(--up-text); background: #fff; -webkit-font-smoothing: antialiased; }
.unipro *, .unipro *::before, .unipro *::after { box-sizing: border-box; }
.unipro img { max-width: 100%; height: auto; display: block; }
:where(.unipro) a { color: var(--up-navy-700); }
:where(.unipro) :is(h1, h2, h3, h4) { font-family: var(--up-head); color: var(--up-navy); line-height: 1.22; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; }
:where(.unipro) h2 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); }
:where(.unipro) h3 { font-size: 1.125rem; font-weight: 700; }
:where(.unipro) p { margin: 0 0 1rem; }
.unipro button, .unipro input, .unipro select, .unipro textarea { font: inherit; }
.unipro :focus-visible { outline: 3px solid var(--up-yellow); outline-offset: 2px; }
.up-lock { overflow: hidden; }
.unipro [hidden] { display: none !important; }
.up-container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.up-narrow { max-width: 820px; }
.up-section { padding-block: var(--up-sec); }
.up-section--tight { padding-block: clamp(2rem, 4vw, 3.25rem); }
.up-section--gray { background: var(--up-gray); }
.up-small { font-size: .875rem; color: var(--up-muted); }
.up-small .up-ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.up-muted { color: var(--up-muted); }
.up-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.up-ico { width: 22px; height: 22px; flex: none; }
.up-h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); margin-bottom: 1.25rem; }
.up-empty { padding: 2rem; text-align: center; background: var(--up-gray); border-radius: var(--up-radius); }

.up-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--up-head); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--up-navy-700); margin-bottom: .75rem; }
.up-eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--up-yellow); }
.up-eyebrow--light { color: var(--up-yellow); }
.up-head { text-align: center; max-width: 760px; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.up-head p { color: var(--up-muted); font-size: 1.05rem; margin: 0; }
.up-head--left { text-align: left; margin-inline: 0; }
.up-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; max-width: none; text-align: left; margin-bottom: 1.25rem; flex-wrap: wrap; }
.up-head--row h2 { margin: 0; max-width: 680px; }
.up-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--up-navy); text-decoration: none; }
.up-link .up-ico { width: 18px; height: 18px; transition: transform .2s; }
.up-link:hover .up-ico { transform: translateX(3px); }

/* ---------- Nút ---------- */
.up-btn { --bg: var(--up-yellow); --fg: var(--up-navy-900); --bd: var(--up-yellow); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .7rem 1.35rem; border-radius: var(--up-radius-sm); border: 2px solid var(--bd); background: var(--bg); color: var(--fg) !important; font-family: var(--up-head); font-weight: 800; font-size: .95rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .18s, border-color .18s, transform .12s, box-shadow .18s; text-align: center; }
.up-btn:hover { --bg: var(--up-yellow-600); --bd: var(--up-yellow-600); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(240, 176, 0, .28); }
.up-btn:active { transform: none; }
.up-btn:disabled { opacity: .7; cursor: progress; transform: none; }
.up-btn .up-ico { width: 19px; height: 19px; }
.up-btn--navy { --bg: var(--up-navy); --fg: #fff; --bd: var(--up-navy); }
.up-btn--navy:hover { --bg: var(--up-navy-900); --bd: var(--up-navy-900); box-shadow: 0 8px 20px rgba(20, 48, 107, .25); }
.up-btn--outline { --bg: #fff; --fg: var(--up-navy); --bd: var(--up-border); }
.up-btn--outline:hover { --bg: var(--up-navy-50); --bd: var(--up-navy); box-shadow: none; }
.up-btn--ghost { --bg: transparent; --fg: #fff; --bd: rgba(255, 255, 255, .55); }
.up-btn--ghost:hover { --bg: rgba(255, 255, 255, .12); --bd: #fff; box-shadow: none; }
.up-btn--sm { min-height: 38px; padding: .45rem .9rem; font-size: .85rem; }
.up-btn--lg { min-height: 54px; padding: .85rem 1.6rem; font-size: 1.02rem; }
.up-btn--block { width: 100%; }
.up-linkbtn { background: none; border: 0; padding: .35rem 0; color: var(--up-navy-700); font-weight: 600; font-size: .9rem; text-decoration: underline; cursor: pointer; }

/* ---------- Thanh trên + header ---------- */
.up-topbar { background: var(--up-navy-900); color: #DCE4F5; font-size: .82rem; }
.up-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; }
.up-topbar__msg { display: flex; align-items: center; gap: .45rem; margin: 0; }
.up-topbar__msg .up-ico { width: 16px; height: 16px; color: var(--up-yellow); }
.up-topbar__msg strong { color: #fff; }
.up-topbar__links { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.up-topbar__links li { display: flex; align-items: center; gap: .35rem; }
.up-topbar__links .up-ico { width: 15px; height: 15px; color: var(--up-yellow); }
.up-topbar a { color: #fff; text-decoration: none; }
.up-topbar a:hover { text-decoration: underline; }

.up-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--up-border); transition: box-shadow .2s; }
.up-header.is-stuck { box-shadow: 0 6px 24px rgba(11, 29, 69, .09); }
.up-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; }
.up-logo { display: inline-flex; text-decoration: none; flex: none; }
.up-logo__inner { display: inline-flex; align-items: center; gap: .6rem; }
.up-logo__text { display: flex; flex-direction: column; line-height: 1; }
.up-logo__word { font-family: var(--up-head); font-weight: 800; font-size: 1.45rem; letter-spacing: .04em; color: var(--up-navy); }
.up-logo__sub { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--up-muted); margin-top: 4px; }
.up-logo__inner--light .up-logo__word { color: #fff; }
.up-logo__inner--light .up-logo__sub { color: #AFC0E3; }

.up-nav { flex: 1; display: flex; justify-content: center; }
.up-menu { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.up-menu > li { position: relative; }
.up-menu > li > a { white-space: nowrap; display: inline-flex; align-items: center; gap: .25rem; padding: .65rem .8rem; font-family: var(--up-head); font-weight: 700; font-size: .93rem; color: var(--up-navy); text-decoration: none; border-radius: 8px; }
.up-menu > li > a:hover, .up-menu > li.current-menu-item > a, .up-menu > li.current-menu-ancestor > a { background: var(--up-navy-50); }
.up-menu__caret { width: 16px; height: 16px; transition: transform .2s; }
.up-menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 280px; list-style: none; margin: 0; padding: .5rem; background: #fff; border: 1px solid var(--up-border); border-radius: var(--up-radius); box-shadow: var(--up-shadow-lg); opacity: 0; visibility: hidden; transform: translateY(8px); transition: .18s; }
.up-menu li:hover > .sub-menu, .up-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.up-menu li:hover .up-menu__caret { transform: rotate(180deg); }
.up-menu .sub-menu a { display: block; padding: .6rem .8rem; border-radius: 8px; color: var(--up-text); font-weight: 600; font-size: .92rem; text-decoration: none; }
.up-menu .sub-menu a:hover { background: var(--up-gray); color: var(--up-navy); }

.up-header__actions { display: flex; align-items: center; gap: .9rem; margin-left: auto; }
.up-header__phone { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--up-navy); }
.up-header__phone-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--up-navy-50); color: var(--up-navy); }
.up-header__phone-ico .up-ico { width: 20px; height: 20px; }
.up-header__phone-txt { display: flex; flex-direction: column; line-height: 1.15; }
.up-header__phone-txt small { font-size: .72rem; color: var(--up-muted); }
.up-header__phone-txt strong { font-family: var(--up-head); font-size: 1.05rem; white-space: nowrap; }
.up-header__cta { white-space: nowrap; }
.up-burger, .up-iconbtn { display: none; place-items: center; width: 44px; height: 44px; border: 1px solid var(--up-border); border-radius: 10px; background: #fff; color: var(--up-navy); cursor: pointer; }
.up-iconbtn { display: grid; }

.up-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(11, 29, 69, .5); }
.up-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 100; width: min(360px, 88vw); background: #fff; display: flex; flex-direction: column; transform: translateX(-102%); transition: transform .25s ease; visibility: hidden; }
.up-drawer.is-open { transform: none; visibility: visible; }
.up-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid var(--up-border); }
.up-drawer__body { flex: 1; overflow: auto; padding: .5rem 1rem 1.5rem; }
.up-mmenu { list-style: none; margin: 0; padding: 0; }
.up-mmenu li { position: relative; border-bottom: 1px solid var(--up-border); }
.up-mmenu a { display: block; padding: .9rem 2.75rem .9rem 0; color: var(--up-navy); font-family: var(--up-head); font-weight: 700; text-decoration: none; }
.up-mmenu .sub-menu { list-style: none; margin: 0 0 .5rem; padding: 0 0 0 .9rem; }
.up-mmenu .sub-menu li { border: 0; }
.up-mmenu .sub-menu a { padding: .55rem 0; font-weight: 600; font-family: var(--up-body); color: var(--up-text); }
.up-mmenu__toggle { position: absolute; right: 0; top: .35rem; width: 40px; height: 40px; border: 0; background: var(--up-gray); border-radius: 8px; color: var(--up-navy); display: grid; place-items: center; cursor: pointer; }
.up-mmenu__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.up-drawer__cta { display: grid; gap: .6rem; margin-top: 1.25rem; }

/* ---------- Biểu mẫu ---------- */
.up-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; border: 0; margin: 0; padding: 0; }
.up-field > label, .up-label, .up-field--group > legend { font-weight: 600; font-size: .88rem; color: var(--up-navy); padding: 0; }
.up-field abbr { color: var(--up-err); text-decoration: none; }
.up-field input, .up-field select, .up-field textarea, .up-inline-form input { width: 100%; min-height: 48px; padding: .7rem .9rem; border: 1.5px solid var(--up-border); border-radius: var(--up-radius-sm); background: #fff; color: var(--up-text); transition: border-color .15s, box-shadow .15s; }
.up-field textarea { min-height: 90px; resize: vertical; }
.up-field input:focus, .up-field select:focus, .up-field textarea:focus, .up-inline-form input:focus { outline: none; border-color: var(--up-navy-700); box-shadow: 0 0 0 4px rgba(30, 66, 144, .14); }
.up-field [aria-invalid="true"] { border-color: var(--up-err); }
.up-ferr { margin: .1rem 0 0; color: var(--up-err); font-size: .82rem; font-weight: 600; }
.up-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.up-fgrid--2 { grid-template-columns: 1fr 1fr; }
.up-field--full { grid-column: 1 / -1; }
.up-form-msg { margin: .6rem 0 0; font-size: .92rem; font-weight: 600; }
.up-form-msg:empty { display: none; }
.up-form-msg.is-ok { padding: .8rem 1rem; border-radius: var(--up-radius-sm); background: #E4F6EC; color: var(--up-ok); }
.up-form-msg.is-err { padding: .8rem 1rem; border-radius: var(--up-radius-sm); background: #FBE9E8; color: var(--up-err); }

.up-chipset { display: flex; flex-wrap: wrap; gap: .5rem; }
.up-chip { position: relative; cursor: pointer; }
.up-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.up-chip span { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .45rem .85rem; border: 1.5px solid var(--up-border); border-radius: 999px; background: #fff; font-size: .88rem; font-weight: 600; color: var(--up-text); transition: .15s; }
.up-chip .up-ico { width: 18px; height: 18px; color: var(--up-navy-700); }
.up-chip input:checked + span { border-color: var(--up-navy); background: var(--up-navy); color: #fff; }
.up-chip input:checked + span .up-ico { color: var(--up-yellow); }
.up-chip input:focus-visible + span { outline: 3px solid var(--up-yellow); outline-offset: 2px; }
.up-chip--check input:checked + span::before { content: "✓"; font-weight: 800; color: var(--up-yellow); }

.up-qtychips { display: flex; flex-wrap: wrap; gap: .4rem; }
.up-qtychips button { min-height: 34px; padding: .3rem .8rem; border: 1px dashed #B9C5DB; border-radius: 8px; background: var(--up-gray); color: var(--up-navy); font-weight: 700; font-size: .85rem; cursor: pointer; }
.up-qtychips button:hover, .up-qtychips button.is-on { border-style: solid; border-color: var(--up-navy); background: var(--up-navy-50); }

.up-drop { position: relative; display: block; border: 2px dashed #B9C5DB; border-radius: var(--up-radius); background: var(--up-gray); padding: 1.25rem; text-align: center; cursor: pointer; transition: .15s; }
.up-drop:hover, .up-drop.is-over { border-color: var(--up-navy); background: var(--up-navy-50); }
.up-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.up-drop__empty { display: flex; flex-direction: column; align-items: center; gap: .25rem; color: var(--up-navy); pointer-events: none; }
.up-drop__empty .up-ico { width: 30px; height: 30px; color: var(--up-navy-700); }
.up-drop__empty small { color: var(--up-muted); }
.up-drop__file { display: flex; align-items: center; gap: .75rem; justify-content: center; pointer-events: none; font-weight: 600; color: var(--up-navy); word-break: break-all; }
.up-drop__file img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid var(--up-border); padding: 4px; }
.up-drop--sm { padding: 1rem; }

/* ---------- Hero ---------- */
.up-hero { position: relative; isolation: isolate; color: #fff; overflow: hidden; background: var(--up-navy-900); }
.up-hero__bg { position: absolute; inset: 0; z-index: -2; }
.up-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.up-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(11, 29, 69, .96) 0%, rgba(20, 48, 107, .9) 45%, rgba(20, 48, 107, .55) 100%); }
.up-hero__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; padding-block: clamp(3rem, 7vw, 5.5rem); }
.up-hero h1 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.12; margin-bottom: 1.1rem; }
.up-hero h1 em { font-style: normal; color: var(--up-yellow); }
.up-hero__lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: #DCE4F5; max-width: 600px; }
.up-hero__lead strong { color: #fff; }
.up-hero__promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1.25rem; list-style: none; margin: 1.75rem 0; padding: 0; max-width: 600px; }
.up-hero__promises li { display: flex; align-items: center; gap: .7rem; }
.up-hero__pico { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: rgba(255, 197, 49, .16); color: var(--up-yellow); }
.up-hero__promises strong { display: block; font-family: var(--up-head); font-size: .98rem; color: #fff; }
.up-hero__promises small { color: #B9C7E4; font-size: .82rem; }
.up-hero__links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.up-hero__call { display: inline-flex; align-items: center; gap: .5rem; color: #fff !important; font-weight: 700; text-decoration: none; }
.up-hero__call .up-ico { color: var(--up-yellow); }
.up-hero__call:hover { text-decoration: underline; }

/* Form báo giá nhanh */
.up-qform { background: #fff; color: var(--up-text); border-radius: 20px; padding: clamp(1.25rem, 2.6vw, 1.85rem); box-shadow: var(--up-shadow-lg); border-top: 6px solid var(--up-yellow); display: grid; gap: 1rem; }
.up-qform__title { font-size: 1.35rem; margin: 0; }
.up-qform__types { border: 0; margin: 0; padding: 0; min-width: 0; }
.up-qform__types legend { font-weight: 600; font-size: .88rem; color: var(--up-navy); margin-bottom: .45rem; padding: 0; }
.up-qform__types .up-chip span { padding: .4rem .7rem; font-size: .82rem; }
.up-qform__row { display: grid; grid-template-columns: 1fr 1.2fr; gap: .75rem; }
.up-qform__estimate, .up-qm-estimate { margin: 0; padding: .7rem .9rem; border-radius: var(--up-radius-sm); background: var(--up-yellow-50); color: #6B4E00; font-size: .87rem; font-weight: 600; }
.up-qform__estimate.is-warn, .up-qm-estimate.is-warn { background: #FBE9E8; color: var(--up-err); }
.up-qm-estimate:empty { display: none; }
.up-qform__note { margin: 0; display: flex; align-items: center; justify-content: center; gap: .35rem; font-size: .8rem; color: var(--up-muted); }
.up-qform__note .up-ico { width: 16px; height: 16px; color: var(--up-ok); }

/* ---------- Danh mục ---------- */
.up-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--up-gap); }
.up-cat { position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--up-border); text-decoration: none; color: var(--up-text); box-shadow: var(--up-shadow); transition: transform .2s, box-shadow .2s; }
.up-cat:hover { transform: translateY(-4px); box-shadow: var(--up-shadow-lg); }
.up-cat__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--up-gray); }
.up-cat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.up-cat:hover .up-cat__media img { transform: scale(1.05); }
.up-cat__body { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 2rem 1.25rem 1.25rem; flex: 1; }
.up-cat__ico { position: absolute; top: -26px; left: 1.25rem; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--up-yellow); color: var(--up-navy); box-shadow: 0 6px 16px rgba(240, 176, 0, .35); }
.up-cat__ico .up-ico { width: 26px; height: 26px; }
.up-cat__name { font-family: var(--up-head); font-weight: 800; font-size: 1.15rem; color: var(--up-navy); }
.up-cat__desc { color: var(--up-muted); font-size: .93rem; flex: 1; }
.up-cat__more { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; font-weight: 700; color: var(--up-navy-700); font-size: .9rem; }
.up-cat__more .up-ico { width: 17px; height: 17px; transition: transform .2s; }
.up-cat:hover .up-cat__more .up-ico { transform: translateX(4px); }

/* ---------- Quy trình ---------- */
.up-steps { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; counter-reset: s; }
.up-steps::before { content: ""; position: absolute; top: 36px; left: 8%; right: 8%; height: 2px; background: repeating-linear-gradient(90deg, #B9C5DB 0 8px, transparent 8px 14px); }
.up-step { position: relative; text-align: center; }
.up-step__ico { position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 50%; background: #fff; border: 2px solid var(--up-navy); color: var(--up-navy); box-shadow: 0 0 0 8px var(--up-gray); transition: .2s; }
.up-step__ico .up-ico { width: 30px; height: 30px; }
.up-step:hover .up-step__ico { background: var(--up-navy); color: var(--up-yellow); }
.up-step__num { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--up-yellow); color: var(--up-navy); font-family: var(--up-head); font-weight: 800; font-size: .8rem; }
.up-step__title { font-size: 1.05rem; margin-bottom: .35rem; }
.up-step p { font-size: .88rem; color: var(--up-muted); margin-bottom: .6rem; }
.up-step__time { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; background: #fff; border: 1px solid var(--up-border); font-size: .78rem; font-weight: 700; color: var(--up-navy); }
.up-step__time .up-ico { width: 14px; height: 14px; }

/* ---------- Bảng giá ---------- */
.up-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--up-gap); align-items: stretch; }
.up-tier { position: relative; display: flex; flex-direction: column; padding: 2rem 1.6rem 1.6rem; border-radius: 20px; background: #fff; border: 1.5px solid var(--up-border); box-shadow: var(--up-shadow); }
.up-tier--hot { background: var(--up-navy); border-color: var(--up-navy); color: #DCE4F5; transform: translateY(-10px); box-shadow: var(--up-shadow-lg); }
.up-tier__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: .3rem .9rem; border-radius: 999px; background: var(--up-yellow); color: var(--up-navy); font-family: var(--up-head); font-weight: 800; font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.up-tier__label { margin: 0 0 .2rem; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--up-navy-700); }
.up-tier--hot .up-tier__label { color: var(--up-yellow); }
.up-tier__range { font-size: 1.5rem; margin-bottom: .75rem; }
.up-tier--hot .up-tier__range { color: #fff; }
.up-tier__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem; margin: 0 0 .25rem; }
.up-tier__price span { font-size: .85rem; color: var(--up-muted); width: 100%; }
.up-tier--hot .up-tier__price span { color: #AFC0E3; }
.up-tier__price strong { font-family: var(--up-head); font-size: 2.2rem; font-weight: 800; color: var(--up-navy); line-height: 1; }
.up-tier--hot .up-tier__price strong { color: var(--up-yellow); }
.up-tier__price small { color: var(--up-muted); }
.up-tier--hot .up-tier__price small { color: #AFC0E3; }
.up-tier__note { font-size: .88rem; color: var(--up-muted); padding-bottom: 1rem; border-bottom: 1px dashed var(--up-border); }
.up-tier--hot .up-tier__note { color: #C3D0EC; border-color: rgba(255, 255, 255, .2); }
.up-tier .up-checks { flex: 1; margin: 1rem 0 1.5rem; }
.up-tier--hot .up-checks li { color: #fff; }

.up-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.up-checks li { display: flex; gap: .55rem; align-items: flex-start; font-size: .95rem; }
.up-checks .up-ico { width: 20px; height: 20px; flex: none; padding: 3px; border-radius: 50%; background: #E4F6EC; color: var(--up-ok); stroke-width: 3; }
.up-tier--hot .up-checks .up-ico, .up-checks--light .up-ico { background: rgba(255, 197, 49, .18); color: var(--up-yellow); }
.up-checks--light li { color: #E6ECF8; }
.up-checks--sm li { font-size: .9rem; }

.up-pricetable { margin-top: 2.5rem; border: 1px solid var(--up-border); border-radius: var(--up-radius); background: #fff; }
.up-pricetable summary { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem; font-family: var(--up-head); font-weight: 700; color: var(--up-navy); cursor: pointer; list-style: none; }
.up-pricetable summary::-webkit-details-marker { display: none; }
.up-pricetable__caret { margin-left: auto; transition: transform .2s; }
.up-pricetable[open] .up-pricetable__caret { transform: rotate(180deg); }
.up-pricetable .up-tablewrap { padding: 0 1.25rem; }
.up-pricetable .up-small { padding: .75rem 1.25rem 1.25rem; margin: 0; }
.up-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.up-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 520px; }
.up-table caption { text-align: left; font-weight: 700; color: var(--up-navy); padding: .5rem 0 .75rem; }
.up-table th, .up-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--up-border); text-align: center; }
.up-table thead th { background: var(--up-navy); color: #fff; font-family: var(--up-head); font-size: .88rem; }
.up-table thead th:first-child { border-top-left-radius: 10px; text-align: left; }
.up-table thead th:last-child { border-top-right-radius: 10px; }
.up-table tbody th { text-align: left; font-weight: 600; color: var(--up-navy); }
.up-table tbody tr:nth-child(even) { background: var(--up-gray); }
.up-table td strong { color: var(--up-ok); }

/* ---------- Vải & kỹ thuật ---------- */
.up-tabs__list { display: flex; justify-content: center; gap: .5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.up-tabs__list [role="tab"] { display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: .55rem 1.2rem; border: 1.5px solid var(--up-border); border-radius: 999px; background: #fff; color: var(--up-navy); font-family: var(--up-head); font-weight: 700; cursor: pointer; }
.up-tabs__list [role="tab"][aria-selected="true"] { background: var(--up-navy); border-color: var(--up-navy); color: #fff; }
.up-tabs__list [role="tab"][aria-selected="true"] .up-ico { color: var(--up-yellow); }
.up-fabrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--up-gap); }
.up-fabric { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--up-border); box-shadow: var(--up-shadow); }
.up-fabric__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--up-gray); }
.up-fabric__media img { width: 100%; height: 100%; object-fit: cover; }
.up-fabric__body { padding: 1.35rem; display: flex; flex-direction: column; flex: 1; }
.up-fabric__body h3 { font-size: 1.2rem; margin-bottom: .25rem; }
.up-fabric__body > p { font-size: .93rem; color: var(--up-muted); }
.up-fabric__tag { display: inline-block; align-self: flex-start; padding: .2rem .6rem; border-radius: 6px; background: var(--up-yellow-50); color: #6B4E00 !important; font-size: .78rem !important; font-weight: 700; }
.up-rating { display: grid; gap: .45rem; margin: auto 0 0; }
.up-rating div { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: .6rem; font-size: .84rem; }
.up-rating dt { color: var(--up-muted); font-weight: 600; }
.up-rating dd { margin: 0; }
.up-rating__bar { display: block; height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--up-navy) calc(var(--v) * 20%), var(--up-navy-50) 0); }
.up-designer-teaser { display: flex; align-items: center; gap: 1.25rem; margin-top: 2.5rem; padding: 1.25rem 1.5rem; border-radius: 18px; background: #fff; border: 2px dashed var(--up-yellow); flex-wrap: wrap; }
.up-designer-teaser--mt { margin-top: 3rem; }
.up-designer-teaser__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--up-yellow); color: var(--up-navy); flex: none; }
.up-designer-teaser__ico .up-ico { width: 28px; height: 28px; }
.up-designer-teaser > div { flex: 1; min-width: 220px; }
.up-designer-teaser strong { display: block; font-family: var(--up-head); color: var(--up-navy); font-size: 1.1rem; }
.up-designer-teaser span { color: var(--up-muted); }

/* ---------- Dự án ---------- */
.up-sample-note { display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 1.5rem; padding: .75rem 1rem; border-radius: var(--up-radius-sm); background: var(--up-yellow-50); color: #6B4E00; font-size: .9rem; }
.up-sample-note .up-ico { width: 18px; height: 18px; margin-top: 2px; }
.up-logos { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .75rem; list-style: none; margin: 0 0 2.25rem; padding: 0; }
.up-logos li { display: grid; place-items: center; min-height: 84px; padding: .75rem .5rem; border: 1px solid var(--up-border); border-radius: var(--up-radius-sm); background: #fff; filter: grayscale(1); opacity: .75; transition: .2s; }
.up-logos li:hover { filter: none; opacity: 1; }
.up-blogo { display: inline-flex; flex-direction: column; align-items: center; gap: .3rem; }
.up-blogo__name { font-family: var(--up-head); font-weight: 800; font-size: .72rem; color: var(--c); text-align: center; line-height: 1.2; }
.up-projs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--up-gap); }
.up-proj { height: 100%; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--up-border); box-shadow: var(--up-shadow); }
.up-proj__media { position: relative; aspect-ratio: 4 / 3; background: var(--up-gray); overflow: hidden; }
.up-proj__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.up-proj:hover .up-proj__media img { transform: scale(1.04); }
.up-proj__media .up-blogo { position: absolute; left: 1rem; bottom: -20px; padding: 6px; border-radius: 12px; background: #fff; box-shadow: var(--up-shadow); }
.up-proj__sample { position: absolute; top: .75rem; right: .75rem; padding: .25rem .6rem; border-radius: 6px; background: rgba(11, 29, 69, .85); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.up-proj__body { padding: 1.85rem 1.25rem 1.25rem; flex: 1; }
.up-proj__ind { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--up-navy-700); }
.up-proj__title { font-size: 1.08rem !important; margin: .2rem 0 .2rem; }
.up-proj__client { font-size: .88rem; color: var(--up-muted); margin-bottom: .75rem; }
.up-proj__meta { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem; margin: 0; padding-top: .75rem; border-top: 1px dashed var(--up-border); }
.up-proj__meta dt { font-size: .72rem; color: var(--up-muted); text-transform: uppercase; letter-spacing: .05em; }
.up-proj__meta dd { margin: 0; font-size: .87rem; font-weight: 600; color: var(--up-text); }
.up-proj__desc { margin: .75rem .25rem 0; font-size: .9rem; color: var(--up-muted); }
.up-projs__cell[hidden] { display: none; }
.up-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.up-filter button, .up-filter a { display: inline-flex; align-items: center; gap: .4rem; min-height: 42px; padding: .45rem 1rem; border: 1.5px solid var(--up-border); border-radius: 999px; background: #fff; color: var(--up-navy); font-weight: 700; font-size: .9rem; text-decoration: none; cursor: pointer; }
.up-filter .up-ico { width: 18px; height: 18px; }
.up-filter button[aria-pressed="true"], .up-filter a[aria-current="page"] { background: var(--up-navy); border-color: var(--up-navy); color: #fff; }
.up-filter a[aria-current="page"] .up-ico { color: var(--up-yellow); }
.up-filter button:hover, .up-filter a:hover { border-color: var(--up-navy); }

/* ---------- FAQ ---------- */
.up-faqwrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.up-faqwrap__aside { position: sticky; top: 110px; }
.up-faqwrap__aside > p { color: var(--up-muted); }
.up-contactcard { display: grid; gap: .75rem; margin-top: 1.5rem; }
.up-contactcard a { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem; border-radius: var(--up-radius); background: #fff; border: 1px solid var(--up-border); text-decoration: none; color: var(--up-navy); box-shadow: var(--up-shadow); transition: .2s; }
.up-contactcard a:hover { border-color: var(--up-navy); }
.up-contactcard .up-ico { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--up-yellow); color: var(--up-navy); }
.up-contactcard span { display: flex; flex-direction: column; line-height: 1.25; }
.up-contactcard small { color: var(--up-muted); font-size: .8rem; }
.up-contactcard strong { font-family: var(--up-head); }
.up-faq { display: grid; gap: .75rem; }
.up-faq__item { border: 1px solid var(--up-border); border-radius: var(--up-radius); background: #fff; transition: box-shadow .2s, border-color .2s; }
.up-faq__item[open] { border-color: var(--up-navy); box-shadow: var(--up-shadow); }
.up-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; cursor: pointer; list-style: none; }
.up-faq__item summary::-webkit-details-marker { display: none; }
.up-faq__item summary h3 { margin: 0; font-size: 1.02rem; }
.up-faq__ico { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--up-navy-50); transition: .2s; }
.up-faq__ico::before, .up-faq__ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--up-navy); transform: translate(-50%, -50%); transition: transform .2s; }
.up-faq__ico::after { transform: translate(-50%, -50%) rotate(90deg); }
.up-faq__item[open] .up-faq__ico { background: var(--up-yellow); }
.up-faq__item[open] .up-faq__ico::after { transform: translate(-50%, -50%) rotate(0); }
.up-faq__a { padding: 0 1.25rem 1.1rem; color: var(--up-muted); }
.up-faq__a p { margin: 0; }

/* ---------- CTA cuối trang ---------- */
.up-cta { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--up-navy); }
.up-cta__bg { position: absolute; inset: 0; z-index: -2; }
.up-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.up-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 29, 69, .97), rgba(20, 48, 107, .88)); }
.up-cta__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; padding-block: var(--up-sec); }
.up-cta .up-qform__title { color: var(--up-navy); }
.up-cta__copy h2 { color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
.up-cta .up-checks { margin: 1.25rem 0 1.75rem; }
.up-cta__contact { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Đầu trang con ---------- */
.up-pagehead { padding-block: clamp(1.75rem, 4vw, 3rem); background: var(--up-gray); border-bottom: 1px solid var(--up-border); }
.up-pagehead--navy { background: var(--up-navy); color: #DCE4F5; border: 0; }
.up-pagehead--navy .up-pagehead__title { color: #fff; }
.up-pagehead--navy .up-crumb, .up-pagehead--navy .up-crumb a { color: #B9C7E4; }
.up-pagehead__title { font-size: clamp(1.75rem, 3.8vw, 2.6rem); margin: .35rem 0 .5rem; }
.up-pagehead__lead { max-width: 760px; color: inherit; opacity: .9; margin: 0; font-size: 1.05rem; }
.up-pagehead:not(.up-pagehead--navy) .up-pagehead__lead { color: var(--up-muted); opacity: 1; }
.up-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .85rem; color: var(--up-muted); }
.up-crumb a { color: var(--up-muted); text-decoration: none; }
.up-crumb a:hover { color: var(--up-navy); text-decoration: underline; }
.up-crumb__sep { opacity: .5; }
.up-crumb [aria-current] { color: var(--up-navy); font-weight: 600; }
.up-pagehead--navy .up-crumb [aria-current] { color: #fff; }
.up-page { padding-block: 2.5rem 4rem; }

/* ---------- Trang báo giá ---------- */
.up-quote { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; padding-block: 2.5rem 4.5rem; }
.up-wizard, .up-wizard__done { background: #fff; border: 1px solid var(--up-border); border-radius: 20px; padding: clamp(1.25rem, 3vw, 2.25rem); box-shadow: var(--up-shadow); }
.up-wizard__progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; list-style: none; margin: 0 0 2rem; padding: 0; counter-reset: none; }
.up-wizard__progress li { position: relative; display: flex; align-items: center; gap: .6rem; padding-bottom: .75rem; border-bottom: 4px solid var(--up-border); font-family: var(--up-head); font-weight: 700; font-size: .92rem; color: var(--up-muted); }
.up-wizard__progress span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--up-gray); color: var(--up-muted); font-size: .85rem; flex: none; }
.up-wizard__progress li.is-current { color: var(--up-navy); border-color: var(--up-yellow); }
.up-wizard__progress li.is-current span { background: var(--up-yellow); color: var(--up-navy); }
.up-wizard__progress li.is-done { color: var(--up-navy); border-color: var(--up-navy); }
.up-wizard__progress li.is-done span { background: var(--up-navy); color: #fff; }
.up-wizard__step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1.35rem; }
.up-wizard__legend { font-family: var(--up-head); font-weight: 800; font-size: 1.3rem; color: var(--up-navy); margin-bottom: 1.25rem; padding: 0; }
.up-wizard__legend:focus { outline: none; }
.up-wizard__prefill { display: flex; align-items: center; gap: .4rem; margin: 0; padding: .6rem .9rem; border-radius: var(--up-radius-sm); background: #E4F6EC; color: var(--up-ok); font-size: .92rem; }
.up-typecards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.up-typecard { position: relative; cursor: pointer; }
.up-typecard input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.up-typecard > span { display: flex; flex-direction: column; align-items: center; gap: .35rem; height: 100%; padding: 1rem .5rem; border: 1.5px solid var(--up-border); border-radius: var(--up-radius); text-align: center; transition: .15s; }
.up-typecard .up-ico { width: 32px; height: 32px; color: var(--up-navy-700); }
.up-typecard strong { font-size: .9rem; color: var(--up-navy); line-height: 1.25; }
.up-typecard small { font-size: .78rem; color: var(--up-muted); }
.up-typecard input:checked + span { border-color: var(--up-navy); background: var(--up-navy-50); box-shadow: inset 0 0 0 1px var(--up-navy); }
.up-typecard input:checked + span .up-ico { color: var(--up-navy); }
.up-typecard input:focus-visible + span { outline: 3px solid var(--up-yellow); outline-offset: 2px; }
.up-typecard:hover > span { border-color: var(--up-navy-700); }
.up-field--group { gap: .5rem; }
.up-wizard__nav { display: flex; justify-content: space-between; gap: .75rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--up-border); }
.up-wizard__nav [data-up-next], .up-wizard__nav [data-up-submit] { margin-left: auto; }
.up-wizard__done { text-align: center; padding-block: 3rem; }
.up-wizard__done:focus { outline: none; }
.up-wizard__done-ico { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #E4F6EC; color: var(--up-ok); margin-bottom: 1rem; }
.up-wizard__done-ico .up-ico { width: 36px; height: 36px; stroke-width: 2.6; }
.up-wizard__done p { max-width: 520px; margin-inline: auto; color: var(--up-muted); }
.up-wizard__done-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.up-quote__aside { position: sticky; top: 100px; display: grid; gap: 1rem; }
.up-estimate-card { padding: 1.5rem; border-radius: 18px; background: var(--up-navy); color: #DCE4F5; }
.up-estimate-card h2 { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem; }
.up-estimate-card__val { font-family: var(--up-head); font-size: 1.85rem; font-weight: 800; color: var(--up-yellow); margin: 0 0 .25rem; line-height: 1.15; }
.up-estimate-card .up-small { color: #C3D0EC; margin: 0 0 .35rem; }
.up-promises { list-style: none; margin: 0; padding: 1rem 1.25rem; display: grid; gap: .85rem; border-radius: 18px; background: #fff; border: 1px solid var(--up-border); }
.up-promises li { display: flex; gap: .75rem; align-items: center; }
.up-promises li > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--up-yellow-50); color: #8A6200; flex: none; }
.up-promises strong { display: block; color: var(--up-navy); font-size: .95rem; }
.up-promises small { color: var(--up-muted); font-size: .82rem; }
.up-hotline-card { padding: 1.25rem; border-radius: 18px; background: var(--up-yellow); text-align: center; color: var(--up-navy); }
.up-hotline-card p { margin: 0; font-weight: 700; }
.up-hotline-card a { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--up-head); font-weight: 800; font-size: 1.5rem; color: var(--up-navy); text-decoration: none; }
.up-hotline-card small { display: block; font-size: .8rem; }

/* ---------- Bảng size ---------- */
.up-sizes { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.up-sizes .up-tabs__list { justify-content: flex-start; margin-bottom: 1.25rem; }
.up-table--size td { font-variant-numeric: tabular-nums; }
.up-howto { margin-top: 2.5rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 20px; background: var(--up-gray); }
.up-howto h2 { font-size: 1.4rem; }
.up-howto__grid { display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; align-items: center; }
.up-howto__svg { width: 100%; height: auto; background: #fff; border-radius: var(--up-radius); padding: 1rem; }
.up-howto__list { margin: 0; padding-left: 1.2rem; display: grid; gap: .6rem; }
.up-sizes__aside { position: sticky; top: 100px; display: grid; gap: 1rem; }
.up-sizecalc, .up-sizelist { padding: 1.5rem; border-radius: 18px; border: 1px solid var(--up-border); background: #fff; box-shadow: var(--up-shadow); display: grid; gap: .9rem; }
.up-sizecalc h2, .up-sizelist h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; margin: 0; }
.up-sizelist p { margin: 0; font-size: .92rem; color: var(--up-muted); }
.up-sizecalc__out { padding: 1rem; border-radius: var(--up-radius-sm); background: var(--up-navy-50); font-size: .9rem; }
.up-sizecalc__out p { margin: 0 0 .35rem; }
.up-sizecalc__res { font-size: 1.05rem; color: var(--up-navy); }
.up-sizecalc__res strong { font-family: var(--up-head); font-size: 1.6rem; color: var(--up-navy); }

/* ---------- Liên hệ ---------- */
.up-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.up-contact__list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .9rem; }
.up-contact__list li { display: flex; gap: .9rem; align-items: center; padding: 1rem; border: 1px solid var(--up-border); border-radius: var(--up-radius); }
.up-contact__list li > span { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 12px; background: var(--up-navy); color: var(--up-yellow); }
.up-contact__list small { display: block; font-size: .8rem; color: var(--up-muted); }
.up-contact__list a, .up-contact__list strong { font-weight: 700; color: var(--up-navy); text-decoration: none; }
.up-contact__map iframe { width: 100%; height: 300px; border: 0; border-radius: var(--up-radius); background: var(--up-gray); }
.up-card-form { padding: clamp(1.25rem, 3vw, 2rem); border-radius: 20px; background: #fff; border: 1px solid var(--up-border); border-top: 6px solid var(--up-yellow); box-shadow: var(--up-shadow); display: grid; gap: 1rem; }
.up-card-form h2 { font-size: 1.35rem; margin: 0; }

/* ---------- Thẻ sản phẩm + danh sách ---------- */
.up-count { color: var(--up-muted); font-size: .9rem; margin-bottom: 1rem; }
.up-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--up-gap); }
.up-products--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.up-pcard { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--up-border); box-shadow: var(--up-shadow); transition: transform .2s, box-shadow .2s; }
.up-pcard:hover { transform: translateY(-4px); box-shadow: var(--up-shadow-lg); }
.up-pcard__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--up-gray); }
.up-pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.up-pcard:hover .up-pcard__media img { transform: scale(1.05); }
.up-pcard__moq { position: absolute; top: .75rem; left: .75rem; padding: .25rem .6rem; border-radius: 6px; background: var(--up-yellow); color: var(--up-navy); font-size: .75rem; font-weight: 800; }
.up-pcard__body { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.15rem 1.15rem; flex: 1; }
.up-pcard__cat { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--up-navy-700); }
.up-pcard__title { font-size: 1.05rem !important; margin: 0 !important; }
.up-pcard__title a { color: var(--up-navy); text-decoration: none; }
.up-pcard__title a:hover { text-decoration: underline; }
.up-pcard__fabric { font-size: .86rem; color: var(--up-muted); margin: 0; }
.up-pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .85rem; border-top: 1px dashed var(--up-border); flex-wrap: wrap; }
.up-pcard__price { margin: 0; line-height: 1.1; }
.up-pcard__price span { display: block; font-size: .75rem; color: var(--up-muted); }
.up-pcard__price strong { font-family: var(--up-head); font-size: 1.2rem; color: var(--up-navy); }
.up-pcard__price small { color: var(--up-muted); font-size: .8rem; }
.up-swatches { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; align-items: center; }
.up-swatches li, .up-swatches button { width: 30px; height: 30px; border-radius: 50%; background: var(--sw); border: 2px solid #fff; box-shadow: 0 0 0 1px #C5CEDD; cursor: pointer; padding: 0; transition: box-shadow .15s, transform .15s; }
.up-swatches button:hover { transform: scale(1.08); }
.up-swatches button[aria-checked="true"] { box-shadow: 0 0 0 2px var(--up-navy), 0 0 0 4px var(--up-yellow); }
.up-swatches--sm { margin: .25rem 0; }
.up-swatches--sm li { width: 18px; height: 18px; cursor: default; border-width: 1.5px; }
.up-swatches__more { width: auto !important; background: none !important; box-shadow: none !important; border: 0 !important; font-size: .78rem; color: var(--up-muted); }
.up-swatches--lg button { width: 38px; height: 38px; }
.up-swatch-custom { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 2px dashed #9AA8C2; color: var(--up-navy); cursor: pointer; overflow: hidden; }
.up-swatch-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.up-swatch-custom .up-ico { width: 18px; height: 18px; }
.up-pagination { margin-top: 2rem; }
.up-pagination .nav-links { display: flex; gap: .4rem; justify-content: center; }
.up-pagination .page-numbers { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 .6rem; border: 1px solid var(--up-border); border-radius: 10px; text-decoration: none; color: var(--up-navy); font-weight: 700; }
.up-pagination .page-numbers.current { background: var(--up-navy); color: #fff; border-color: var(--up-navy); }

/* ---------- Trang sản phẩm ---------- */
.up-pd-crumb { padding-block: 1.25rem .25rem; }
.up-pd { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.up-gallery { position: sticky; top: 100px; }
.up-gallery__main { position: relative; border-radius: 20px; overflow: hidden; background: var(--up-gray); aspect-ratio: 1 / 1; }
.up-gallery__slide { margin: 0; height: 100%; }
.up-gallery__slide img { width: 100%; height: 100%; object-fit: cover; }
.up-gallery__moq { position: absolute; top: 1rem; left: 1rem; padding: .35rem .75rem; border-radius: 8px; background: var(--up-yellow); color: var(--up-navy); font-weight: 800; font-size: .82rem; }
.up-gallery__thumbs { display: flex; gap: .6rem; margin-top: .75rem; }
.up-gallery__thumbs button { width: 84px; height: 84px; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--up-gray); }
.up-gallery__thumbs button[aria-current="true"] { border-color: var(--up-navy); }
.up-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.up-pd__cat { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--up-navy-700); text-decoration: none; }
.up-pd__title { font-size: clamp(1.6rem, 3vw, 2.3rem) !important; margin: .35rem 0 .75rem !important; }
.up-pd__short { color: var(--up-muted); font-size: 1.02rem; }
.up-pd__price { margin: 1.25rem 0; padding: 1.1rem 1.25rem; border-radius: var(--up-radius); background: var(--up-gray); }
.up-pd__from { display: flex; align-items: baseline; gap: .4rem; margin: 0 0 .75rem; }
.up-pd__from span { color: var(--up-muted); }
.up-pd__from strong { font-family: var(--up-head); font-size: 2rem; color: var(--up-navy); line-height: 1; }
.up-tiertable { width: 100%; border-collapse: separate; border-spacing: 6px 0; margin: 0 -6px .5rem; }
.up-tiertable th { font-size: .78rem; font-weight: 600; color: var(--up-muted); text-align: center; padding-bottom: .3rem; }
.up-tiertable td { text-align: center; padding: .55rem .25rem; border-radius: 10px; background: #fff; font-family: var(--up-head); font-weight: 800; color: var(--up-navy); border: 1px solid var(--up-border); }
.up-tiertable td.is-best { background: var(--up-navy); color: var(--up-yellow); border-color: var(--up-navy); }
.up-pd__colors { margin-bottom: 1.25rem; }
.up-pd__colors .up-label { display: block; margin-bottom: .6rem; }
.up-pd__colors .up-label span { font-weight: 500; color: var(--up-muted); margin-left: .3rem; }
.up-specs { display: grid; margin: 0 0 1.5rem; border: 1px solid var(--up-border); border-radius: var(--up-radius); overflow: hidden; }
.up-specs div { display: grid; grid-template-columns: 140px 1fr; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--up-border); font-size: .93rem; }
.up-specs div:last-child { border: 0; }
.up-specs div:nth-child(odd) { background: var(--up-gray); }
.up-specs dt { color: var(--up-muted); font-weight: 600; }
.up-specs dd { margin: 0; color: var(--up-text); font-weight: 500; }
.up-pd__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.up-pd__trust { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; list-style: none; margin: 1.25rem 0 0; padding: 0; font-size: .88rem; color: var(--up-muted); }
.up-pd__trust li { display: flex; align-items: center; gap: .45rem; }
.up-pd__trust .up-ico { width: 18px; height: 18px; color: var(--up-navy-700); }

/* Công cụ thiết kế thử */
.up-designer { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--up-gap); align-items: start; }
.up-designer__stage { position: relative; padding: 1.25rem; border-radius: 20px; background: #fff; border: 1px solid var(--up-border); box-shadow: var(--up-shadow); }
.up-designer__views { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--up-gray); margin-bottom: .75rem; }
.up-designer__views button { min-height: 36px; padding: .3rem 1rem; border: 0; border-radius: 999px; background: none; font-weight: 700; font-size: .86rem; color: var(--up-muted); cursor: pointer; }
.up-designer__views button[aria-pressed="true"] { background: var(--up-navy); color: #fff; }
.up-designer__canvas { display: grid; place-items: center; border-radius: var(--up-radius); background: radial-gradient(circle at 50% 40%, #fff 0%, var(--up-gray) 70%); aspect-ratio: 400 / 460; max-height: 620px; margin-inline: auto; width: 100%; touch-action: none; }
.up-designer__canvas svg { width: 100%; height: 100%; max-height: 600px; }
.up-designer__canvas .up-dz-logo { cursor: grab; }
.up-designer.is-dragging .up-dz-logo { cursor: grabbing; }
.up-designer__canvas .up-dz-logo:focus { outline: none; }
.up-designer__canvas .up-dz-logo:focus-visible { outline: 2px solid var(--up-yellow); }
.up-designer__hint { display: flex; gap: .4rem; align-items: flex-start; margin: .75rem 0 0; font-size: .82rem; color: var(--up-muted); }
.up-designer__hint .up-ico { width: 16px; height: 16px; margin-top: 2px; }
.up-designer__panel { display: grid; gap: 1rem; }
.up-dz-step { padding: 1.15rem 1.25rem; border-radius: 18px; background: #fff; border: 1px solid var(--up-border); }
.up-dz-step h3 { display: flex; align-items: center; gap: .55rem; font-size: 1rem; margin-bottom: .85rem; }
.up-dz-step h3 > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--up-yellow); color: var(--up-navy); font-size: .8rem; }
.up-dz-step h3 em { font-style: normal; font-weight: 500; font-family: var(--up-body); font-size: .88rem; color: var(--up-muted); margin-left: auto; }
.up-range { display: grid; gap: .3rem; margin-top: .9rem; font-size: .86rem; font-weight: 600; color: var(--up-navy); }
.up-range input { width: 100%; accent-color: var(--up-navy); }
.up-designer__actions { display: grid; gap: .6rem; }

.up-pd-detail__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.up-boxcard { padding: 1.4rem; border-radius: 18px; border: 1px solid var(--up-border); background: #fff; margin-bottom: 1rem; }
.up-boxcard h2 { font-size: 1.1rem; }
.up-boxcard--navy { background: var(--up-navy); border-color: var(--up-navy); color: #DCE4F5; }
.up-boxcard--navy h2 { color: #fff; }
.up-ministeps { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.up-ministeps li { display: flex; gap: .65rem; align-items: center; font-size: .9rem; }
.up-ministeps .up-ico { width: 32px; height: 32px; padding: 6px; border-radius: 10px; background: rgba(255, 197, 49, .15); color: var(--up-yellow); }
.up-ministeps strong { color: #fff; }

/* ---------- Bài viết ---------- */
.up-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--up-gap); }
.up-post { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--up-border); box-shadow: var(--up-shadow); }
.up-post__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--up-gray); }
.up-post__media img { width: 100%; height: 100%; object-fit: cover; }
.up-post__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.up-post__cat { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--up-navy-700); }
.up-post__title { font-size: 1.12rem !important; margin: .3rem 0 .5rem !important; }
.up-post__title a { color: var(--up-navy); text-decoration: none; }
.up-post__title a:hover { text-decoration: underline; }
.up-post__body p { font-size: .92rem; color: var(--up-muted); }
.up-post__meta { margin-top: auto; font-size: .8rem; color: var(--up-muted); }
.up-article__meta { color: var(--up-muted); font-size: .9rem; margin: 0; }
.up-article__body { padding-block: 2rem 3.5rem; }
.up-article__cover { margin: 0 0 2rem; border-radius: 18px; overflow: hidden; }
.up-article__cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; padding: 1.25rem 1.5rem; border-radius: 18px; background: var(--up-navy); color: #DCE4F5; }
.up-article__cta div { flex: 1; min-width: 220px; }
.up-article__cta strong { display: block; color: #fff; font-family: var(--up-head); font-size: 1.1rem; }
.unipro .entry-content { font-size: 1.04rem; line-height: 1.75; }
.unipro .entry-content h2 { font-size: 1.5rem; margin: 2rem 0 .75rem; }
.unipro .entry-content h3 { font-size: 1.2rem; margin: 1.5rem 0 .5rem; }
.unipro .entry-content ul, .unipro .entry-content ol { padding-left: 1.3rem; margin: 0 0 1.2rem; }
.unipro .entry-content li { margin-bottom: .35rem; }
.unipro .entry-content table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .95rem; }
.unipro .entry-content th, .unipro .entry-content td { border: 1px solid var(--up-border); padding: .6rem .8rem; text-align: left; }
.unipro .entry-content th { background: var(--up-gray); color: var(--up-navy); }
.unipro .entry-content blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 4px solid var(--up-yellow); background: var(--up-yellow-50); border-radius: 0 12px 12px 0; }

/* ---------- 404 ---------- */
.up-404 { text-align: center; }
.up-404__code { font-family: var(--up-head); font-weight: 800; font-size: clamp(4rem, 12vw, 7rem); color: var(--up-yellow); line-height: 1; margin: 0; }
.up-404__cta { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* ---------- Footer ---------- */
.up-footer { background: var(--up-navy-900); color: #B9C7E4; font-size: .93rem; }
.up-footer__grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.25fr; gap: clamp(1.5rem, 3vw, 3rem); padding-block: clamp(3rem, 6vw, 4.5rem); }
.up-footer__brand > p { margin: 1rem 0; }
.up-footer a { color: #E6ECF8; text-decoration: none; }
.up-footer a:hover { color: var(--up-yellow); }
.up-footer__h { font-size: 1rem !important; color: #fff !important; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1.1rem !important; }
.up-footer__contact, .up-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.up-footer__contact li { display: flex; gap: .6rem; align-items: flex-start; }
.up-footer__contact .up-ico { width: 18px; height: 18px; color: var(--up-yellow); margin-top: 3px; }
.up-inline-form { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin-top: .75rem; }
.up-inline-form input { min-height: 46px; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .2); color: #fff; }
.up-inline-form input::placeholder { color: #8FA2CB; }
.up-inline-form .up-form-msg { grid-column: 1 / -1; }
.up-inline-form [aria-invalid="true"] { border-color: #FF8A80; }
.up-inline-form .up-ferr { grid-column: 1 / -1; color: #FFB4AB; }
.up-footer__social { display: flex; gap: .5rem; margin-top: 1.25rem; }
.up-footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, .08); }
.up-footer__social a:hover { background: var(--up-yellow); color: var(--up-navy); }
.up-footer__social .up-ico { width: 19px; height: 19px; }
.up-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); font-size: .82rem; }
.up-footer__bottom-inner { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding-block: 1.1rem; }
.up-demo-note a { color: var(--up-yellow); }

/* Nút nổi + thanh liên hệ mobile */
.up-floats { position: fixed; right: 18px; bottom: 22px; z-index: 40; display: grid; gap: .6rem; }
.up-float { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: #fff !important; text-decoration: none; font-weight: 800; font-size: .78rem; box-shadow: 0 8px 22px rgba(11, 29, 69, .28); }
.up-float--zalo { background: #0068FF; }
.up-float--phone { background: var(--up-yellow); color: var(--up-navy) !important; animation: up-ring 2.4s infinite; }
@keyframes up-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 197, 49, .6), 0 8px 22px rgba(11, 29, 69, .28); } 60% { box-shadow: 0 0 0 14px rgba(255, 197, 49, 0), 0 8px 22px rgba(11, 29, 69, .28); } }
.up-mbar { display: none; }

/* ---------- Hộp thoại báo giá ---------- */
.up-modal { width: min(620px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 0; border-radius: 22px; box-shadow: var(--up-shadow-lg); color: var(--up-text); }
.up-modal[open] { display: block; }
.up-modal::backdrop { background: rgba(11, 29, 69, .6); backdrop-filter: blur(2px); }
.up-modal__box { position: relative; padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1rem; border-top: 6px solid var(--up-yellow); }
.up-modal__close { position: absolute; top: .75rem; right: .75rem; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--up-gray); color: var(--up-navy); cursor: pointer; }
.up-modal__head h2 { font-size: 1.4rem; margin: 0 2.5rem .35rem 0; }
.up-modal__head p { margin: 0; color: var(--up-muted); font-size: .93rem; }
.up-modal__head .up-eyebrow { margin-bottom: .35rem; }
.up-modal__design { display: flex; gap: .9rem; align-items: center; padding: .75rem; border-radius: var(--up-radius); background: var(--up-gray); }
.up-modal__design img { width: 78px; height: 90px; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--up-border); }
.up-modal__design strong { display: block; color: var(--up-navy); }
.up-modal__design span { font-size: .85rem; color: var(--up-muted); }
.up-modal__privacy { display: flex; align-items: center; gap: .35rem; justify-content: center; margin: 0; font-size: .8rem; color: var(--up-muted); }
.up-modal__privacy .up-ico { width: 16px; height: 16px; color: var(--up-ok); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1240px) {
  .up-header__phone-txt, .up-hide-md { display: none; }
}
@media (max-width: 1180px) {
  .up-menu > li > a { padding-inline: .6rem; font-size: .88rem; }
  .up-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.25rem; }
  .up-steps::before { display: none; }
  .up-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .up-products--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .up-typecards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .up-nav, .up-header__cta { display: none; }
  .up-burger { display: grid; }
  .up-header__inner { min-height: 66px; }
  .up-header__phone-txt { display: flex; }
}
@media (max-width: 1020px) {
  .up-hero__inner, .up-cta__inner { grid-template-columns: 1fr; }
  .up-hero__copy { max-width: 720px; }
  .up-cats, .up-fabrics, .up-projs, .up-products, .up-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .up-tiers { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .up-tier--hot { transform: none; }
  .up-faqwrap, .up-quote, .up-sizes, .up-contact, .up-pd, .up-designer, .up-pd-detail__grid { grid-template-columns: 1fr; }
  .up-faqwrap__aside, .up-quote__aside, .up-sizes__aside, .up-gallery { position: static; }
  .up-footer__grid { grid-template-columns: 1fr 1fr; }
  .up-designer__canvas { max-width: 520px; }
}
@media (max-width: 767px) {
  body.unipro { font-size: 15.5px; padding-bottom: 64px; }
  .up-topbar__msg span { font-size: .78rem; }
  .up-topbar__links { display: none; }
  .up-header__phone { display: none; }
  .up-logo__word { font-size: 1.25rem; }
  .up-logo__sub { font-size: .6rem; }
  .up-hero__promises { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .up-hero__promises small { display: none; }
  .up-hero__pico { width: 36px; height: 36px; }
  .up-qform__row, .up-fgrid { grid-template-columns: 1fr; }
  .up-cats, .up-fabrics, .up-projs, .up-products, .up-products--4, .up-posts { grid-template-columns: 1fr; }
  .up-steps { grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; }
  .up-step p { font-size: .84rem; }
  .up-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .up-typecards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .up-wizard__progress li { flex-direction: column; align-items: flex-start; font-size: .8rem; gap: .3rem; }
  .up-wizard__nav .up-btn { flex: 1; }
  .up-howto__grid { grid-template-columns: 1fr; }
  .up-howto__svg { max-width: 260px; margin-inline: auto; }
  .up-pd__actions, .up-pd__trust { grid-template-columns: 1fr; }
  .up-specs div { grid-template-columns: 110px 1fr; }
  .up-footer__grid { grid-template-columns: 1fr; }
  .up-floats { display: none; }
  .up-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr 1.4fr; background: #fff; border-top: 1px solid var(--up-border); box-shadow: 0 -6px 20px rgba(11, 29, 69, .1); padding-bottom: env(safe-area-inset-bottom); }
  .up-mbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; font-size: .74rem; font-weight: 700; color: var(--up-navy); text-decoration: none; }
  .up-mbar a + a { border-left: 1px solid var(--up-border); }
  .up-mbar .up-ico { width: 21px; height: 21px; }
  .up-mbar__cta { background: var(--up-yellow); border-left: 0 !important; font-size: .82rem !important; }
  .up-table { font-size: .88rem; }
  .up-table th, .up-table td { padding: .65rem .6rem; }
  .up-modal { max-height: calc(100vh - 12px); }
  .up-designer__stage { padding: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .unipro *, .unipro *::before, .unipro *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}