/* ===========================================================
   common.css — thành phần tái sử dụng (logo, nút...)
   =========================================================== */

/* ----- Container chung của section: rộng full + căn giữa + max-width -----
   Dùng kèm class riêng của section: <div class="l-inner onsen__inner">.
   Phần padding / position / z-index / max-width ngoại lệ để trong xxx__inner. */
.l-inner {
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .l-inner { max-width: 1240px; }   /* PC mặc định; access(1000)/footer(1346) tự override */
}

/* ----- Tiêu đề brush dọc (2 cột, đọc phải→trái) -----
   Dùng kèm class riêng: <h2 class="v-title onsen__title">.
   Phần font-size / letter-spacing / line-height / color để trong xxx__title span. */
.v-title {
  display: flex;
  flex-direction: row-reverse;   /* cột đầu (đọc trước) nằm bên phải */
  justify-content: center;
  gap: 4px;
}
.v-title span {
  writing-mode: vertical-rl;
  font-family: var(--font-brush);
  font-weight: 400;
}
@media (min-width: 1024px) {
  .v-title { gap: 8px; }
}

/* ----- Hiển thị theo breakpoint: SP ≤767px, PC ≥768px -----
   Dùng cho ngắt dòng theo màn hình: <br class="u-pc"> (chỉ PC), <br class="u-sp"> (chỉ SP). */
.u-pc { display: none; }
.u-sp { display: revert; }
@media (min-width: 768px) {
  .u-pc { display: revert; }
  .u-sp { display: none; }
}

/* ----- Logo (text thuần: 大自然阿蘇 / 健康の森) ----- */
.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  color: var(--color-white);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.logo__top {
  font-family: var(--font-brush); /* Yuji Syuku */
  font-weight: 400;
  font-size: 0.40em;              /* tỉ lệ theo cỡ 健康の森 */
  letter-spacing: 0.16em;
  padding-left: 0.16em;           /* bù letter-spacing để vẫn cân giữa */
  margin-bottom: 0.14em;
}
.logo__accent { color: var(--color-green); }
.logo__main {
  font-family: var(--font-brush);
  font-weight: 400;
  font-size: 1em;
  letter-spacing: 0.06em;
  padding-left: 0.06em;
}

html[lang^="en"] .logo__main {
  text-align: center;
}

/* ----- Nút có ngoặc 2 bên: | text | ----- */
.btn-bracket {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  color: var(--color-white);
  text-decoration: none;
}
.btn-bracket::before,
.btn-bracket::after {
  content: "";
  width: 1px;
  height: 38px;
  background: var(--color-white);
}
.btn-bracket span {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: 0.13em;
  white-space: nowrap;
}