/* ============================================================
   TAKASHI MOBILE — style.css (bổ sung cho TailwindCSS CDN)
   Bảng màu sakura:
   --sakura-bg   #FDEFF2  nền hồng anh đào nhạt
   --sakura-soft #F6C6D5  hồng phấn
   --sakura      #E4517E  hồng đậm (nakabeni) — accent chính
   --sakura-deep #8E3149  đỏ thẫm — tiêu đề nhấn
   --sumi        #2A2226  đen mực ấm — chữ
   ============================================================ */
:root {
  --sakura-bg: #FDEFF2;
  --sakura-soft: #F6C6D5;
  --sakura: #E4517E;
  --sakura-deep: #8E3149;
  --sumi: #2A2226;
}

html { scroll-behavior: smooth; }

body {
  font-family: "Be Vietnam Pro", "Noto Sans JP", system-ui, sans-serif;
  color: var(--sumi);
  background: var(--sakura-bg);
}

.font-display { font-family: "Noto Serif JP", "Be Vietnam Pro", serif; }

/* ---------- Header ---------- */
#site-header {
  transition: box-shadow .25s ease, background-color .25s ease;
  background: rgba(253, 239, 242, .85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#site-header.scrolled { box-shadow: 0 2px 18px rgba(142, 49, 73, .12); }

.nav-current { color: var(--sakura); font-weight: 700; }

/* Menu mobile trượt xuống */
#nav-menu {
  display: none;
}
#nav-menu.open { display: flex; }
@media (min-width: 768px) {
  #nav-menu { display: flex !important; }
}
body.nav-open { overflow: hidden; }
@media (min-width: 768px) {
  body.nav-open { overflow: auto; }
}

/* Nút chuyển ngữ */
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  padding: .3rem .55rem;
  border-radius: 9999px;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  border: 1.5px solid var(--sakura-soft);
  color: var(--sakura-deep);
  transition: all .2s;
}
.lang-btn .flag { font-size: 1.05rem; line-height: 1; }
.lang-btn.lang-active {
  background: var(--sakura);
  border-color: var(--sakura);
  color: #fff;
}

/* ---------- Hero ---------- */
.hero-wrap { position: relative; overflow: hidden; }
#sakura-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hero-gradient {
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(246, 198, 213, .55), transparent 60%),
    radial-gradient(40rem 24rem at -10% 110%, rgba(228, 81, 126, .18), transparent 60%),
    linear-gradient(180deg, #FFF7F9 0%, var(--sakura-bg) 100%);
}

/* Chữ dọc kiểu Nhật */
.tategaki {
  writing-mode: vertical-rl;
  letter-spacing: .35em;
  font-family: "Noto Serif JP", serif;
  color: rgba(142, 49, 73, .35);
  user-select: none;
}

/* Con dấu hanko */
.hanko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem; height: 3.2rem;
  border: 2.5px solid var(--sakura);
  border-radius: 9999px;
  color: var(--sakura);
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  line-height: 1.05;
  font-size: .8rem;
  transform: rotate(-6deg);
}

/* ---------- Card & section ---------- */
.card {
  background: #fff;
  border-radius: 1.25rem;
  border: 1px solid rgba(246, 198, 213, .6);
  box-shadow: 0 6px 24px rgba(142, 49, 73, .06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(142, 49, 73, .12); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  color: var(--sakura);
  text-transform: uppercase;
}
.eyebrow::before {
  content: "❀";
  font-size: .9rem;
}

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--sakura); color: #fff;
  padding: .8rem 1.6rem; border-radius: 9999px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(228, 81, 126, .35);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn-primary:hover { background: var(--sakura-deep); transform: translateY(-2px); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 2px solid var(--sakura-soft); color: var(--sakura-deep);
  padding: .8rem 1.6rem; border-radius: 9999px; font-weight: 700;
  transition: all .2s;
}
.btn-ghost:hover { border-color: var(--sakura); color: var(--sakura); }

/* Bảng 会社概要 */
.spec-table th {
  width: 34%;
  background: #FFF7F9;
  color: var(--sakura-deep);
  font-weight: 700;
  white-space: nowrap;
}
.spec-table th, .spec-table td {
  padding: .9rem 1rem;
  border-bottom: 1px solid rgba(246, 198, 213, .6);
  text-align: left;
  vertical-align: top;
  font-size: .95rem;
}

/* Chip lọc dòng máy (trang sản phẩm) */
.chip {
  padding: .45rem .95rem;
  border-radius: 9999px;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  background: #fff;
  border: 1.5px solid var(--sakura-soft);
  color: var(--sakura-deep);
  transition: all .2s;
}
.chip:hover { border-color: var(--sakura); }
.chip-active { background: var(--sakura); border-color: var(--sakura); color: #fff; }

/* ---------- Bảng giá sửa chữa ---------- */
.price-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.price-tab {
  padding: .55rem 1.15rem;
  border-radius: 9999px;
  font-size: .85rem; font-weight: 700;
  background: #fff;
  border: 1.5px solid var(--sakura-soft);
  color: var(--sakura-deep);
  transition: all .2s;
}
.price-tab:hover { border-color: var(--sakura); }
.price-tab.active { background: var(--sakura); border-color: var(--sakura); color: #fff; }

.price-select {
  width: 100%;
  padding: .7rem .9rem;
  border-radius: .75rem;
  border: 1.5px solid var(--sakura-soft);
  background: #fff;
  color: var(--sumi);
  font-size: .95rem; font-weight: 600;
}
.price-select:focus { outline: none; border-color: var(--sakura); }

.price-card-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.15rem;
  border-bottom: 1px solid rgba(246, 198, 213, .6);
  font-size: .95rem;
}
.price-card-row:last-child { border-bottom: 0; }
.price-card-row .price-val { font-weight: 800; color: var(--sakura-deep); white-space: nowrap; }

.price-matrix { width: 100%; border-collapse: collapse; font-size: .92rem; }
.price-matrix thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--sakura); color: #fff;
  font-weight: 700; padding: .85rem 1rem;
  text-align: center; white-space: nowrap;
}
.price-matrix thead th:first-child { text-align: left; }
.price-matrix tbody th {
  text-align: left; font-weight: 700;
  color: var(--sakura-deep); background: #FFF7F9;
  padding: .8rem 1rem; white-space: nowrap;
}
.price-matrix tbody td {
  text-align: center; padding: .8rem 1rem;
  white-space: nowrap; font-weight: 600;
}
.price-matrix tbody tr { border-bottom: 1px solid rgba(246, 198, 213, .5); }
.price-matrix tbody tr:last-child { border-bottom: 0; }
.price-matrix tbody tr:nth-child(even) td { background: rgba(253, 239, 242, .45); }
.price-matrix td.na { color: rgba(42, 34, 38, .32); font-weight: 400; }

.price-note { font-size: .8rem; color: rgba(42, 34, 38, .7); line-height: 1.7; }

/* ---------- Hiệu ứng hiện dần ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.revealed { opacity: 1; transform: none; }

/* ---------- Nút liên hệ nổi (mobile + PC): Facebook + Zalo ---------- */
.fab-stack {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60;
  display: flex; flex-direction: column; gap: .7rem;
}
.fab {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem; border-radius: 9999px;
  color: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
  transition: transform .2s ease;
}
.fab:hover, .fab:active { transform: scale(1.07); }
.fab svg { width: 30px; height: 30px; }
.fab-fb   { background: #1877F2; }
.fab-zalo { background: #0068FF; }

/* ---------- Khả năng truy cập ---------- */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--sakura);
  outline-offset: 2px;
  border-radius: .375rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card, .btn-primary { transition: none; }
}