/* Nha Khoa Ky Hoa - thanh lien he noi (dung chung trang chu + 38 trang build.py)
 *
 * Vi sao la file rieng: trang chu KHONG dung css/style.css (no co <style> inline
 * rieng), nen moi thu dung chung phai nam o file duoc CA HAI ben nap. Giong
 * cach da lam voi css/anim.css.
 *
 * ⚠️ MAU HARDCODE, khong dung var(--brand-*): bien mau chi ton tai trong
 * css/style.css nen trang chu khong co. Dung var() thi thanh nay mat mau
 * tren trang chu ma khong bao loi.
 *
 * ⚠️ The .kh-rail PHAI la con truc tiep cua <body>, KHONG duoc nam trong
 * <section>. css/anim.css dang giau `section ~ section > * > *`; nam nham
 * trong section la ca thanh bien mat.
 */

/* Thanh nay LUON la cot doc bam mep phai, o moi be rong man hinh
   (khach chot 01/08/2026: bo han kieu thanh ngang bam day tren dien thoai).
   Chi khac nhau o CO THANH:
     - tu 1460px tro len : ban DAY DU, co chu, rong 78px
     - duoi 1460px       : ban THU GON, chi bieu tuong, rong 46px
   Xem phan "CHUA CHO THANH DOC" ben duoi de biet cach tranh de len noi dung. */
.kh-rail{
  position: fixed;
  /* ⚠️ 99 chu KHONG phai 120. Phai NHO HON 100 (z-index cua <header>).
     Bang tim kiem va menu mobile deu nam BEN TRONG <header>, nen du chung khai
     z-index 150/200 thi ca cum van chi dung o muc 100. De thanh o 120 la thanh
     de len bang ket qua tim kiem: do 01/08/2026 o 500px, thanh che mat duoi
     dong mo ta cua 2 ket qua. Con noi dung trang cao nhat moi z-index 2 nen 99
     van du de thanh noi len tren tat ca.
     Bac thang dang dung: noi dung <=2 - thanh nay 99 - header 100 (bang tim
     kiem 150 va menu mobile 200 tinh trong header) - modal dat lich 1000. */
  z-index: 99;
  display: flex;
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  right: env(safe-area-inset-right, 0px);   /* iPhone xoay ngang co khuyet o canh */
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 2px;
  border-radius: 12px 0 0 12px;
  overflow: hidden;
  box-shadow: 0 6px 26px rgba(14,47,39,.22);
}

.kh-rail a{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 600;
  color: #fff;
  background: #14463b;
  transition: background-color .2s ease, color .2s ease;
}
.kh-rail a:hover{ background: #1a5a4b; }
.kh-rail a:active{ background: #0e2f27; }

/* Nut Zalo lay mau vang dong de tach khoi hai nut kia */
.kh-rail a.kh-rail__zalo{ background: #c2a15a; color: #14463b; }
.kh-rail a.kh-rail__zalo:hover{ background: #cdad66; }

.kh-rail svg{ flex: none; }

/* ---------- Man RONG (>=1460px): ban day du, co chu ----------
   Nguong 1460px KHONG phai chon bua: ban co chu rong 78px va KHONG bop noi
   dung, nen le trong hai ben phai tu no du rong.
     .container cua trang con = min(1280px, 100vw - 40px)
     1280 + 78*2 (thanh) + 12*2 (ho cho de tho) = 1460px
   ⚠️ Nguong cu la 1400px va no SAI: tinh nham khung noi dung la 1240px (so cua
   trang chu) trong khi trang con rong 1280px. Do bang script 01/08/2026: o dung
   1400px thanh de len the <h1> cua /bang-gia/ va cua bai viet 18px. */
@media (min-width: 1460px){
  .kh-rail a{
    flex-direction: column;
    gap: 5px;
    width: 78px;
    padding: 14px 6px;
    font-size: .74rem;
    line-height: 1.25;
    text-align: center;
  }
}

/* ---------- Duoi 1460px: ban thu gon, chi con bieu tuong ---------- */
@media (max-width: 1459px){
  /* Chu bi bo di, KHONG phai bo the <span> khoi HTML: moi the <a> deu da co
     aria-label nen trinh doc man hinh van doc duoc ten nut. */
  .kh-rail a span{ display: none; }
  .kh-rail a{
    width: 46px;
    min-height: 48px;   /* 46x48 > 44x44, du lon de bam bang ngon tay */
    padding: 0;
  }
  .kh-rail svg{ width: 20px; height: 20px; }
}

/* ---------- KHÔNG chừa lề cho thanh dọc (anh Hiệp chốt 2/8/2026) ----------
   Bản trước chừa `padding-right: 32px` cho khung nội dung dưới 1460px để thanh
   không đè lên chữ. Hệ quả: trên điện thoại lề trái 20px còn lề phải 52px, nhìn
   lệch hẳn sang trái.

   Anh Hiệp chọn ĐÁNH ĐỔI NGƯỢC LẠI: giữ lề hai bên đối xứng, chấp nhận thanh có
   thể đè lên mép phải nội dung. Lý do dùng được: thanh là `position: fixed` và
   nằm giữa màn hình theo chiều dọc, nên nó ĐỨNG YÊN còn nội dung trôi qua bên
   dưới - chữ bị che chỉ bị che lúc nó đi ngang qua dải đó, cuộn thêm là hiện ra.

   ⚠️ NGOẠI LỆ DUY NHẤT: bảng giá. Đo ở khung 500px cho thấy thanh che **64/64 ô
   giá**. Ở đây lý do "cuộn thêm là hiện ra" KHÔNG dùng được: bảng giá cuộn NGANG
   và cột giá nằm cố định ở mép phải, nên cuộn dọc bao nhiêu nó vẫn nằm dưới thanh.
   Vì vậy chừa lề riêng cho vùng bảng, không chừa cho phần còn lại của site. */

@media (max-width: 1459px){
  /* 52px = 46px bề ngang thanh + 6px hở.
     ⚠️ KHÔNG đặt `padding-right` lên chính `.table-scroll`: trình duyệt không
     tính phần đệm đó vào cuối vùng cuộn, nên cuộn hết sang phải thì cột giá vẫn
     nằm dưới thanh (đo thật: vẫn che 62/64 ô). Phải đặt lề lên CHÍNH CÁI BẢNG -
     lề của phần tử con thì được cộng vào bề rộng cuộn. */
  .table-scroll > table{ margin-right: 52px; }
}

/*
/* ==========================================================================
   VI TUONG TAC (them 31/07/2026)
   Chi them nhung gi CHUA CO. style.css da co san: the nang len khi hover,
   nut doi mau khi hover, anh trong the phong nhe. Khong lam lai may cai do.
   Ba thu con thieu: phan hoi khi BAM, mui ten nhich, gach chan menu.
   ========================================================================== */

/* 1) Phan hoi khi bam nut. Hover thi da co, nhung bam xuong khong co gi -
      tren dien thoai KHONG CO hover, nen day la phan hoi duy nhat nguoi dung
      nhan duoc khi cham vao nut. */
.btn-main-gold:active,
.btn-main-outline:active,
.btn-header-cta:active{
  transform: translateY(1px) scale(.995);
}

/* 2) Mui ten trong link "Doc ngay ->" nhich sang khi ro chuot vao the.
      .pillar-link von khong co rule hover nao. */
.topic-card, .pillar-card, .service-list-card{ /* de transition chay muot */ }
.pillar-link{
  display: inline-block;
  transition: transform .25s cubic-bezier(.22,.61,.36,1);
}
.topic-card:not(.static):hover .pillar-link,
.pillar-card:not(.static):hover .pillar-link,
.service-list-card:hover .pillar-link{
  transform: translateX(4px);
}

/* 3) Gach chan chay ngang duoi muc menu dang ro chuot.
      ⚠️ Phai them position:relative - the <a> trong menu dung style inline va
      KHONG co position, khong dat thi ::after se bam vao to tien khac va bay lung tung. */
.dh1{ position: relative; }
.dh1::after{
  content: "";
  position: absolute;
  left: 14px;              /* khop padding-inline 14px cua the <a> */
  right: 14px;
  bottom: 4px;
  height: 2px;
  background: #c2a15a;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.dh1:hover::after{ transform: scaleX(1); }

@media (prefers-reduced-motion: reduce){
  .btn-main-gold:active,
  .btn-main-outline:active,
  .btn-header-cta:active{ transform: none; }
  .pillar-link,
  .topic-card:not(.static):hover .pillar-link,
  .pillar-card:not(.static):hover .pillar-link,
  .service-list-card:hover .pillar-link{ transform: none; transition: none; }
  .dh1::after{ transition: none; }
}

/* ------------------------------------------------------------------
   Nút đổi ngôn ngữ VI <-> EN (build.py sinh, chỉ hiện khi trang kia có
   bản dịch thật). Dáng khớp với nút kính lúp ở css/search.css để hai
   nút đứng cạnh nhau nhìn thành một cặp.
   ------------------------------------------------------------------ */
.kh-lang{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  background: #fff;
  border: 1px solid #d5cab6;
  border-radius: 999px;
  color: #14463b;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.kh-lang:hover{ border-color: #c2a15a; background: #fbf9f3; }
.kh-lang:active{ transform: translateY(1px); }

/* ------------------------------------------------------------------
   Nút đặt trong vùng bài viết (.prose)

   `.prose a` (0,1,1) đè lên `.btn-main-gold` (0,1,0) nên nút vàng bị nhận
   màu chữ xanh đậm của link - chữ xanh trên nền xanh, MẤT HẲN chữ; nút viền
   thì bị gạch chân. Trang tiếng Việt không lộ vì các nút đó nằm ngoài .prose,
   bản tiếng Anh dựng bằng khuôn chung nên nằm trong. Trả lại đúng kiểu nút.
   ------------------------------------------------------------------ */
.prose a.btn-main-gold,
.prose a.btn-main-outline {
  text-decoration: none;
}
.prose a.btn-main-gold { color: #ffffff; font-weight: 700; }
.prose a.btn-main-outline { color: var(--ink-primary); font-weight: 700; }

/* ------------------------------------------------------------------
   Header: chống vỡ dòng sau khi thêm nút đổi ngôn ngữ

   ⚠️ LỖI ĐÃ XẢY RA 3/8/2026: thêm nút VI/EN (44px + khe 12px = 56px) vào
   header mà KHÔNG đo lại. Ngưỡng ẩn menu vẫn để 1259px tính từ hồi chưa có
   nút đó, nên menu tiếng Việt vỡ hai dòng ở mọi bề rộng từ 1260px trở lên -
   kể cả 1600px, vì khung nội dung chặn ở 1240px.

   Số đo thật (khung 1240px): logo 248 + menu 651 + khối phải 286 + 2 khe 40
   = 1225, cộng nút mới thành 1281 > 1240 -> vỡ.
   Bóp khoảng đệm ngang mục menu từ 14px xuống 11px: bớt 42px cho 7 mục,
   tổng còn 1183px, dư 57px. Hai mục vẫn cách nhau 24px, bấm bằng ngón tay
   thoải mái.

   Áp cho CẢ HAI ngôn ngữ. Dòng phụ dưới logo cũng ép một dòng.
   ------------------------------------------------------------------ */
header nav a {
  padding-left: 11px !important;
  padding-right: 11px !important;
  white-space: nowrap;
}
header a > span > span { white-space: nowrap; }
