/* =========================================================================
   domain.css — HAI NEN TANG: CO KHI / NOI THAT

   Hai thu o day:
     1. Doi MAU NHAN theo nen tang dang chon. Co khi = VANG thuong hieu,
        Noi that = nau go. Chi ghi de vai bien trong tokens.css,
        khong file nao khac phai biet.
     2. The gioi thieu nen tang + nut chon.
   ========================================================================= */

/* ── 1. Mau theo nen tang ────────────────────────────────────
   Ghi de len bien cua tokens.css. Dat tren <html> qua js/domain.js.
   Ban Toi phai chinh rieng: mau go dam tren nen den se chim.
   Nen tang Co khi KHONG can khoi ghi de nao — no dung thang mau vang goc
   trong tokens.css. */
:root[data-domain-active="furn"] {
  --accent:        #a2662f;   /* nau go */
  --accent-solid:  #a2662f;
  --accent-fg:     #ffffff;   /* nau go dam -> chu TRANG moi doc duoc */
  --accent-hover:  #b87a3d;
  --accent-soft:   #f6ece0;
  --accent-2:      #d99a2b;
  --blue-line:     rgba(162, 102, 47, .20);
  --blue-line-2:   rgba(162, 102, 47, .10);
}
:root[data-theme="dark"][data-domain-active="furn"] {
  --accent:        #d9a05e;
  --accent-solid:  #a2662f;
  --accent-fg:     #ffffff;
  --accent-hover:  #c1834a;
  --accent-soft:   #3a2a1a;
  --blue-line:     rgba(217, 160, 94, .22);
  --blue-line-2:   rgba(217, 160, 94, .10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-domain-active="furn"] {
    --accent:       #d9a05e;
    --accent-solid: #a2662f;
    --accent-fg:    #ffffff;
    --accent-hover: #c1834a;
    --accent-soft:  #3a2a1a;
    --blue-line:    rgba(217, 160, 94, .22);
    --blue-line-2:  rgba(217, 160, 94, .10);
  }
}

/* ── 2. The gioi thieu nen tang ─────────────────────────────
   Hai the lon dat canh nhau ngay duoi hero: nguoi vao trang biet ngay
   InventorTool co hai manh, va manh nao dang dung duoc. */
.domains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap);
}

.domain {
  position: relative;
  display: grid;
  gap: 16px;
  align-content: start;
  padding: clamp(24px, 3vw, 34px);
  overflow: hidden;
}

/* Vet mau mo o goc tren — phan biet hai the ma khong can doi ca nen. */
.domain::after {
  content: "";
  position: absolute;
  top: -70px; right: -70px;
  width: 200px; height: 200px;
  border-radius: 50%;
  filter: blur(50px);
  opacity: .5;
  pointer-events: none;
}
.domain--mech::after { background: #e8a317; }   /* vang thuong hieu */
.domain--furn::after { background: #a2662f; }

.domain__ico {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 12px;
  color: var(--accent-fg);
}
.domain--mech .domain__ico { background: var(--gold-grad); color: #14181c; }
.domain--furn .domain__ico { background: linear-gradient(135deg, #a2662f, #d99a2b); color: #fff; }

.domain h3 { margin: 0; font-size: 1.25rem; }
.domain__sub {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.domain p { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }

.domain__list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.domain__list li { display: flex; gap: 9px; margin: 0; }
.domain__list svg { flex: none; margin-top: 4px; color: var(--accent); }
/* The Noi that giu mau go ke ca khi dang xem nen tang Co khi. */
.domain--furn .domain__list svg { color: #a2662f; }

.domain__foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }

/* Khoi "sap ra mat" — noi dung thay cho phan chi tiet cua nen tang chua xong. */
.soon {
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
  padding: clamp(36px, 6vw, 72px) clamp(20px, 4vw, 40px);
  border: 2px dashed var(--border-strong);
  border-radius: 8px;
  background: var(--surface-2);
}
.soon__ico { color: var(--accent); opacity: .8; }
.soon h3 { margin: 0; }
.soon p { margin: 0; max-width: 52ch; color: var(--text-muted); }

/* ── 3. Nut chon nen tang ───────────────────────────────────
   Cung kieu voi .seg cua add-in: hai o dinh nhau, o dang chon nen dam. */
.domsw {
  display: inline-flex;
  border: var(--hair, 1px) solid var(--border-strong);
  border-radius: 5px;
  overflow: hidden;
  background: var(--card);
  margin-bottom: clamp(24px, 3vw, 36px);
}
.domsw button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 650;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.domsw button + button { border-left: 1px solid var(--border); }
.domsw button:hover { color: var(--text); background: var(--surface-3); }
.domsw button.is-active { background: var(--accent-solid); color: var(--accent-fg); }
.domsw .tag { color: inherit; opacity: .75; }
@media (max-width: 520px) {
  .domsw { width: 100%; }
  .domsw button { flex: 1; justify-content: center; padding: 11px 12px; }
}


/* =========================================================================
   HỘP CHỌN LĨNH VỰC  (shared/js/domain.js dựng lên)

   Hiện một lần lúc vào trang đầu tiên, sau đó chỉ mở lại khi bấm nút đổi.
   ========================================================================= */

.dpick {
  position: fixed;
  inset: 0;
  z-index: 130;                 /* trên nav (100) và khung hướng dẫn tải (120) */
  display: none;
  padding: 20px;
  background: var(--overlay);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  overflow-y: auto;
}

.dpick.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dpick__box {
  width: min(680px, 100%);
  padding: clamp(22px, 3.5vw, 36px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-xl);
  text-align: center;
  animation: dpick-in .28s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes dpick-in {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Tieu de mau VANG THUONG HIEU, ghi cung chu KHONG dung var(--accent):
   luc hop nay hien nguoi dung CHUA chon linh vuc — dung bien thi tieu de
   mang mau cua gia tri mac dinh (nau go), trong khi day la cau hoi cua
   Inventor Tool, phai mang mau vang Inventor Tool.

   Hai sac theo nen, y het tokens.css: vang dong dam tren nen sang (vang
   tuoi tren the trang chi dat ~2:1, chim), vang tuoi tren nen toi. */
.dpick__box h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  margin: 0 0 8px;
  color: #8f6300;
}

:root[data-theme="dark"] .dpick__box h2 { color: #e8a317; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dpick__box h2 { color: #e8a317; }
}

.dpick__lead {
  max-width: 46ch;
  margin: 0 auto clamp(20px, 3vw, 28px);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* Hai lựa chọn: nằm ngang từ 560px trở lên, xếp dọc dưới mức đó.
   Không dùng auto-fit ở đây — hai thẻ PHẢI cùng hàng hoặc cùng cột, chứ
   một thẻ rộng một thẻ hẹp thì trông như cái này quan trọng hơn cái kia. */
.dpick__opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  text-align: left;
}

.dpick__opt {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.dpick__opt:hover,
.dpick__opt:focus-visible {
  border-color: var(--accent-solid);
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  outline: none;
}

.dpick__ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--text);
  transition: background .18s ease, color .18s ease;
}

.dpick__opt:hover .dpick__ico {
  background: var(--accent-solid);
  color: var(--accent-fg);
}

.dpick__opt b { font-size: 1.05rem; }

.dpick__mo {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.55;
}


/* ── Nút đổi lĩnh vực (trên thanh nav / trong ngăn kéo) ──────────────── */
.dombtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}

.dombtn:hover { border-color: var(--accent-solid); color: var(--accent); }
.dombtn svg { flex: none; opacity: .8; }
.dombtn b { color: var(--accent); font-weight: 700; }

/* ── Máy tính bảng và laptop nhỏ ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .dpick__box { width: min(600px, 100%); }
  .dpick__opt { padding: 18px 16px; }
}

/* ── Điện thoại: hộp bám đáy màn hình ────────────────────────────────
   Hộp nổi giữa màn hình điện thoại nhìn nhỏ và lạc lõng; bám đáy thì vừa
   tầm ngón cái, giống cách các ứng dụng điện thoại vẫn làm. */
@media (max-width: 560px) {
  .dpick { padding: 0; align-items: flex-end; }

  .dpick.is-open { align-items: flex-end; }

  .dpick__box {
    width: 100%;
    max-height: 92dvh;
    overflow-y: auto;
    border: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
    animation-name: dpick-up;
  }

  @keyframes dpick-up {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: none; }
  }

  /* Xếp dọc: hai thẻ nằm ngang trên màn 360px thì chữ mô tả bị bóp còn
     hai chữ một dòng, đọc không nổi. */
  .dpick__opts { grid-template-columns: 1fr; gap: 10px; }

  .dpick__opt {
    grid-template-columns: 46px 1fr;
    grid-template-areas: "ico ten" "ico mo";
    gap: 2px 14px;
    align-items: center;
    padding: 14px;
  }

  .dpick__ico { grid-area: ico; align-self: center; }
  .dpick__opt b { grid-area: ten; }
  .dpick__mo { grid-area: mo; }
}

@media (prefers-reduced-motion: reduce) {
  .dpick__box { animation: none; }
  .dpick__opt, .dpick__ico, .dombtn { transition: none; }
  .dpick__opt:hover { transform: none; }
}


/* =========================================================================
   VÂN GỖ — NỀN CỦA LĨNH VỰC NỘI THẤT

   Giao diện đang có là của CƠ KHÍ: nền kẻ ô như giấy can bản vẽ (.bp trong
   shared/css/mechanical.css). Nội thất thì thay bằng vân gỗ.

   Vẽ bằng CSS chứ không dùng ảnh: một ảnh vân gỗ đủ nét phải 200–400 KB,
   tải trên mạng 3G rất lâu, mà lại còn phải làm hai bản cho nền Sáng và
   nền Tối. Ba lớp gradient dưới đây nặng 0 byte và tự đổi màu theo biến.

   Ba lớp, từ trên xuống:
     1. vân nhỏ  — các đường mảnh, khoảng cách LỆCH NHAU (7/12/14/17px) để
                   mắt không bắt được nhịp lặp. Cách đều là ra ngay caro.
     2. mạch ghép — đường đậm hơn mỗi 210px, giống chỗ ghép hai tấm ván.
     3. hơi ấm   — một vệt sáng chéo rất nhạt, cho gỗ đỡ phẳng lì.
   ========================================================================= */

:root[data-domain-active="furn"] .bp {
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0 7px,
      var(--wood-2) 7px 8px,
      transparent 8px 20px,
      var(--wood-2) 20px 21px,
      transparent 21px 35px,
      var(--wood-1) 35px 36px,
      transparent 36px 53px),
    repeating-linear-gradient(90deg,
      var(--wood-1) 0 2px,
      transparent 2px 210px),
    linear-gradient(115deg,
      transparent 0 30%,
      var(--wood-2) 45% 55%,
      transparent 70% 100%);
  background-size: auto, auto, auto;
}

/* Màu vân. Nền Sáng: nâu trên nền kem. Nền Tối: vàng gỗ nhạt trên graphite
   — nâu đậm trên nền đen thì chìm hẳn, không thấy vân đâu. */
:root[data-domain-active="furn"] {
  --wood-1: rgba(146, 92, 42, .16);
  --wood-2: rgba(146, 92, 42, .08);
}

:root[data-theme="dark"][data-domain-active="furn"] {
  --wood-1: rgba(217, 160, 94, .16);
  --wood-2: rgba(217, 160, 94, .07);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-domain-active="furn"] {
    --wood-1: rgba(217, 160, 94, .16);
    --wood-2: rgba(217, 160, 94, .07);
  }
}

/* Dấu mốc góc và đường tâm là ngôn ngữ BẢN VẼ KỸ THUẬT — đúng với cơ khí,
   lạc lõng với đồ gỗ. Sang Nội thất thì làm mềm đi thay vì bỏ hẳn (bỏ hẳn
   thì bố cục hụt một mảng). */
:root[data-domain-active="furn"] .corner > i { opacity: .3; }
:root[data-domain-active="furn"] .card { border-radius: 12px; }
:root[data-domain-active="furn"] .btn { border-radius: 8px; }
:root[data-domain-active="furn"] .shot,
:root[data-domain-active="furn"] .video,
:root[data-domain-active="furn"] .gallery__item { border-radius: 12px; }


/* =========================================================================
   ĐIỂM NHẤN MÀU CHO CHỮ

   Trang trước đó gần như chỉ trắng–đen, chỉ nút bấm là có màu. Đọc một lúc
   thì mọi đoạn trông giống nhau, mắt không biết bám vào đâu.

   Nguyên tắc: chỉ tô những chữ ĐÃ được nhấn sẵn bằng thẻ <b>/<strong>.
   Tô bừa cả đoạn thì thành loè loẹt và mất luôn tác dụng nhấn.
   ========================================================================= */

.sec-lead b,
.sec-lead strong,
.hero__lead b,
.pghead__lead b,
.dpick__lead b { color: var(--accent); }

/* Gạch ngắn dưới tiêu đề khối — một vệt màu đủ để tách các khối với nhau
   mà không phải tô nền. */
.sec-head h2::after {
  content: "";
  display: block;
  width: 46px; height: 3px;
  margin: 14px 0 0;
  border-radius: 3px;
  background: var(--accent-solid);
}

.sec-head--center h2::after { margin-inline: auto; }

/* Hiệu ứng rung khi bắt buộc chọn mà bấm ra ngoài / bấm Esc — nói bằng
   chuyển động rằng "phải chọn đã", thay vì im lặng như trang treo. */
.dpick__box--lac { animation: dpick-lac .4s ease both; }

@keyframes dpick-lac {
  0%, 100% { transform: none; }
  20%      { transform: translateX(-9px); }
  45%      { transform: translateX(7px); }
  70%      { transform: translateX(-4px); }
  88%      { transform: translateX(2px); }
}

.dpick__note {
  margin: 16px 0 0;
  color: var(--warn);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* Viền thẻ lựa chọn mang màu nghề của nó — nhìn phát biết bên nào là gì
   trước cả khi đọc chữ. */
.dpick__opt--mech:hover,
.dpick__opt--mech:focus-visible { border-color: #e8a317; }
.dpick__opt--mech:hover .dpick__ico { background: #e8a317; color: #14181c; }

.dpick__opt--furn:hover,
.dpick__opt--furn:focus-visible { border-color: #a2662f; }
.dpick__opt--furn:hover .dpick__ico { background: #a2662f; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .dpick__box--lac { animation: none; }
}

/* ── Khối nội dung theo lĩnh vực — ẩn/hiện bằng CSS ─────────────────────
   domain.js cũng gắn [hidden] khi chạy, nhưng CSS phải tự lo được TRƯỚC
   khi JS kịp chạy: thuộc tính data-domain-active có sẵn từ đoạn chống nháy
   trong <head>, nên hai luật này ăn ngay từ khung hình đầu — không có
   khoảnh khắc cả hai câu cùng hiện. */
:root[data-domain-active="mech"] [data-domain="furn"] { display: none !important; }
:root[data-domain-active="furn"] [data-domain="mech"] { display: none !important; }