/* ==========================================================================
   Upgrade Computer: hệ thống giao diện "Xe Kỹ Thuật"
   Luật tiếng Việt: KHÔNG viết hoa toàn bộ tiêu đề · line-height thân >= 1.3
   Màu cam CHỈ dùng cho hành động (Gọi, Zalo). Không dùng trang trí.
   ========================================================================== */

:root {
  --ink:#14181D;  --slate:#232B33;  --steel:#5A6875;  --steel-2:#7C8894;
  --paper:#F6F4F0; --card:#FFFFFF;  --border:#E2DDD5; --border-2:#EFEBE4;
  --cam:#DE5B1F;  --cam-dark:#B84718; --cam-soft:#FBEEE7;
  --zalo:#0068FF; --green:#1F7A55;  --green-soft:#E8F3EE; --amber:#C98A00;

  --sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* Archivo: chữ hiển thị. Đã kiểm unicode-range U+1EA0-1EF9, CÓ đủ dấu tiếng Việt.
     Công thức mặc định của em là Geist/Satoshi/Cabinet Grotesk, cả ba KHÔNG có dấu Việt
     nên luật tiếng Việt thắng luật font. */
  --hien:"Archivo","Be Vietnam Pro",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --w:1140px; --gut:18px; --r:10px; --r-lg:14px;
  --shadow:0 1px 2px rgba(20,24,29,.05), 0 8px 24px -16px rgba(20,24,29,.25);
  --bar-h:58px;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom));  /* chừa chỗ thanh gọi */
}
@media (min-width:860px){ body{ padding-bottom:0 } }
img { max-width:100%; height:auto; display:block; }
a { color:var(--cam-dark); text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--cam); outline-offset:2px; border-radius:4px; }

.wrap { max-width:var(--w); margin-inline:auto; padding-inline:var(--gut); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- chữ ---------- */
h1,h2,h3,h4 { margin:0; font-weight:800; letter-spacing:-.018em; text-wrap:balance; }
h1 { font-size:clamp(28px,6.4vw,44px); line-height:1.16; }
h2 { font-size:clamp(22px,4.2vw,31px); line-height:1.22; }
h3 { font-size:clamp(18px,2.6vw,21px); line-height:1.3; font-weight:700; }
h4 { font-size:16px; line-height:1.35; font-weight:700; }
p  { margin:0 0 15px; max-width:66ch; }
p:last-child { margin-bottom:0; }
.lede { font-size:clamp(17px,2.4vw,19.5px); color:var(--steel); line-height:1.55; }
.eyebrow { font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  color:var(--cam-dark); margin:0 0 10px; }
.note { font-size:14.5px; color:var(--steel); line-height:1.5; }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ---------- nút ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 20px; border-radius:var(--r); border:1px solid transparent;
  font:inherit; font-weight:700; font-size:16px; text-decoration:none; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease; }
.btn-call { background:var(--cam); color:#fff; }
.btn-call:hover,.btn-call:focus-visible { background:var(--cam-dark); }
.btn-zalo { background:var(--zalo); color:#fff; }
.btn-zalo:hover,.btn-zalo:focus-visible { background:#0052CC; }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--border); }
.btn-ghost:hover,.btn-ghost:focus-visible { border-color:var(--steel); }
.btn-row { display:flex; flex-wrap:wrap; gap:10px; }

/* ---------- đầu trang ---------- */
.site-head { background:var(--paper); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:40; }
.site-head .wrap { display:flex; align-items:center; gap:14px; min-height:64px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.brand img { width:38px; height:38px; border-radius:9px; }
.brand-name { font-weight:800; font-size:16px; line-height:1.15; letter-spacing:-.02em; }
.brand-sub { font-family:var(--mono); font-size:10.5px; color:var(--steel); }
.site-nav { display:none; margin-left:auto; gap:22px; }
.site-nav a { color:var(--ink); text-decoration:none; font-size:15px; font-weight:500; }
.site-nav a:hover { color:var(--cam-dark); }
.head-call { margin-left:auto; }
@media (min-width:860px){
  .site-nav { display:flex; }
  .head-call { margin-left:22px; }
}
@media (max-width:859px){ .head-call .btn { min-height:42px; padding:0 14px; font-size:15px; } }

/* ---------- nút mở menu, chỉ có ở điện thoại ---------- */
.nav-mo { display:none; margin-left:10px; width:42px; height:42px; flex:0 0 auto;
  align-items:center; justify-content:center; padding:0;
  background:var(--card); border:1px solid var(--border); border-radius:9px;
  color:var(--ink); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.nav-mo:hover { border-color:var(--cam); }
.nav-mo:focus-visible { outline:2px solid var(--cam); outline-offset:2px; }

/* ba gạch, vẽ bằng một phần tử cộng hai đường trước sau */
.nav-gach, .nav-gach::before, .nav-gach::after {
  display:block; width:18px; height:2px; border-radius:2px; background:currentColor;
  transition:transform .18s ease, opacity .18s ease; }
.nav-gach { position:relative; }
.nav-gach::before, .nav-gach::after { content:""; position:absolute; left:0; }
.nav-gach::before { top:-6px; }
.nav-gach::after  { top:6px; }
/* mở ra thì ba gạch thành dấu nhân */
[aria-expanded="true"] .nav-gach { background:transparent; }
[aria-expanded="true"] .nav-gach::before { transform:translateY(6px) rotate(45deg); }
[aria-expanded="true"] .nav-gach::after  { transform:translateY(-6px) rotate(-45deg); }

.nav-di-dong { border-top:1px solid var(--border); background:var(--paper); }
.nav-di-dong .wrap { display:flex; flex-direction:column; padding-block:6px 12px;
  /* .wrap dùng chung có align-items:center, để nguyên thì mỗi link co lại bằng
     bề ngang chữ và nằm giữa, bấm rất khó trúng trên điện thoại. */
  align-items:stretch; }
.nav-di-dong a { display:block; padding:13px 2px; color:var(--ink); text-decoration:none;
  font-size:16px; font-weight:500; border-bottom:1px solid var(--border-2); }
.nav-di-dong a:last-child { border-bottom:0; }
.nav-di-dong a:active { color:var(--cam-dark); }
.nav-di-dong .nav-zalo { margin-top:10px; padding:12px; text-align:center; font-weight:600;
  color:#fff; background:var(--zalo); border-radius:9px; border-bottom:0; }

@media (max-width:859px){
  .nav-mo { display:flex; }

  /* Ba thứ phải nằm gọn trên MỘT hàng: tên tiệm, nút gọi, nút menu.
     Nút gọi và nút menu không được co lại và không được xuống dòng;
     phần chịu co là tên tiệm, vì nó cắt bớt vẫn đọc được. */
  .site-head .wrap { gap:10px; flex-wrap:nowrap; }
  .brand { flex:1 1 auto; min-width:0; }
  .brand > span { min-width:0; overflow:hidden; }
  .brand-name { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .head-call { flex:0 0 auto; margin-left:0; }
  .head-call .btn { white-space:nowrap; padding:0 13px; font-size:15px; min-height:40px; }
  .nav-mo { flex:0 0 auto; margin-left:0; width:40px; height:40px; }
}
/* màn hình hẹp hơn nữa: bỏ dòng phụ dưới tên tiệm để nhường chỗ cho số điện thoại */
@media (max-width:539px){
  .brand-sub { display:none; }
  .brand br { display:none; }  /* ẩn dòng phụ mà để lại <br> là thừa một dòng trống */
  .brand img { width:34px; height:34px; }
  .brand-name { font-size:15px; }
  .head-call .btn { padding:0 11px; font-size:14.5px; letter-spacing:-.01em; }
}
/* điện thoại nhỏ: rút tên tiệm còn một chữ, số điện thoại vẫn nguyên một hàng */
@media (max-width:389px){
  .brand-name { font-size:0; }
  .brand-name::after { content:"Upgrade"; font-size:15px; }
  .head-call .btn { padding:0 9px; font-size:14px; }
  .site-head .wrap { gap:8px; }
}
@media (min-width:860px){
  /* máy tính đã có thanh menu đầy đủ, khối này không bao giờ hiện */
  .nav-di-dong { display:none; }
}
/* khoá cuộn nền khi menu đang mở */
html.menu-mo body { overflow:hidden; }

/* ---------- dải cam kết ---------- */
.promise { background:var(--slate); color:#EDE9E2; }
.promise ul { display:flex; flex-wrap:wrap; gap:8px 26px; margin:0;
  padding:11px var(--gut); list-style:none; max-width:var(--w);
  margin-inline:auto; font-family:var(--mono); font-size:12.5px; }
.promise li { display:flex; align-items:center; gap:8px; color:#C7D0D9; }
.promise li::before { content:""; width:6px; height:6px; border-radius:50%;
  background:var(--green); flex:none; }

/* ---------- section ---------- */
.sec { padding-block:clamp(40px,7vw,68px); }
.sec + .sec { border-top:1px solid var(--border); }
.sec-head { margin-bottom:clamp(20px,3vw,28px); }
.sec-head p { color:var(--steel); }

/* ---------- hero ---------- */
.hero { padding-block:clamp(32px,6vw,60px) clamp(36px,6vw,64px); }
.hero-grid { display:grid; gap:26px; }
@media (min-width:900px){
  .hero-grid { grid-template-columns:1.05fr .95fr; align-items:center; gap:44px; }
}
.hero h1 { margin-bottom:14px; }
.hero .lede { margin-bottom:20px; }
.hero-bul { list-style:none; margin:0 0 22px; padding:0; display:grid; gap:9px; }
.hero-bul li { position:relative; padding-left:26px; font-size:16px; line-height:1.45; }
.hero-bul li::before { content:""; position:absolute; left:2px; top:.52em;
  width:11px; height:11px; border-radius:3px; background:var(--green-soft);
  border:1.5px solid var(--green); }
.hero-media { border-radius:var(--r-lg); overflow:hidden; background:var(--border); }
.hero-media img { width:100%; aspect-ratio:4/3; object-fit:cover; }

/* ---------- triệu chứng ---------- */
.symp { display:grid; gap:16px; }
@media (min-width:720px){ .symp { grid-template-columns:1fr 1fr; } }
.symp-card { background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:22px 20px; }
.symp-card h3 { margin-bottom:12px; }
.symp-card ul { margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.symp-card li { position:relative; padding-left:22px; font-size:15.5px; line-height:1.45;
  color:var(--ink); }
.symp-card li::before { content:""; position:absolute; left:4px; top:.62em;
  width:7px; height:2px; background:var(--cam); border-radius:2px; }

/* ---------- thẻ dịch vụ ---------- */
.cards { display:grid; gap:18px; align-items:start; }   /* không kéo giãn thẻ ngắn */
@media (min-width:700px){ .cards { grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .cards.c3 { grid-template-columns:repeat(3,1fr); } }
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column; }
.card-img { background:var(--border); }
.card-img img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.card-body { padding:18px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card-body h3 a { color:inherit; text-decoration:none; }
.card-body h3 a:hover { color:var(--cam-dark); }
.card-body ul { margin:0; padding:0; list-style:none; display:grid; gap:7px; }
.card-body li { position:relative; padding-left:19px; font-size:15px; line-height:1.45;
  color:var(--steel); }
.card-body li::before { content:""; position:absolute; left:3px; top:.6em;
  width:6px; height:6px; border-radius:50%; background:var(--border); border:1px solid var(--steel-2); }
.card-note { margin-top:auto; padding-top:4px; font-family:var(--mono); font-size:12.5px;
  color:var(--cam-dark); }

/* ---------- quy trình ---------- */
.steps { display:grid; gap:14px; counter-reset:step; }
@media (min-width:780px){ .steps { grid-template-columns:repeat(4,1fr); gap:16px; } }
.step { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:20px 18px; counter-increment:step; }
.step::before { content:counter(step,decimal-leading-zero); display:block;
  font-family:var(--mono); font-size:12px; color:var(--cam-dark); margin-bottom:9px; }
.step h3 { font-size:17px; margin-bottom:9px; }
.step ul { margin:0; padding:0; list-style:none; display:grid; gap:6px; }
.step li { font-size:14.5px; line-height:1.45; color:var(--steel); }

/* ---------- bảng giá ---------- */
.price-block + .price-block { margin-top:26px; }
.price-block h3 { margin-bottom:12px; }
.price-tbl { width:100%; border-collapse:collapse; background:var(--card);
  border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.price-tbl tr + tr td { border-top:1px solid var(--border-2); }
.price-tbl td { padding:13px 16px; font-size:15.5px; line-height:1.45; vertical-align:top; }
.price-tbl td:first-child { color:var(--ink); }
.price-tbl td:last-child { text-align:right; white-space:nowrap; font-family:var(--mono);
  font-variant-numeric:tabular-nums; font-size:15px; font-weight:500; color:var(--ink); }
.price-tbl tr:nth-child(odd) td { background:rgba(226,221,213,.16); }
.price-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.price-foot { margin-top:14px; }

/* ---------- bảo hành ---------- */
.guar { display:grid; gap:12px; }
@media (min-width:700px){ .guar { grid-template-columns:1fr 1fr; } }
.guar li { list-style:none; display:flex; gap:12px; align-items:flex-start;
  background:var(--green-soft); border:1px solid #CFE5DA; border-radius:var(--r);
  padding:15px 16px; font-size:15.5px; line-height:1.45; }
.guar li::before { content:""; flex:none; width:9px; height:9px; margin-top:.42em;
  border-radius:50%; background:var(--green); }
.guar ul { margin:0; padding:0; display:contents; }

/* ---------- ảnh việc thật ---------- */
.work { display:grid; gap:16px; }
@media (min-width:640px){ .work { grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .work { grid-template-columns:repeat(3,1fr); } }
.work figure { margin:0; }
.work img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r);
  background:var(--border); }
.work figcaption { margin-top:9px; font-size:14px; color:var(--steel); line-height:1.45; }

/* ---------- khu vực ---------- */
.cover { display:grid; gap:16px; }
@media (min-width:560px){ .cover { grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); } }
.cover-group { background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:18px 18px 20px; }
.cover-group h3 { font-size:16px; margin-bottom:11px; }
.chips { display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0; list-style:none; }
.chips li { font-size:14px; padding:5px 11px; border-radius:99px;
  border:1px solid var(--border); color:var(--steel); background:var(--paper); }

/* ---------- câu hỏi ---------- */
.faq { display:grid; gap:10px; max-width:820px; }
.faq details { background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); overflow:hidden; }
.faq summary { padding:16px 18px; font-weight:700; font-size:16.5px; line-height:1.4;
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:14px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--mono); font-weight:400;
  color:var(--cam-dark); flex:none; }
.faq details[open] summary::after { content:"\2212"; }
.faq .faq-a { padding:0 18px 17px; font-size:15.5px; line-height:1.55; color:var(--steel); }

/* ---------- đoạn văn dài ---------- */
.rich { max-width:68ch; }
.rich h3 { margin:26px 0 10px; }
.rich h3:first-child { margin-top:0; }
.rich ul { margin:0 0 15px; padding-left:20px; }
.rich li { margin-bottom:7px; line-height:1.55; }

/* ---------- đánh giá ---------- */
.quotes { display:grid; gap:16px; }
@media (min-width:820px){ .quotes { grid-template-columns:repeat(3,1fr); } }
.quote { background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:20px 19px; }
.quote blockquote { margin:0 0 13px; font-size:16px; line-height:1.5; }
.quote cite { font-style:normal; font-size:13.5px; color:var(--steel); }
.quote cite b { display:block; color:var(--ink); font-size:14.5px; font-weight:700; }

/* ---------- liên hệ ---------- */
.contact { display:grid; gap:18px; align-items:start; }
@media (min-width:760px){ .contact { grid-template-columns:1fr 1fr; } }
.contact-card { background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:20px 19px; }
.contact-card h3 { font-size:16px; margin-bottom:12px; }
.kv { display:grid; gap:11px; margin:0; }
.kv div { display:flex; gap:12px; font-size:15.5px; line-height:1.45; }
@media (max-width:430px){ .kv div{flex-direction:column;gap:2px} .kv dt{width:auto} }
.kv dt { flex:none; width:118px; color:var(--steel); font-size:14.5px; }
.kv dd { margin:0; }

/* ---------- chân trang ---------- */
.site-foot { background:var(--slate); color:#C7D0D9; margin-top:0;
  padding-block:40px 34px; font-size:14.5px; line-height:1.55; }
.site-foot .wrap { display:grid; gap:26px; }
@media (min-width:760px){ .site-foot .wrap { grid-template-columns:1.2fr 1fr 1fr; } }
.site-foot h4 { color:#EDE9E2; margin-bottom:11px; font-size:14px; }
.site-foot a { color:#C7D0D9; text-decoration:none; }
.site-foot a:hover { color:#fff; text-decoration:underline; }
.site-foot ul { margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.foot-bottom { border-top:1px solid #333C46; margin-top:30px; padding-top:18px;
  font-family:var(--mono); font-size:11.5px; color:#8C99A5; }

/* ---------- thanh gọi cố định (di động) ---------- */
.callbar { position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--border); border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom); }
.callbar a { display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--bar-h); font-weight:700; font-size:16px; text-decoration:none; color:#fff; }
.callbar .c-call { background:var(--cam); }
.callbar .c-zalo { background:var(--zalo); }
@media (min-width:860px){ .callbar { display:none; } }

/* ==========================================================================
   LỚP CHỐNG RÒ CSS CŨ  (phải nằm cuối file)
   Web cũ đặt trong Customizer: body { font-family:Roboto; font-weight:700;
   font-style:italic } và h1..h6 { color: xanh }. Dùng chọn lọc có độ ưu tiên
   cao hơn để thắng bất kể thứ tự nạp, thay vì đoán tên handle để gỡ.
   ========================================================================== */
html body {
  font-family:var(--sans); font-style:normal; font-weight:400;
  color:var(--ink); background:var(--paper);
}
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .heading-font {
  font-family:var(--sans); font-style:normal; color:var(--ink);
}
html body .site-foot h4 { color:#EDE9E2; }
html body a { font-style:normal; }
html body strong, html body b { font-weight:700; }

/* trả lại font mono cho những chỗ cố ý dùng mono */
html body .eyebrow, html body .code, html body .dim, html body .num,
html body .brand-sub, html body .foot-bottom, html body .card-note,
html body .promise ul, html body .promise li, html body .step::before,
html body .price-tbl td:last-child { font-family:var(--mono); font-style:normal; }

/* màu chữ phụ không được để CSS cũ kéo về đen */
html body .note, html body .lede, html body .use, html body .card-body li,
html body .step li, html body .work figcaption, html body .chips li,
html body .quote cite, html body .kv dt, html body .sec-head p { color:var(--steel); }
html body .eyebrow, html body .code, html body .card-note { color:var(--cam-dark); }
html body .promise li { color:#C7D0D9; }
html body .site-foot, html body .site-foot p, html body .site-foot li,
html body .site-foot a { color:#C7D0D9; }
html body .callbar a { color:#fff; font-style:normal; }
html body .btn-call, html body .btn-zalo { color:#fff; }

/* ==========================================================================
   LIÊN HỆ: mọi mục bấm được, kèm logo thật của nền tảng
   ========================================================================== */
.chlist { margin:0; padding:0; list-style:none; display:grid; gap:6px; }
.chlist > li { margin:0; }
.chlist a { display:flex; align-items:center; gap:13px; min-height:52px;
  padding:9px 12px; margin-inline:-12px; border-radius:var(--r);
  text-decoration:none; color:var(--ink);
  transition:background-color .15s ease; }
.chlist a:hover, .chlist a:focus-visible { background:rgba(226,221,213,.42); }
.ch-i { flex:none; width:38px; height:38px; display:grid; place-items:center;
  border-radius:10px; background:var(--paper); border:1px solid var(--border); }
.ch-i .ico { display:block; }
.ch-v { display:block; font-size:16px; font-weight:700; line-height:1.3; }
.ch-t { display:block; font-size:13px; color:var(--steel); line-height:1.35; margin-top:1px; }
.addr a { align-items:flex-start; }
.addr .ch-t { font-weight:700; color:var(--ink); font-size:14.5px; margin:0 0 2px; }
.addr .ch-v { font-weight:400; font-size:15px; color:var(--steel); }

/* dãy nút mạng xã hội */
.socs { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.soc { display:inline-flex; align-items:center; gap:9px; min-height:46px;
  padding:0 16px 0 13px; border-radius:99px; text-decoration:none;
  border:1px solid var(--border); background:var(--card);
  color:var(--ink); font-size:15px; font-weight:600;
  transition:border-color .15s ease, color .15s ease; }
.soc .ico { color:var(--b); flex:none; }
.soc:hover, .soc:focus-visible { border-color:var(--b); color:var(--b); }

/* mã QR Zalo cho khách dùng máy tính */
.qr { display:flex; align-items:center; gap:14px; margin-top:16px;
  padding-top:16px; border-top:1px solid var(--border); }
.qr img { width:104px; height:104px; border-radius:8px; flex:none; }
.qr .note { margin:0; max-width:18ch; }

html body .chlist a, html body .soc { font-style:normal; }
html body .ch-v { color:var(--ink); }
html body .addr .ch-v { color:var(--steel); }

/* ==========================================================================
   DẢI CAM KẾT có ảnh nền  (ảnh việc thật + phủ tối để chữ vẫn đọc rõ)
   ========================================================================== */
.promise {
  position:relative; isolation:isolate;
  background-color:var(--slate);
  background-image:linear-gradient(90deg, rgba(20,24,29,.94) 0%, rgba(20,24,29,.78) 55%, rgba(20,24,29,.94) 100%),
                   url("../img/viec-that-thao-ve-sinh-laptop-1600.webp");
  background-size:auto, cover;
  background-position:center, center 62%;
  background-repeat:no-repeat;
}
.promise ul { padding-block:15px; }

/* ==========================================================================
   DỌN MARKUP THỪA của Flatsome in ra cuối trang
   Flatsome vẫn đẩy menu di động và ô tìm kiếm vào wp_footer. Trang mới không
   nạp CSS Flatsome nên chúng hiện ra trần trụi ở đáy trang.
   ========================================================================== */
.mfp-hide,
#main-menu, #mobile-menu, .off-canvas, .off-canvas-left, .off-canvas-right,
.mobile-sidebar, .sidebar-menu, .header-search-form, .searchform-wrapper,
#search-lightbox, .mfp-wrap, .mfp-bg { display:none !important; }

/* kênh theo dõi ở chân trang */
.foot-soc { gap:9px !important; }
.foot-soc .fl { display:inline-flex; align-items:center; gap:9px; }
.foot-soc .ico { flex:none; opacity:.92; }
html body .site-foot .foot-soc a { color:#C7D0D9; text-decoration:none; }
html body .site-foot .foot-soc a:hover { color:#fff; }
@media (min-width:760px){ .site-foot .wrap { grid-template-columns:1.25fr .75fr 1.1fr .9fr; } }

/* lời khen có ảnh khách thật */
.quote { margin:0; padding:0; overflow:hidden; display:flex; flex-direction:column; }
.quote-img { background:var(--border); }
.quote-img img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.quote-body { padding:18px 19px 20px; }
.quote blockquote { margin:0 0 13px; font-size:16px; line-height:1.5; }
.quote figcaption { font-size:13.5px; color:var(--steel); line-height:1.4; }
.quote figcaption b { display:block; color:var(--ink); font-size:14.5px; font-weight:700; }
html body .quote figcaption { font-style:normal; }

/* ==========================================================================
   BÀI VIẾT  (đường ống đăng tự động dùng khung này)
   ========================================================================== */
.uc-article .wrap { max-width:760px; }
.uc-article h1 { margin-bottom:18px; }
.uc-art-hero { margin:0 0 26px; border-radius:var(--r-lg); overflow:hidden; background:var(--border); }
.uc-art-hero img { width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; }
.uc-art-body { font-size:17.5px; line-height:1.68; }
.uc-art-body h2 { font-size:clamp(20px,3.4vw,26px); margin:36px 0 12px; }
.uc-art-body h3 { font-size:18.5px; margin:26px 0 9px; }
.uc-art-body p { margin:0 0 17px; max-width:none; }
.uc-art-body ul, .uc-art-body ol { margin:0 0 18px; padding-left:22px; }
.uc-art-body li { margin-bottom:9px; }
.uc-art-body li::marker { color:var(--steel-2); }
.uc-art-body table { width:100%; border-collapse:collapse; background:var(--card);
  border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; font-size:15.5px; }
.uc-art-body th { text-align:left; padding:12px 15px; background:rgba(226,221,213,.32);
  font-weight:700; font-size:14.5px; }
.uc-art-body td { padding:12px 15px; border-top:1px solid var(--border-2); vertical-align:top; }
.uc-art-body td:last-child { text-align:right; white-space:nowrap;
  font-family:var(--mono); font-variant-numeric:tabular-nums; }
.uc-art-body figure.wp-block-table { margin:0 0 22px; overflow-x:auto; }
.uc-art-body strong { font-weight:700; }
.uc-art-body a { color:var(--cam-dark); }
.uc-art-cta { display:flex; flex-wrap:wrap; gap:10px; margin-top:34px;
  padding-top:26px; border-top:1px solid var(--border); }
html body .uc-art-body, html body .uc-art-body * { font-style:normal; }
html body .uc-art-body td:last-child { font-family:var(--mono); }

/* ============ TRANG LIỆT KÊ BÀI (/bai-viet/, /phan-mem/, ...) ============ */
html body .sec-arc{padding-block:clamp(2.5rem,6vw,4.5rem)}
html body .arc-lead{max-width:62ch;color:var(--steel);font-size:1.0625rem;line-height:1.65;margin:.75rem 0 0}
html body .arc-dem{color:var(--steel);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;margin:.5rem 0 0}

html body .arc-con{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:1.5rem 0 0}
html body .arc-con a{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;
  border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--ink);
  font-size:.875rem;text-decoration:none;line-height:1.4}
html body .arc-con a:hover{border-color:var(--cam);color:var(--cam)}
html body .arc-con span{color:var(--steel);font-size:.75rem;font-variant-numeric:tabular-nums}

html body .arc-list{display:grid;gap:1.25rem;margin-top:2rem;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
html body .arc-card{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--border);border-radius:10px;overflow:hidden}
html body .arc-anh{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--paper);max-width:100%}
html body .arc-anh img{width:100%;height:100%;object-fit:cover;display:block}
html body .arc-noanh{display:block;width:100%;height:100%;
  background:linear-gradient(135deg,var(--paper),var(--border))}
html body .arc-noi{display:flex;flex-direction:column;gap:.5rem;padding:1.1rem 1.15rem 1.25rem;flex:1}
html body .arc-ngay{margin:0;color:var(--steel);font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;font-variant-numeric:tabular-nums}
html body .arc-card h2{margin:0;font-size:1.0625rem;line-height:1.4;font-weight:600;text-wrap:balance}
html body .arc-card h2 a{color:var(--ink);text-decoration:none}
html body .arc-card h2 a:hover{color:var(--cam)}
html body .arc-tom{margin:0;color:var(--steel);font-size:.9375rem;line-height:1.6}
html body .arc-doc{margin-top:auto;padding-top:.5rem;color:var(--cam);font-size:.875rem;
  font-weight:600;text-decoration:none}
html body .arc-doc:hover{text-decoration:underline}
html body .arc-trong{margin-top:2rem;color:var(--steel)}

html body .arc-trang{margin-top:2.5rem}
html body .arc-trang ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0}
html body .arc-trang a,html body .arc-trang span{display:inline-block;min-width:2.5rem;text-align:center;
  padding:.5rem .7rem;border:1px solid var(--border);border-radius:6px;background:#fff;
  color:var(--ink);text-decoration:none;font-size:.9375rem;font-variant-numeric:tabular-nums}
html body .arc-trang a:hover{border-color:var(--cam);color:var(--cam)}
html body .arc-trang .current{background:var(--ink);border-color:var(--ink);color:#fff}

/* bài cùng chủ đề, cuối mỗi bài */
html body .uc-lienquan{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}
html body .uc-lienquan h2{margin:0 0 .75rem;font-size:1rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--steel);font-weight:600}
html body .uc-lienquan ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
html body .uc-lienquan a{color:var(--ink);text-decoration:none;font-weight:500;line-height:1.5}
html body .uc-lienquan a:hover{color:var(--cam);text-decoration:underline}

@media (max-width:520px){
  html body .arc-list{grid-template-columns:1fr}
}


/* menu di dong: chốt lại ở cuối file để CSS Customizer cũ không đè */
html body .nav-mo { font-style:normal; }
html body .nav-di-dong a { font-family:var(--sans); font-weight:500; font-style:normal; }
html body .nav-di-dong .nav-zalo { color:#fff; font-weight:600; }
html body .head-call .btn { white-space:nowrap; }
html body .nav-di-dong .wrap { align-items:stretch; }
html body .nav-di-dong a { text-align:left; }
html body .nav-di-dong .nav-zalo { text-align:center; }

/* ══════════════════════════════════════════════════════════════════
   NÂNG BỐ CỤC 20/09
   Bốn việc, không thêm một tệp nào, không thêm thư viện nào:
   đảo nhịp sáng tối, phóng chữ tiêu đề, đồng bộ ảnh, hiện dần khi cuộn.
   ══════════════════════════════════════════════════════════════════ */

/* ---------- 1. KHỐI NỀN TỐI ----------
   Đổi TOKEN ở phạm vi khối, không đi sửa từng phần tử con.
   Nhờ vậy mọi thứ bên trong tự đổi theo mà không cần viết thêm luật nào. */
html body .sec-toi {
  --ink:#F2EFEA; --steel:#A9B2BC; --steel-2:#8D97A2;
  --paper:#171B20; --card:#1F242A; --border:#2C333A; --border-2:#252B31;
  --cam-soft:#2A1B13; --green-soft:#16241D;
  background:#171B20; color:#F2EFEA;
}
html body .sec-toi h2, html body .sec-toi h3,
html body .sec-toi b, html body .sec-toi blockquote { color:#F2EFEA; }
html body .sec-toi .lede, html body .sec-toi li,
html body .sec-toi figcaption, html body .sec-toi p { color:#A9B2BC; }
html body .sec-toi .eyebrow { color:#E88A5C; }
html body .sec-toi .step, html body .sec-toi .quote,
html body .sec-toi .card, html body .sec-toi .symp-card {
  background:#1F242A; border-color:#2C333A; }

/* ---------- 2. CHỮ TIÊU ĐỀ TO HẲN LÊN ----------
   Trước đây h1 và h2 gần bằng nhau nên trang không có điểm nhấn nào.
   Dùng clamp để máy tính thì lớn, điện thoại vẫn vừa. */
html body .hero h1 { font-size:clamp(2rem, 5.2vw, 3.4rem); line-height:1.08;
  letter-spacing:-.03em; text-wrap:balance; }
html body .sec-head h2 { font-size:clamp(1.5rem, 3.2vw, 2.35rem); line-height:1.15;
  letter-spacing:-.025em; text-wrap:balance; }
html body .sec-head { margin-bottom:clamp(1.5rem, 3vw, 2.4rem); }
html body .sec-head .lede { max-width:58ch; font-size:1.0625rem; line-height:1.65; }

/* ---------- 3. ẢNH ĐỒNG BỘ ----------
   Ảnh của tiệm là ảnh chụp điện thoại, mỗi tấm một tỉ lệ, đặt cạnh nhau
   trông như ảnh hiện trường. Ép cùng một khung và phủ một lớp rất nhẹ thì
   chúng trở thành một bộ, nhìn có chủ đích. Ảnh vẫn là ảnh thật. */
html body .card-img, html body .work-img, html body .quote-img {
  display:block; position:relative; overflow:hidden;
  border-radius:var(--r); background:var(--border-2); }
html body .card-img { aspect-ratio:3/2; }
html body .work-img { aspect-ratio:4/3; }
html body .quote-img { aspect-ratio:1/1; }
html body .card-img img, html body .work-img img, html body .quote-img img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.6,.2,1); }
/* phủ tối rất nhẹ từ dưới lên, đủ để ảnh lệch sáng trông đều nhau hơn */
html body .card-img::after, html body .work-img::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,24,29,0) 55%, rgba(20,24,29,.16) 100%); }
html body .card:hover .card-img img,
html body .work figure:hover .work-img img { transform:scale(1.035); }

/* ---------- 4. ĐỘ NỔI CÓ PHÂN CẤP ----------
   Trước đây thẻ nào cũng cùng viền, cùng bo góc, cùng độ phẳng.
   Nhấc thẻ dịch vụ lên vì đó là thứ ra tiền, để mọi thứ khác nằm yên. */
html body .card { box-shadow:var(--shadow); border-radius:var(--r-lg);
  transition:transform .28s ease, box-shadow .28s ease; }
html body .card:hover { transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(20,24,29,.06), 0 18px 40px -22px rgba(20,24,29,.4); }
html body .symp-card, html body .step { box-shadow:none; }

/* ---------- 5. HIỆN DẦN KHI CUỘN ----------
   Viết bằng CSS thuần, KHÔNG thêm JS. Trình duyệt nào không hỗ trợ
   animation-timeline thì khối hiện bình thường ngay từ đầu, không bao giờ
   có chuyện nội dung kẹt ở trạng thái trong suốt rồi không bao giờ hiện ra. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 700px) {
    .reveal { animation:uc-hien linear both; animation-timeline:view();
      animation-range:entry 0% entry 42%; }
    .reveal.hero { animation:none; }  /* khối đầu trang phải hiện ngay, không chờ cuộn */
  }
}
@keyframes uc-hien {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:none; }
}

/* ══════════════════════════════════════════════════════════════════
   LỚP ALMANAC  ·  dựng lại khung trang 20/09
   Thể loại: sách tra cứu. Giấy, đường kẻ, bảng, thông tin dày.
   Lý do chọn: khách vào đây đang hoảng vì máy hỏng, cần TRA chứ không cần ngắm.
   Chữ hiển thị Archivo, chữ đọc Be Vietnam Pro, con số IBM Plex Mono.
   ══════════════════════════════════════════════════════════════════ */

/* ---------- chữ hiển thị ---------- */
html body .hero h1, html body .sec-head h2, html body .ci-nhom h3 {
  font-family:var(--hien); font-weight:700; letter-spacing:-.03em; }
html body .hero h1 { font-weight:800; }

/* Nhãn nhỏ chạy bằng mono, viết hoa, giãn chữ. Đây là chữ ký của theme:
   nó nói "đây là tài liệu tra cứu" mà không cần một hình trang trí nào. */
html body .eyebrow {
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cam-dark); }

/* ---------- CHỈ MỤC TRIỆU CHỨNG, khối mở của trang ---------- */
html body .ci { display:grid; gap:clamp(2rem,4vw,3.25rem); margin-top:.5rem; }
@media (min-width:880px){ html body .ci { grid-template-columns:1fr 1fr; gap:3.5rem; } }

html body .ci-nhom h3 {
  margin:0 0 .25rem; font-size:1.0625rem; letter-spacing:.01em;
  padding-bottom:.6rem; border-bottom:2px solid var(--ink); }
html body .ci-list { list-style:none; margin:0; padding:0; }
html body .ci-list li {
  display:grid; grid-template-columns:1fr auto; gap:.15rem 1rem;
  align-items:baseline; padding:.72rem 0;
  border-bottom:1px solid var(--border); }
html body .ci-list li:last-child { border-bottom:0; }
html body .ci-benh {
  grid-column:1; font-weight:600; color:var(--ink); line-height:1.4; font-size:.9688rem; }
html body .ci-viec {
  grid-column:1; font-size:.8125rem; color:var(--steel); line-height:1.45; }
/* Giá chạy mono và căn phải: các con số xếp thành một cột thẳng,
   mắt dò giá theo chiều dọc chứ không phải đọc từng dòng. */
html body .ci-gia {
  grid-column:2; grid-row:1/3; align-self:center; text-align:right; white-space:nowrap;
  font-family:var(--mono); font-size:.8125rem; font-weight:500;
  font-variant-numeric:tabular-nums; color:var(--ink); }
html body .ci-chan {
  margin:2rem 0 0; padding-top:1rem; border-top:1px solid var(--border);
  color:var(--steel); font-size:.9375rem; }
@media (max-width:420px){
  html body .ci-list li { grid-template-columns:1fr; }
  html body .ci-gia { grid-column:1; grid-row:auto; text-align:left; margin-top:.2rem; }
}

/* ---------- MĂNG SÉT thay cho thanh menu kiểu cũ ----------
   Thanh "tên bên trái, link giữa, nút bên phải" là vân tay AI dễ nhận nhất.
   Đổi sang kiểu măng sét báo: tên và số điện thoại trên một hàng, một đường kẻ
   đậm cắt ngang, dãy link nằm HÀNG DƯỚI. Vẫn một dòng trên điện thoại. */
@media (min-width:860px){
  html body .site-head .wrap { flex-wrap:wrap; align-items:center;
    padding-block:.9rem .1rem; min-height:0; row-gap:0; }
  html body .site-head .brand { order:1; }
  html body .head-call { order:2; margin-left:auto; }
  html body .site-nav { order:3; flex-basis:100%; margin-left:0; gap:1.6rem;
    padding-block:.7rem .75rem; margin-top:.85rem; border-top:2px solid var(--ink); }
  html body .site-nav a { font-family:var(--mono); font-size:.75rem; font-weight:500;
    letter-spacing:.1em; text-transform:uppercase; }
}

/* ---------- số trong bảng giá căn cột ---------- */
html body .price-tbl td:last-child { font-variant-numeric:tabular-nums; }