/* ==========================================================================
   ttp-theme.css: bố cục giao diện mới của tamthienphu.net (trang chủ và các
   trang con: Giới thiệu, Sản phẩm, Tin tức, Liên hệ...).

   Bản thiết kế "Tam Thien Phu Home.dc.html" viết bố cục bằng style="" nội
   tuyến. Style nội tuyến không viết được @media nên không làm responsive
   được, vì vậy được rút ra thành class ở đây, tiền tố .ttp-. Màu, khoảng
   cách, font lấy từ token trong css/broadsheet.css (nạp trước file này).

   Lớp phủ tối trên ảnh: thiết kế dùng color-mix(--color-text X%). Mỗi chỗ
   có thêm dòng rgba() tương đương đặt trước, để trình duyệt cũ không hiểu
   color-mix vẫn có lớp phủ và chữ trắng vẫn đọc được.
   ========================================================================== */

a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent); }
.btn-primary, .btn-primary:hover { color: var(--color-bg); }
.btn-secondary, .btn-secondary:hover { color: var(--color-text); }

[hidden] { display: none !important; }
.ttp-icon { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -0.125em; }

.ttp-wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--space-6); padding-right: var(--space-6); }
.ttp-sec { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.ttp-h-sec { font-size: 36px; line-height: 1.15; margin: 0 0 var(--space-6); }
.ttp-center { text-align: center; }
/* Tiêu đề khối + link "Xem tất cả" cùng hàng */
.ttp-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-6); }
.ttp-sec-head .ttp-h-sec { margin: 0; }

.ttp-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ttp-skip { position: absolute; left: -9999px; top: 0; z-index: 100; }
.ttp-skip:focus {
  left: var(--space-4); top: var(--space-4); padding: var(--space-2) var(--space-3);
  background: var(--color-bg); color: var(--color-text);
}

/* Nền ảnh + lớp phủ tối: ảnh đặt qua style="--ttp-bg:url(...)" trong HTML.
   Ảnh chuyển sang trắng đen (luminosity) để chữ đóng dấu màu xanh trên ảnh cũ chìm vào nền tối */
.ttp-photo {
  --ttp-shade: rgba(32, 30, 29, 0.8);
  background-color: var(--color-text);
  background-image: linear-gradient(var(--ttp-shade), var(--ttp-shade)), var(--ttp-bg, none);
  background-blend-mode: normal, luminosity;
  background-size: cover; background-position: center;
  color: var(--color-bg);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .ttp-photo { --ttp-shade: color-mix(in srgb, var(--color-text) 80%, transparent); }
  .ttp-reviews { --ttp-shade: color-mix(in srgb, var(--color-text) 78%, transparent); }
  .ttp-footer { --ttp-shade: color-mix(in srgb, var(--color-text) 88%, transparent); }
}
/* Ảnh đứng yên khi cuộn: chỉ bật trên máy tính (điện thoại, nhất là iPhone, không hỗ trợ tốt) */
@media (hover: hover) and (pointer: fine) {
  .ttp-photo { background-attachment: fixed; }
}
.ttp-hero :focus-visible, .ttp-photo :focus-visible { outline-color: var(--color-accent-300); }

/* ------------------------------------------------------ đầu trang (hero) */
.ttp-hero { position: relative; z-index: 2; isolation: isolate; background: var(--color-text); color: var(--color-bg); }
.ttp-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.ttp-hero-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; opacity: 0; transition: opacity 0.6s; filter: grayscale(1);
}
.ttp-hero-bg img.is-active { opacity: 1; }
.ttp-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(32, 30, 29, 0.70), rgba(32, 30, 29, 0.18));
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-text) 70%, transparent), color-mix(in srgb, var(--color-text) 18%, transparent));
}

.ttp-topbar { background: rgba(32, 30, 29, 0.8); background: color-mix(in srgb, var(--color-text) 80%, transparent); }
.ttp-topbar-in {
  max-width: 1200px; margin: 0 auto; padding: var(--space-2) var(--space-6);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); font-size: 14px;
}
.ttp-topbar-item { display: flex; align-items: center; gap: 6px; }
.ttp-topbar a { color: var(--color-bg); }
.ttp-topbar a:hover { color: var(--color-accent-300); }
.ttp-topbar-item .ttp-icon { font-size: 18px; color: var(--color-accent); }
/* Điện thoại: bỏ thanh email, hotline, mạng xã hội cho gọn; hotline đã có ở nút nổi Zalo/gọi và chân trang */
@media (max-width: 767px) {
  .ttp-topbar { display: none; }
}
.ttp-social { margin-left: auto; display: flex; gap: var(--space-3); font-size: 20px; }
.ttp-social a { display: flex; }

.ttp-header {
  max-width: 1200px; margin: 0 auto; padding: var(--space-6) var(--space-6) 0;
  position: relative; z-index: 3; /* menu xổ xuống luôn nằm trên banner (tên view-transition làm đầu trang thành một lớp riêng) */
  display: grid; justify-items: center; gap: var(--space-4); text-align: center;
}
.ttp-brand { margin: 0; font-size: inherit; letter-spacing: normal; line-height: 1; }
.ttp-brand a { display: block; color: var(--color-bg); }
.ttp-brand-name {
  display: block; font-size: 52px; line-height: 1; letter-spacing: -0.01em;
  font-weight: var(--font-heading-weight);
}
.ttp-brand-tag {
  display: block; margin-top: 8px; font-size: 14px; line-height: 1.4;
  letter-spacing: 0.2em; text-transform: uppercase; font-weight: 400;
}

.ttp-navbar {
  width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-4); padding: var(--space-3) 0;
  border-top: 1px solid rgba(243, 242, 242, 0.35); border-bottom: 1px solid rgba(243, 242, 242, 0.35);
  border-color: color-mix(in srgb, var(--color-bg) 35%, transparent);
}
.ttp-nav { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); font-size: 16px; }
.ttp-nav a { color: var(--color-bg); }
.ttp-nav a:hover, .ttp-nav a[aria-current="page"] { color: var(--color-accent-300); }

/* Menu Sản phẩm: rê chuột (máy tính) hoặc bấm mũi tên (JS thêm .is-open).
   Danh mục có mục con: mặc định bấm mũi tên để mở danh sách con ngay bên dưới (điện thoại, máy tính bảng);
   màn hình rộng có chuột thì rê vào là hiện cột mục con bên phải như trang cũ */
.ttp-dd { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.ttp-dd-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border: 0; background: none;
  color: var(--color-bg); font-size: 16px; cursor: pointer;
}
.ttp-dd-btn:hover, .ttp-dd.is-open .ttp-dd-btn { color: var(--color-accent-300); }
.ttp-dd-menu {
  position: absolute; top: 100%; left: 0; z-index: 10; display: none;
  min-width: 280px; padding: var(--space-2) 0; text-align: left;
  background: var(--color-bg); box-shadow: var(--shadow-lg);
}
.ttp-dd.is-open .ttp-dd-menu { display: block; }
@media (hover: hover) {
  .ttp-dd:hover .ttp-dd-menu { display: block; }
}
.ttp-dd-item { display: flex; flex-wrap: wrap; align-items: center; }
.ttp-nav .ttp-dd-menu a { display: block; flex: 1; padding: 6px var(--space-3); color: var(--color-text); font-size: 15px; }
.ttp-nav .ttp-dd-menu a:hover { color: var(--color-accent-700); }
.ttp-dd2-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 32px; padding: 0; border: 0; background: none;
  color: var(--color-neutral-700); font-size: 16px; cursor: pointer;
}
.ttp-dd2-btn:hover, .ttp-dd-item.is-open > .ttp-dd2-btn { color: var(--color-accent-700); }
.ttp-dd2-btn .ttp-icon { transform: rotate(90deg); transition: transform .15s; }
.ttp-dd-item.is-open > .ttp-dd2-btn .ttp-icon { transform: rotate(-90deg); }
.ttp-dd-sub {
  display: none; flex-basis: 100%; margin: 0 0 var(--space-1) var(--space-3);
  border-left: 2px solid var(--color-divider);
}
.ttp-dd-item.is-open > .ttp-dd-sub { display: block; }
.ttp-nav .ttp-dd-sub a { padding: 5px var(--space-3); font-size: 14px; }
@media (hover: hover) and (min-width: 901px) {
  .ttp-dd-item { position: relative; flex-wrap: nowrap; }
  .ttp-dd-item:hover, .ttp-dd-item.is-open { background: var(--color-neutral-200); }
  .ttp-dd-item:hover > a, .ttp-dd-item:hover > .ttp-dd2-btn { color: var(--color-accent-700); }
  .ttp-dd2-btn .ttp-icon, .ttp-dd-item.is-open > .ttp-dd2-btn .ttp-icon { transform: none; }
  .ttp-dd-sub {
    position: absolute; top: calc(-1 * var(--space-2)); left: 100%; z-index: 1;
    width: max-content; min-width: 240px; max-width: 340px; margin: 0; border: 0;
    padding: var(--space-2) 0; background: var(--color-bg); box-shadow: var(--shadow-lg);
  }
  .ttp-dd-item:hover > .ttp-dd-sub { display: block; }
  /* Đang mở một mục bằng bấm/bàn phím mà rê sang mục khác thì chỉ hiện cột của mục đang rê */
  .ttp-dd-menu:hover .ttp-dd-item.is-open:not(:hover) { background: none; }
  .ttp-dd-menu:hover .ttp-dd-item.is-open:not(:hover) > .ttp-dd-sub { display: none; }
  .ttp-nav .ttp-dd-sub a { font-size: 15px; }
}

.ttp-search { display: flex; align-items: stretch; margin: 0; }
.ttp-search .input {
  width: 200px; -webkit-appearance: none; appearance: none;
  background: rgba(243, 242, 242, 0.92);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  color: var(--color-text); border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.ttp-search .btn { height: auto; border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: 18px; }

/* Điện thoại: menu chính gọn thành nút ô vuông bên phải ô tìm kiếm, bấm thì xổ xuống đè lên nội dung.
   Chỉ áp dụng khi có JS (head.php thêm .ttp-js); tắt JS thì menu vẫn hiện đầy đủ như cũ */
.ttp-menu-btn { display: none; }
@media (max-width: 767px) {
  .ttp-js .ttp-navbar { position: relative; flex-wrap: nowrap; gap: var(--space-2); }
  .ttp-js .ttp-search { flex: 1; width: auto; min-width: 0; }
  .ttp-js .ttp-search .input { width: auto; min-width: 0; flex: 1; min-height: 44px; }
  .ttp-js .ttp-search .btn { width: 44px; }
  .ttp-js .ttp-menu-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; padding: 0; cursor: pointer; font-size: 24px;
    background: transparent; color: var(--color-bg); border-radius: var(--radius-md);
    border: 1px solid rgba(243, 242, 242, 0.6);
    border-color: color-mix(in srgb, var(--color-bg) 60%, transparent);
  }
  .ttp-js .ttp-menu-btn .ttp-icon:last-child,
  .ttp-js .ttp-menu-btn[aria-expanded="true"] .ttp-icon:first-child { display: none; }
  .ttp-js .ttp-menu-btn[aria-expanded="true"] .ttp-icon:last-child { display: block; }
  .ttp-js .ttp-menu-btn[aria-expanded="true"] { background: var(--color-bg); border-color: var(--color-bg); color: var(--color-text); }

  /* Mở: mờ dần hiện và trượt nhẹ xuống; đóng: mờ đi rồi mới ẩn (trình duyệt cũ thì ẩn/hiện ngay) */
  .ttp-js .ttp-nav {
    display: none; flex-direction: column; flex-wrap: nowrap; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
    padding: var(--space-1) 0; text-align: left;
    background: var(--color-bg); box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, display .2s allow-discrete;
  }
  .ttp-js .ttp-nav.is-open { display: flex; opacity: 1; transform: none; }
  @starting-style {
    .ttp-js .ttp-nav.is-open { opacity: 0; transform: translateY(-8px); }
  }
  .ttp-js .ttp-nav > a, .ttp-js .ttp-nav .ttp-dd > a {
    display: block; padding: 11px var(--space-4); color: var(--color-text); font-size: 17px;
  }
  .ttp-js .ttp-nav > a + a, .ttp-js .ttp-nav > * + .ttp-dd, .ttp-js .ttp-nav > .ttp-dd + a {
    border-top: 1px solid var(--color-divider);
  }
  .ttp-js .ttp-nav a[aria-current="page"] { color: var(--color-accent-700); font-weight: 600; }

  /* Sản phẩm trong menu: mũi tên bên phải, danh mục mở ngay bên dưới */
  .ttp-js .ttp-nav .ttp-dd { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
  .ttp-js .ttp-nav .ttp-dd > a { flex: 1; }
  .ttp-js .ttp-nav .ttp-dd-btn { width: 52px; height: 46px; color: var(--color-neutral-700); font-size: 18px; }
  .ttp-js .ttp-nav .ttp-dd-btn .ttp-icon { transition: transform .15s; }
  .ttp-js .ttp-nav .ttp-dd.is-open .ttp-dd-btn { color: var(--color-accent-700); }
  .ttp-js .ttp-nav .ttp-dd.is-open .ttp-dd-btn .ttp-icon { transform: rotate(180deg); }
  .ttp-js .ttp-nav .ttp-dd-menu {
    position: static; flex-basis: 100%; min-width: 0; padding: var(--space-1) 0;
    background: var(--color-surface); box-shadow: none;
  }
  .ttp-js .ttp-nav .ttp-dd:not(.is-open) .ttp-dd-menu { display: none; }
  .ttp-js .ttp-nav .ttp-dd-menu a { padding: 9px var(--space-4); font-size: 16px; }
  .ttp-js .ttp-nav .ttp-dd2-btn { width: 52px; height: 40px; }
  .ttp-js .ttp-nav .ttp-dd-sub { margin-left: var(--space-4); }
  .ttp-js .ttp-nav .ttp-dd-sub a { padding: 8px var(--space-3); font-size: 15px; }
}

/* Banner: 3 slide xếp chồng cùng một ô lưới, cao theo slide dài nhất nên đổi slide không làm nhảy trang */
.ttp-banner {
  max-width: 1200px; margin: 0 auto; padding: var(--space-8) var(--space-6); min-height: 440px;
  display: flex; flex-direction: column; justify-content: center;
}
.ttp-banner-in { max-width: 640px; }
.ttp-slides { display: grid; }
.ttp-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.6s, visibility 0.6s; }
.ttp-slide.is-active { opacity: 1; visibility: visible; }
.ttp-kicker { margin: 0; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-300); }
.ttp-slide-title { font-size: 60px; line-height: 1.05; margin: var(--space-3) 0; text-wrap: pretty; }
.ttp-slide-text { font-size: 20px; line-height: 1.6; margin: 0 0 var(--space-6); text-wrap: pretty; }
.ttp-banner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }

/* Gạch chọn slide: vạch 28x4 như thiết kế, vùng bấm cao 24px cho dễ chạm */
.ttp-dots { display: flex; align-items: center; gap: 10px; }
.ttp-dots[hidden] { display: none; }
.ttp-dot { position: relative; width: 28px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.ttp-dot::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; background: var(--color-bg); }
.ttp-dot.is-active::before { background: var(--color-accent); }

/* --------------------------------------------------------------- nội dung */
.ttp-intro {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--space-6); align-items: center;
}
.ttp-intro-text { max-width: 560px; }
.ttp-intro .ttp-h-sec { margin-bottom: var(--space-3); }
.ttp-lead { font-size: 18px; line-height: 1.7; margin: 0 0 var(--space-4); }
.ttp-intro-img { background: var(--color-neutral-100); }
.ttp-intro-img img { width: 100%; height: auto; }

.ttp-cats-band { margin: var(--space-8) 0; }
.ttp-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-6); }
.ttp-cat, .ttp-cat:hover {
  display: grid; gap: var(--space-2); justify-items: center; align-content: start;
  text-align: center; color: var(--color-bg);
}
.ttp-cat .ttp-icon { font-size: 44px; color: var(--color-accent-300); }
.ttp-cat-name { font-size: 20px; margin: 0; }
.ttp-cat:hover .ttp-cat-name { color: var(--color-accent-300); }
.ttp-cat-desc { font-size: 15px; line-height: 1.6; margin: 0; }

.ttp-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-6); }
.ttp-product { display: grid; gap: var(--space-2); align-content: start; color: var(--color-text); }
.ttp-product:hover { color: var(--color-accent-700); }
.ttp-product-img {
  aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-neutral-100);
  display: flex; align-items: center; justify-content: center;
}
.ttp-product-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ttp-product-name { font-family: var(--font-body); font-size: 17px; line-height: 1.35; font-weight: 400; letter-spacing: normal; margin: 0; }
.ttp-product-price { font-size: 14px; color: var(--color-accent-2-700); }

.ttp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); margin: 0; }
.ttp-stats dt { font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-700); }
.ttp-stats dd {
  margin: 0; font-size: 64px; line-height: 1.1;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
}

/* Khách hàng nói về chúng tôi: chỉ hiện khi đã nhập đánh giá trong trang quản trị */
.ttp-reviews { --ttp-shade: rgba(32, 30, 29, 0.78); margin-top: var(--space-8); }
.ttp-reviews-in {
  max-width: 820px; margin: 0 auto; padding: var(--space-8) var(--space-6);
  display: grid; justify-items: center; gap: var(--space-4); text-align: center;
}
.ttp-reviews .ttp-h-sec { margin: 0; }
.ttp-reviews-in > .ttp-icon { font-size: 48px; color: var(--color-accent-300); }
.ttp-quotes { display: grid; width: 100%; }
.ttp-quote { grid-area: 1 / 1; margin: 0; }
.ttp-quotes .ttp-quote { opacity: 0; visibility: hidden; transition: opacity 0.6s, visibility 0.6s; }
.ttp-quotes .ttp-quote.is-active { opacity: 1; visibility: visible; }
.ttp-quote blockquote {
  margin: 0 0 var(--space-4); font-size: 24px; line-height: 1.55; font-style: italic;
  text-wrap: pretty; min-height: 4.65em;
}
.ttp-quote figcaption { font-size: 17px; margin: 0; color: inherit; }
.ttp-review-nav { display: flex; align-items: center; gap: var(--space-3); }
.ttp-review-nav[hidden] { display: none; }
.ttp-review-nav .btn { color: var(--color-bg); font-size: 20px; }
.ttp-review-nav .btn:hover { background: rgba(243, 242, 242, 0.12); }

/* -------------------------------------------------------------- chân trang */
.ttp-footer { --ttp-shade: rgba(32, 30, 29, 0.88); }
.ttp-footer-in { padding-top: var(--space-8); padding-bottom: var(--space-4); }
.ttp-footer-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6); padding-bottom: var(--space-6);
}
.ttp-footer-h { font-size: 20px; margin: 0 0 var(--space-3); letter-spacing: normal; }
.ttp-footer-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.4; }
.ttp-footer a { color: var(--color-bg); }
.ttp-footer a:hover { color: var(--color-accent-300); }
.ttp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ttp-footer .tag { color: var(--color-neutral-800); }
.ttp-footer .tag:hover { background: var(--color-accent-100); color: var(--color-accent-800); }
.ttp-contact { font-size: 15px; line-height: 1.6; font-style: normal; }
.ttp-contact p { margin: 0; }
.ttp-footer .ttp-contact-mail { color: var(--color-accent-300); }
/* Liên kết web, thống kê truy cập: chữ nhỏ, xuống dòng tự do, ngăn cách bằng dấu chấm giữa */
.ttp-footer-links { padding: var(--space-4) 0; border-top: 1px solid rgba(243, 242, 242, 0.16); }
.ttp-footer-links .ttp-footer-h { font-size: 16px; margin-bottom: var(--space-2); }
.ttp-footer-links ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.8; }
.ttp-footer-links li:not(:last-child)::after { content: "·"; margin: 0 8px; opacity: 0.5; }
.ttp-thongke {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px var(--space-4); margin: 0; padding: 0 0 var(--space-3);
  font-size: 14px;
}
.ttp-thongke div { display: flex; gap: 6px; }
.ttp-thongke dt { opacity: 0.75; }
.ttp-thongke dd { margin: 0; font-variant-numeric: tabular-nums; }
.ttp-copy {
  margin: 0; padding-top: var(--space-4); font-size: 14px; text-align: center;
  border-top: 1px solid rgba(243, 242, 242, 0.3);
  border-top-color: color-mix(in srgb, var(--color-bg) 30%, transparent);
}

/* ================================================================ trang con
   Theo bản thiết kế Giới thiệu, Sản phẩm, Tin tức, Liên hệ (templates/ttp/trang.php).
   Chi tiết sản phẩm, chi tiết bài viết, Tuyển dụng, Tìm kiếm không có bản thiết
   kế riêng nên dựng lại từ các khối của 4 trang trên. */

/* Đầu trang: ảnh nền đậm bên trái, nhạt dần sang phải. .ttp-hero phía trên dùng
   background: rút gọn nên phải viết lại đủ ảnh nền ở đây (chọn lọc cụ thể hơn) */
.ttp-hero.ttp-hero-page {
  --ttp-shade: rgba(32, 30, 29, 0.85);
  --ttp-shade-2: rgba(32, 30, 29, 0.5);
  background-color: var(--color-text);
  background-image: linear-gradient(90deg, var(--ttp-shade), var(--ttp-shade-2)), var(--ttp-bg, none);
  background-blend-mode: normal, luminosity;
  background-size: cover; background-position: center;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .ttp-hero.ttp-hero-page {
    --ttp-shade: color-mix(in srgb, var(--color-text) 85%, transparent);
    --ttp-shade-2: color-mix(in srgb, var(--color-text) 50%, transparent);
  }
}
@media (hover: hover) and (pointer: fine) {
  .ttp-hero.ttp-hero-page { background-attachment: fixed; }
}

.ttp-pagehead { max-width: 1200px; margin: 0 auto; padding: var(--space-8) var(--space-6); }
.ttp-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; }
.ttp-crumbs li { display: flex; gap: 8px; min-width: 0; }
.ttp-crumbs li + li::before { content: "/"; }
.ttp-crumbs a { color: var(--color-accent-300); }
.ttp-crumbs a:hover { color: var(--color-bg); }
.ttp-page-title {
  margin: var(--space-3) 0 0; font-size: 56px; line-height: 1.05; letter-spacing: -0.015em;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); text-wrap: balance;
}
.ttp-page-title-dai { max-width: 920px; font-size: 44px; line-height: 1.12; }
.ttp-page-sub { font-size: 20px; line-height: 1.6; margin: var(--space-3) 0 0; max-width: 640px; text-wrap: pretty; }

.ttp-sec-top0 { padding-top: 0; }

/* Bài viết soạn trong trang quản trị (đã lọc style cũ bằng ttp_noidung) */
.ttp-prose { font-size: 18px; line-height: 1.7; overflow-wrap: break-word; }
.ttp-prose > :first-child { margin-top: 0; }
.ttp-prose > :last-child { margin-bottom: 0; }
.ttp-prose p, .ttp-prose ul, .ttp-prose ol, .ttp-prose blockquote { margin: 0 0 var(--space-4); }
.ttp-prose ul, .ttp-prose ol { padding-left: 1.4em; }
.ttp-prose li + li { margin-top: 4px; }
.ttp-prose h2 { font-size: 30px; line-height: 1.2; margin: var(--space-8) 0 var(--space-3); }
.ttp-prose h3 { font-size: 24px; line-height: 1.25; margin: var(--space-6) 0 var(--space-3); }
.ttp-prose h4, .ttp-prose h5, .ttp-prose h6 { font-size: 20px; line-height: 1.3; margin: var(--space-6) 0 var(--space-2); letter-spacing: normal; text-transform: none; }
.ttp-prose a { text-decoration: underline; }
.ttp-prose img { height: auto; margin: var(--space-4) auto; }
.ttp-prose iframe { display: block; width: 100%; max-width: 640px; height: auto; aspect-ratio: 16 / 9; border: 0; margin: var(--space-4) 0; }
.ttp-prose blockquote { padding-left: var(--space-4); border-left: 3px solid var(--color-accent); font-style: italic; }
.ttp-table-wrap { overflow-x: auto; margin: 0 0 var(--space-4); }
.ttp-prose table { border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.ttp-prose th, .ttp-prose td { padding: 6px 10px; border: 1px solid var(--color-divider); vertical-align: top; text-align: left; }
.ttp-article { max-width: 760px; }
.ttp-article-imgs { max-width: 760px; margin-top: var(--space-6); display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.ttp-article-imgs a { display: block; background: var(--color-neutral-100); }
.ttp-article-imgs img { width: 100%; height: auto; }

/* Giới thiệu */
.ttp-intro .ttp-prose { font-size: 18px; }
.ttp-fields-band { margin: var(--space-8) 0 0; }
.ttp-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.ttp-field { display: grid; gap: var(--space-2); justify-items: center; align-content: start; text-align: center; }
.ttp-field .ttp-icon { font-size: 44px; color: var(--color-accent-300); }
.ttp-field-h { font-size: 22px; margin: 0; }
.ttp-field p { font-size: 16px; line-height: 1.6; margin: 0; max-width: 320px; }

/* Liên hệ nhanh cuối trang */
.ttp-cta {
  padding: var(--space-8) 0; display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--space-6);
}
.ttp-cta-h { font-size: 36px; line-height: 1.15; margin: 0 0 var(--space-2); }
.ttp-cta-text { font-size: 18px; margin: 0; }
.ttp-cta .btn, .ttp-empty .btn { font-size: 16px; padding: var(--space-2) var(--space-4); }

/* Sản phẩm: cột Danh mục + lưới sản phẩm (tự xuống dòng khi hẹp) */
.ttp-shop { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-8); padding-top: var(--space-8); padding-bottom: var(--space-8); }
.ttp-filter { flex: 1 1 220px; max-width: 280px; }
.ttp-filter-h { font-size: 20px; margin: 0 0 var(--space-3); letter-spacing: normal; }
.ttp-filter-list, .ttp-filter-sub { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ttp-filter-sub { gap: 0; padding: 0 0 6px var(--space-3); }
.ttp-filter a { display: flex; justify-content: space-between; gap: var(--space-3); padding: 6px 0; font-size: 16px; line-height: 1.35; color: var(--color-text); }
.ttp-filter-sub a { padding: 5px 0; font-size: 15px; }
.ttp-filter a:hover, .ttp-filter a[aria-current="page"] { color: var(--color-accent-700); }
.ttp-filter a[aria-current="page"] { font-weight: 600; }
.ttp-filter-count { color: var(--color-neutral-700); font-weight: 400; font-variant-numeric: tabular-nums; }
.ttp-shop-main { flex: 999 1 480px; min-width: 0; }
.ttp-shop-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-2) var(--space-3); margin-bottom: var(--space-6);
}
.ttp-shop-h { font-size: 36px; line-height: 1.15; margin: 0; text-wrap: balance; }
.ttp-shop-count { font-size: 15px; margin: 0; color: var(--color-neutral-700); }
.ttp-category-description { max-width: 82ch; margin: 0 0 var(--space-6); font-size: 16px; line-height: 1.7; color: var(--color-text); overflow-wrap: anywhere; }
.ttp-category-description p { margin: 0 0 var(--space-3); }
.ttp-category-description p:last-child { margin-bottom: 0; }
.ttp-products-shop { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.ttp-empty { max-width: 520px; padding: var(--space-6) 0; }
.ttp-empty p { font-size: 18px; line-height: 1.7; margin: 0 0 var(--space-4); }

/* Phân trang */
.ttp-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin-top: var(--space-8); font-size: 16px; }
.ttp-page, .ttp-page-step {
  min-width: 40px; height: 40px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--color-text); border-radius: var(--radius-md); font-variant-numeric: tabular-nums;
}
a.ttp-page:hover, .ttp-page-step:hover { background: var(--color-surface); color: var(--color-accent-700); }
.ttp-page[aria-current="page"] { background: var(--color-text); color: var(--color-bg); }
.ttp-page-gap { min-width: 24px; text-align: center; color: var(--color-neutral-700); }
.ttp-pages-wrap { padding-bottom: var(--space-6); }
.ttp-pages-wrap .ttp-pages { margin-top: 0; }

/* Chi tiết sản phẩm */
.ttp-sp { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-8); align-items: start; }
.ttp-gallery { display: grid; gap: var(--space-3); }
.ttp-gallery-main { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-neutral-100); }
.ttp-gallery-main img { width: 100%; height: 100%; object-fit: contain; }
/* Đổi ảnh (bấm ảnh nhỏ, chuyển ảnh khi xem lớn): JS thêm .ttp-anh-mo để mờ đi, ảnh mới tải xong thì hiện lại */
.ttp-gallery-main img, .ttp-lb-khung img { transition: opacity .15s ease; }
.ttp-gallery-main img.ttp-anh-mo, .ttp-lb-khung img.ttp-anh-mo { opacity: 0; }
a.ttp-gallery-main { cursor: zoom-in; }
.ttp-gallery-hint {
  position: absolute; right: var(--space-2); bottom: var(--space-2); display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-size: 14px; color: var(--color-bg); background: color-mix(in srgb, var(--color-text) 72%, transparent);
  pointer-events: none;
}
.ttp-gallery-hint .ttp-icon { font-size: 18px; }
.ttp-gallery-main.is-zoom .ttp-gallery-hint { opacity: 0; }
.ttp-gallery-empty .ttp-icon { font-size: 72px; color: var(--color-neutral-500); }
.ttp-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ttp-thumbs a { display: block; aspect-ratio: 1; background: var(--color-neutral-100); border: 2px solid transparent; }
.ttp-thumbs a:hover { border-color: var(--color-neutral-400); }
.ttp-thumbs a[aria-current="true"] { border-color: var(--color-accent); }
.ttp-thumbs img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Xem ảnh toàn màn hình (js/ttp-home.js) */
.ttp-khoa, .ttp-khoa body { overflow: hidden; overscroll-behavior: none; }
.ttp-lb {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(16, 15, 15, 0.94); color: #fff; overscroll-behavior: contain;
}
.ttp-lb::backdrop { background: transparent; }
/* Vuốt ngang để chuyển ảnh: không để trình duyệt hiểu là vuốt quay lại trang trước */
.ttp-lb-khung { position: absolute; inset: 56px 16px; display: flex; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y pinch-zoom; }
.ttp-lb-khung::-webkit-scrollbar { display: none; }
.ttp-lb-khung img { flex: none; margin: auto; max-width: none; background: #fff; }
.ttp-lb-khung.co-that img { cursor: zoom-in; }
.ttp-lb-nhieu .ttp-lb-khung { bottom: 92px; }
.ttp-lb .ttp-lb-khung.is-that { inset: 0; touch-action: auto; }
.ttp-lb-khung.is-that img { cursor: zoom-out; }
.ttp-lb-ten {
  position: absolute; top: 0; left: 0; right: 64px; margin: 0; padding: 0 16px; line-height: 56px; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ttp-lb-ten span { color: rgba(255, 255, 255, 0.7); }
.ttp-lb-thumbs {
  position: absolute; left: 0; right: 0; bottom: 12px; display: flex; gap: 8px; margin: 0; padding: 4px 16px;
  list-style: none; overflow-x: auto; scrollbar-width: none;
}
.ttp-lb-thumbs::-webkit-scrollbar { display: none; }
.ttp-lb-thumbs li:first-child { margin-left: auto; }
.ttp-lb-thumbs li:last-child { margin-right: auto; }
.ttp-lb-thumbs button {
  display: block; width: 64px; height: 64px; padding: 0; background: #fff; border: 2px solid transparent; opacity: 0.6; cursor: pointer;
}
.ttp-lb-thumbs button:hover, .ttp-lb-thumbs button[aria-current="true"] { opacity: 1; }
.ttp-lb-thumbs button[aria-current="true"] { border-color: var(--color-accent); }
.ttp-lb-thumbs button:focus-visible { outline: 2px solid var(--color-accent-300); outline-offset: 2px; }
.ttp-lb-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.ttp-lb-nut {
  position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0;
  font-size: 26px; color: #fff; background: rgba(16, 15, 15, 0.55); border: 0; cursor: pointer;
}
.ttp-lb-nut:hover { background: rgba(16, 15, 15, 0.85); color: var(--color-accent-300); }
.ttp-lb-nut:focus-visible { outline: 2px solid var(--color-accent-300); outline-offset: 2px; }
.ttp-lb-dong { top: 4px; right: 8px; }
.ttp-lb-truoc, .ttp-lb-sau { top: 50%; margin-top: -24px; }
.ttp-lb-truoc { left: 8px; }
.ttp-lb-sau { right: 8px; }
.ttp-lb-khung.is-that ~ .ttp-lb-truoc, .ttp-lb-khung.is-that ~ .ttp-lb-sau, .ttp-lb-khung.is-that ~ .ttp-lb-thumbs { display: none; }

.ttp-sp-info { display: grid; gap: var(--space-4); align-content: start; }
.ttp-sp-price { margin: 0; font-size: 24px; line-height: 1.2; color: var(--color-accent-2-700); font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.ttp-sp-info .ttp-lead { margin: 0; }
.ttp-sp-luotxem { display: flex; align-items: center; gap: 6px; margin: calc(var(--space-2) * -1) 0 0; font-size: 16px; color: var(--color-neutral-700); }
.ttp-sp-luotxem .ttp-icon { font-size: 20px; }
.ttp-sp-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ttp-sp-actions .btn { font-size: 16px; padding: var(--space-3) var(--space-4); }
.ttp-sp-actions .btn .ttp-icon { font-size: 20px; }
.ttp-sp-hotro { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 16px; }

/* Chi tiết sản phẩm: nội dung + cột bên (danh mục cùng nhóm, liên hệ nhanh dính theo khi cuộn) */
.ttp-chitiet { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-8); }
.ttp-chitiet-motcot { grid-template-columns: minmax(0, 1fr); }
.ttp-chitiet-motcot .ttp-ben { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.ttp-ben { display: flex; flex-direction: column; gap: var(--space-6); }
.ttp-ben-hop { padding: var(--space-4); background: var(--color-surface); }
.ttp-ben-lienhe { position: sticky; top: var(--space-4); }
.ttp-ben-h { font-size: 22px; line-height: 1.25; margin: 0 0 var(--space-3); }
.ttp-ben-h a { color: inherit; text-decoration: none; }
.ttp-ben-h a:hover { color: var(--color-accent); }
.ttp-ben-dm { margin: 0; padding: 0; list-style: none; font-size: 16px; }
.ttp-ben-dm a {
  display: block; padding: 9px 0 9px 12px; border-top: 1px solid var(--color-divider); border-left: 3px solid transparent;
  color: var(--color-text); text-decoration: none;
}
.ttp-ben-dm a:hover { color: var(--color-accent); }
.ttp-ben-dm a[aria-current] { border-left-color: var(--color-accent); color: var(--color-accent); font-weight: 600; }
.ttp-ben-text { margin: 0 0 var(--space-3); font-size: 16px; color: var(--color-neutral-700); }
.ttp-ben-so { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 16px; }
/* Chi tiết bài viết: mục lục + hộp tư vấn dính theo khi cuộn; trên điện thoại mục lục thu gọn ở đầu bài */
.ttp-ben-dinh { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-6); }
.ttp-ben-dinh .ttp-ben-lienhe { position: static; }
.ttp-mucluc-ds { margin: 0; padding: 0; list-style: none; counter-reset: muc; font-size: 15px; line-height: 1.35; }
.ttp-mucluc .ttp-mucluc-ds { max-height: 45vh; overflow-y: auto; overscroll-behavior: contain; }
.ttp-mucluc-ds a {
  display: flex; gap: 6px; padding: 7px 0 7px 12px; border-top: 1px solid var(--color-divider); border-left: 3px solid transparent;
  color: var(--color-text); text-decoration: none;
}
.ttp-mucluc-ds a::before { counter-increment: muc; content: counter(muc) "."; flex: none; color: var(--color-neutral-500); }
.ttp-mucluc-ds a:hover { color: var(--color-accent); }
.ttp-mucluc-ds a[aria-current] { border-left-color: var(--color-accent); color: var(--color-accent); font-weight: 600; }
.ttp-prose h2[id] { scroll-margin-top: var(--space-6); }
.ttp-mucluc-gon { display: none; }
/* Danh mục ở cột bên bài viết: dòng thấp hơn trang sản phẩm để mục lục nằm cao hơn */
.ttp-ben-gon .ttp-ben-h { font-size: 19px; margin-bottom: var(--space-2); }
.ttp-ben-gon .ttp-ben-dm { font-size: 15px; line-height: 1.3; }
.ttp-ben-gon .ttp-ben-dm a { padding-top: 5px; padding-bottom: 5px; }
@media (max-width: 1000px) {
  .ttp-chitiet { grid-template-columns: minmax(0, 1fr); }
  .ttp-ben-lienhe { display: none; } /* đã có số ngay dưới giá và nút nổi Zalo/gọi */
  .ttp-ben-dinh { display: none; } /* mục lục đã ở đầu bài */
  .ttp-mucluc-gon { display: block; margin-bottom: var(--space-6); background: var(--color-surface); }
  .ttp-mucluc-gon summary { padding: 12px 16px; font-weight: 600; cursor: pointer; }
  .ttp-mucluc-gon summary span { font-weight: 400; color: var(--color-neutral-700); }
  .ttp-mucluc-gon .ttp-mucluc-ds { padding: 0 16px 8px; }
}

/* Tin tức: bài mới nhất + lưới bài */
.ttp-featured-sec { padding-top: var(--space-8); padding-bottom: var(--space-6); }
.ttp-featured {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--space-6); align-items: center; color: var(--color-text);
}
.ttp-featured:hover { color: var(--color-text); }
.ttp-featured:hover .ttp-featured-h { color: var(--color-accent-700); }
.ttp-post-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-neutral-100); }
.ttp-post-img img { width: 100%; height: 100%; object-fit: cover; }
.ttp-featured-kicker { margin: 0; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-2-700); }
.ttp-featured-h { font-size: 40px; line-height: 1.15; margin: var(--space-2) 0 var(--space-4); text-wrap: pretty; }
.ttp-featured-desc { font-size: 18px; line-height: 1.7; margin: 0 0 var(--space-4); }
.ttp-more { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: var(--color-accent-700); }
.ttp-posts-sec { padding-top: var(--space-6); padding-bottom: var(--space-8); }
.ttp-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-6); }
.ttp-post { display: grid; gap: var(--space-3); align-content: start; color: var(--color-text); }
.ttp-post:hover { color: var(--color-accent-700); }
.ttp-post-name { font-size: 22px; line-height: 1.3; margin: 0; letter-spacing: normal; text-wrap: pretty; }
.ttp-post .ttp-more { font-size: 15px; }

/* Liên hệ */
.ttp-contact-sec { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--space-8); padding: var(--space-8) 0; }
.ttp-contact-info { display: grid; gap: var(--space-4); align-content: start; font-size: 18px; line-height: 1.6; }
.ttp-contact-h { font-size: 32px; line-height: 1.2; margin: 0; }
.ttp-contact-row { display: flex; gap: var(--space-3); margin: 0; overflow-wrap: anywhere; }
.ttp-contact-row .ttp-icon { font-size: 24px; margin-top: 2px; color: var(--color-accent); }
.ttp-map { margin-bottom: var(--space-8); }
.ttp-map iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 900px) {
  .ttp-brand-name { font-size: 44px; }
  .ttp-slide-title { font-size: 46px; }
  .ttp-stats dd { font-size: 52px; }
  .ttp-h-sec { font-size: 32px; }
  .ttp-page-title { font-size: 46px; }
  .ttp-page-title-dai { font-size: 36px; }
  .ttp-featured-h { font-size: 34px; }
  .ttp-cta-h, .ttp-shop-h { font-size: 32px; }
}

/* Sản phẩm trên màn hình hẹp: Danh mục thành hàng nút bấm phía trên lưới, nhóm đang xem
   nằm riêng một dòng kèm các mục con */
@media (max-width: 760px) {
  .ttp-shop { gap: var(--space-6); }
  .ttp-filter { flex-basis: 100%; max-width: none; }
  .ttp-filter-h { font-size: 17px; margin-bottom: var(--space-2); }
  .ttp-filter-list, .ttp-filter-list > li.is-open, .ttp-filter-sub { display: flex; flex-wrap: wrap; gap: 8px; }
  .ttp-filter-list > li.is-open, .ttp-filter-sub { flex-basis: 100%; }
  .ttp-filter-sub { padding: 0; }
  .ttp-filter a, .ttp-filter-sub a {
    display: inline-flex; gap: 6px; padding: 7px 12px; font-size: 15px;
    background: var(--color-surface); border-radius: var(--radius-md);
  }
  .ttp-filter-sub a { background: transparent; border: 1px solid var(--color-divider); }
  .ttp-filter a[aria-current="page"] { background: var(--color-accent-700); border-color: var(--color-accent-700); color: var(--color-bg); }
  .ttp-filter a[aria-current="page"] .ttp-filter-count { color: inherit; }
}

@media (max-width: 600px) {
  .ttp-wrap, .ttp-topbar-in, .ttp-header, .ttp-banner { padding-left: var(--space-4); padding-right: var(--space-4); }
  .ttp-reviews-in { padding-left: var(--space-4); padding-right: var(--space-4); }

  /* Điện thoại: chữ nằm trên toàn bộ ảnh nên lớp phủ bên phải đậm hơn cho dễ đọc */
  .ttp-hero-bg::after {
    background: linear-gradient(90deg, rgba(32, 30, 29, 0.74), rgba(32, 30, 29, 0.54));
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-text) 74%, transparent), color-mix(in srgb, var(--color-text) 54%, transparent));
  }
  .ttp-topbar-in { gap: var(--space-1) var(--space-4); }
  .ttp-header { padding-top: var(--space-4); gap: var(--space-3); }
  .ttp-brand-name { font-size: 36px; }
  .ttp-brand-tag { font-size: 12px; letter-spacing: 0.14em; }
  .ttp-nav { gap: var(--space-2) var(--space-4); }

  /* Menu Sản phẩm trải theo bề ngang thanh menu, không tràn ra ngoài màn hình */
  .ttp-dd { position: static; }
  .ttp-dd-menu { left: 0; right: 0; min-width: 0; }

  .ttp-search { width: 100%; }
  .ttp-search .input { width: auto; flex: 1; }

  .ttp-banner { min-height: 0; padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .ttp-slide-title { font-size: 34px; }
  .ttp-slide-text { font-size: 17px; margin-bottom: var(--space-4); }

  .ttp-sec { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .ttp-h-sec { font-size: 28px; margin-bottom: var(--space-4); }
  .ttp-sec-head { margin-bottom: var(--space-4); }
  .ttp-lead { font-size: 17px; }
  .ttp-cats-band { margin: var(--space-6) 0; }
  .ttp-cats, .ttp-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .ttp-cat-name { font-size: 18px; }
  .ttp-cat-desc { font-size: 14px; }
  .ttp-product-name { font-size: 15px; }
  .ttp-stats { grid-template-columns: 1fr; gap: var(--space-4); }
  .ttp-stats dd { font-size: 44px; }
  .ttp-quote blockquote { font-size: 19px; }
  .ttp-footer-cols { grid-template-columns: 1fr; }

  .ttp-pagehead { padding: var(--space-6) var(--space-4); }
  .ttp-page-title { font-size: 36px; }
  .ttp-page-title-dai { font-size: 28px; line-height: 1.2; }
  .ttp-page-sub { font-size: 17px; }
  .ttp-prose { font-size: 17px; }
  .ttp-prose h2 { font-size: 26px; margin-top: var(--space-6); }
  .ttp-prose h3 { font-size: 22px; }
  .ttp-field-h { font-size: 20px; }
  .ttp-cta { padding: var(--space-6) 0; }
  .ttp-cta-h, .ttp-shop-h { font-size: 28px; }
  .ttp-cta-text, .ttp-empty p, .ttp-featured-desc { font-size: 17px; }
  .ttp-shop { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .ttp-shop-head { margin-bottom: var(--space-4); }
  .ttp-sp { gap: var(--space-6); }
  .ttp-sp-actions .btn { flex: 1 1 auto; }
  .ttp-featured-sec { padding-top: var(--space-6); padding-bottom: var(--space-4); }
  .ttp-featured-h { font-size: 28px; }
  .ttp-posts { gap: var(--space-6) var(--space-4); }
  .ttp-post-name { font-size: 20px; }
  .ttp-contact-sec { gap: var(--space-6); padding: var(--space-6) 0; }
  .ttp-contact-info { font-size: 17px; }
  .ttp-contact-h { font-size: 26px; }
  .ttp-map iframe { height: 320px; }
  .ttp-pages { margin-top: var(--space-6); }
  /* Nút Trang trước/Trang sau chỉ còn mũi tên, chữ vẫn đọc được bằng trình đọc màn hình */
  .ttp-page-step-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .ttp-hero-bg img, .ttp-slide, .ttp-quotes .ttp-quote, .ttp-js .ttp-nav, .ttp-gallery-main img, .ttp-lb-khung img { transition: none; }
}

/* Số điện thoại kèm Zalo (ttp_lienhe_so). Mặc định cho điện thoại: số gọi được + nhãn Zalo.
   Máy tính (chuột, không gọi được): ẩn số gọi, liên kết Zalo hiện luôn số */
.ttp-so { white-space: nowrap; }
.ttp-so-zalo { margin-left: 6px; text-decoration: none; }
.ttp-zalo-tag {
  display: inline-block; padding: 2px 7px; border-radius: 999px;
  background: #0068ff; color: #fff; font: 700 12px/1.3 Arial, Helvetica, sans-serif; vertical-align: 1px;
}
.ttp-so-zalo:hover .ttp-zalo-tag { background: #0055d4; }
.ttp-so-zalo-so { display: none; }
.ttp-btn-zalo { background: #0068ff; color: #fff; }
.ttp-btn-zalo:hover { background: #0055d4; color: #fff; }
.ttp-zalo-chu { font-family: Arial, Helvetica, sans-serif; font-weight: 700; }

/* Nút nổi góc phải dưới: điện thoại có Gọi + Zalo, máy tính chỉ Zalo, rê chuột hiện số */
.ttp-noi {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  display: flex; flex-direction: column-reverse; border-radius: 28px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.ttp-noi::before {
  content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 56px; border-radius: 0 0 28px 28px;
  z-index: -1; pointer-events: none; animation: ttp-nhay-goi 2s infinite;
}
.ttp-noi > a {
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.ttp-noi-goi { background: var(--color-accent); border-radius: 0 0 28px 28px; font-size: 24px; }
.ttp-noi-goi:hover, .ttp-noi-goi:focus-visible { background: var(--color-accent-700); color: #fff; }
.ttp-noi-zalo { background: #0068ff; border-radius: 28px 28px 0 0; font: 700 13px/1 Arial, Helvetica, sans-serif; }
.ttp-noi-zalo:hover, .ttp-noi-zalo:focus-visible { background: #0055d4; color: #fff; }
.ttp-noi-so { display: none; }
@keyframes ttp-nhay-goi {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 14px transparent; }
}
@keyframes ttp-nhay-zalo {
  0% { box-shadow: 0 0 0 0 rgba(0, 104, 255, 0.55); }
  70%, 100% { box-shadow: 0 0 0 14px rgba(0, 104, 255, 0); }
}
@media (hover: hover) and (pointer: fine) {
  .ttp-so-goi { display: none !important; }
  .ttp-so-zalo { margin-left: 0; }
  .ttp-so-zalo-so { display: inline; margin-left: 6px; }
  .ttp-btn-zalo .ttp-so-zalo-so { margin-left: 2px; }

  .ttp-noi > .ttp-noi-goi { display: none; }
  .ttp-noi, .ttp-noi-zalo, .ttp-noi::before { border-radius: 50%; }
  .ttp-noi::before { animation-name: ttp-nhay-zalo; }
  .ttp-noi:hover::after { content: ""; position: absolute; right: 100%; top: 0; width: 14px; height: 100%; }
  .ttp-noi-so {
    display: block; position: absolute; right: 100%; top: 50%; margin-right: 10px; transform: translate(8px, -50%);
    padding: 11px 14px; border-radius: 20px; background: #0068ff; color: #fff;
    font: 700 15px/1 Arial, Helvetica, sans-serif; white-space: nowrap; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    opacity: 0; pointer-events: none; user-select: text; transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .ttp-noi:hover .ttp-noi-so, .ttp-noi:focus-within .ttp-noi-so { opacity: 1; pointer-events: auto; transform: translate(0, -50%); }
}
@media (max-width: 767px) {
  .ttp-noi { right: 8px; bottom: 8px; }
  .ttp-copy { padding-bottom: 96px; } /* chừa chỗ cho nút nổi ở cuối trang */
}
/* Viên thuốc nhỏ hơn chỉ cho màn hình cảm ứng hẹp; máy tính thu nhỏ cửa sổ vẫn giữ nút Zalo tròn */
@media (max-width: 767px) and (hover: none) {
  .ttp-noi { border-radius: 24px; }
  .ttp-noi::before { width: 48px; height: 48px; border-radius: 0 0 24px 24px; }
  .ttp-noi > a { width: 48px; height: 48px; }
  .ttp-noi-goi { border-radius: 0 0 24px 24px; font-size: 22px; }
  .ttp-noi-zalo { border-radius: 24px 24px 0 0; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ttp-noi::before { animation: none; }
  .ttp-noi-so { transition: none; }
}
@media print { .ttp-noi { display: none; } }

/* Chuyển trang mờ dần giữa các trang trong web; trình duyệt chưa hỗ trợ thì chuyển như cũ.
   Thanh trên cùng, đầu trang và nút nổi có tên riêng nên đứng yên, chỉ phần còn lại mờ chuyển.
   Đầu trang đang khuất vì đã cuộn xuống thì head.php bỏ tên để nó không trượt từ ngoài màn hình vào */
@view-transition { navigation: auto; }
.ttp-topbar { view-transition-name: ttp-topbar; }
.ttp-header { view-transition-name: ttp-header; }
.ttp-noi { view-transition-name: ttp-noi; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}


/* Trang chủ: một bộ ảnh slider chung sau header và banner, theo mockup đã duyệt. */
.ttp-hero-glass .ttp-hero-bg img { filter: none; object-position: center; }
.ttp-hero-glass .ttp-hero-bg::after { content: none; }
.ttp-home-header { position: relative; z-index: 3; background: rgba(25, 34, 33, .62); }
.ttp-home-header .ttp-topbar { display: none; }
.ttp-home-header .ttp-header { padding-top: 29px; }
.ttp-home-header .ttp-brand, .ttp-home-header .ttp-brand-tag,
.ttp-home-header .ttp-nav > a, .ttp-home-header .ttp-dd > a { text-shadow: 0 1px 4px rgba(0, 0, 0, .65); }
.ttp-hero-glass .ttp-banner { min-height: 550px; padding-top: 42px; padding-bottom: 42px; }
.ttp-hero-glass .ttp-banner-in {
  width: 100%; max-width: 515px; padding: 36px 40px;
  color: #242b2b; background: rgba(250, 248, 244, .88);
  border: 1px solid rgba(255, 255, 255, .45); border-top: 3px solid #0088b0;
  box-shadow: 0 10px 40px rgba(21, 35, 35, .08);
}
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .ttp-hero-glass .ttp-banner-in {
    background: rgba(250, 248, 244, .74);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  }
}
.ttp-hero-glass .ttp-kicker { color: #00677f; font-size: 11px; letter-spacing: 2px; margin: 0 0 18px; }
.ttp-hero-glass .ttp-slide-title { font-size: 36px; line-height: 1.23; letter-spacing: -.7px; margin: 0 0 24px; }
.ttp-hero-glass .ttp-slide-text { color: #303b38; font-size: 16px; line-height: 1.85; margin: 0 0 30px; }
.ttp-hero-glass .ttp-banner-actions { gap: 22px; }
.ttp-hero-glass .ttp-banner-contact { color: #242b2b; border-bottom: 1px solid #657d77; font-size: 14px; padding: 9px 0; }
.ttp-hero-glass .ttp-dots { margin-top: 22px; }
.ttp-hero-glass .ttp-dot::before { background: #687d77; }
.ttp-hero-glass .ttp-dot.is-active::before { background: #007f9e; }
.ttp-hero-glass .ttp-banner :focus-visible { outline-color: #00677f; }
@media (max-width: 600px) {
  .ttp-home-header .ttp-header { padding-top: 25px; }
  .ttp-hero-glass .ttp-banner { min-height: 0; padding-top: 150px; padding-bottom: 24px; }
  .ttp-hero-glass .ttp-banner-in { padding: 26px 24px; }
  .ttp-hero-glass .ttp-slide-title { font-size: 29px; line-height: 1.25; }
  .ttp-hero-glass .ttp-slide-text { font-size: 14px; }
  .ttp-hero-glass .ttp-banner-actions { gap: 16px; }
}

/* Điện thoại: nội dung gọn ở chân ảnh, điều hướng bằng hai mũi tên trên ảnh. */
.ttp-slide-text-mobile, .ttp-banner-arrow { display: none; }
@media (max-width: 767px) {
  .ttp-hero-glass .ttp-banner {
    position: relative; min-height: 440px; padding: 220px 12px 12px;
    justify-content: flex-end;
  }
  .ttp-hero-glass .ttp-banner-in { max-width: none; padding: 18px 20px; }
  .ttp-hero-glass .ttp-kicker, .ttp-hero-glass .ttp-dots,
  .ttp-hero-glass .ttp-slide-text-desktop, .ttp-hero-glass .ttp-banner-contact { display: none; }
  .ttp-hero-glass .ttp-slide-text-mobile { display: block; }
  .ttp-hero-glass .ttp-slide-title { font-size: 26px; line-height: 1.2; margin: 0 0 8px; }
  .ttp-hero-glass .ttp-slide-text { font-size: 14px; line-height: 1.5; margin: 0; }
  .ttp-hero-glass .ttp-banner-actions { display: none; }
  .ttp-hero-glass .ttp-banner-arrow {
    display: flex; align-items: center; justify-content: center; position: absolute;
    top: 88px; z-index: 1; width: 44px; height: 44px; padding: 0;
    border: 1px solid rgba(255,255,255,.7); border-radius: 50%;
    color: #fff; background: rgba(25,34,33,.65); font: 36px/1 Arial,sans-serif;
    cursor: pointer;
  }
  .ttp-hero-glass .ttp-banner-prev { left: 12px; }
  .ttp-hero-glass .ttp-banner-next { right: 12px; }
  .ttp-hero-glass .ttp-banner-arrow:hover { background: rgba(25,34,33,.9); }
  .ttp-hero-glass .ttp-banner-arrow:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
}


/* Danh mục trang chủ: nền sáng và mô tả ngắn để dễ quét. */
.ttp-cats-light { background: #f8f7f4; color: var(--color-text); border-top: 1px solid #e2e0dc; border-bottom: 1px solid #e2e0dc; }
.ttp-cats-light .ttp-h-sec { margin-bottom: var(--space-6); }
.ttp-cats-light .ttp-cats { gap: 14px; }
.ttp-cats-light .ttp-cat {
  min-width: 0; padding: 22px 18px; color: var(--color-text); background: #fff;
  border: 1px solid #e4e4e0; border-radius: 4px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.ttp-cats-light .ttp-cat:hover, .ttp-cats-light .ttp-cat:focus-visible {
  color: var(--color-text); border-color: #86bfc9; box-shadow: 0 8px 24px rgba(19,50,54,.08); transform: translateY(-2px);
}
.ttp-cats-light .ttp-cat .ttp-icon { width: 64px; height: 64px; padding: 14px; margin-bottom: 4px; color: #007b98; background: #e9f6f8; border-radius: 50%; }
.ttp-cats-light .ttp-cat-name { font-size: 19px; line-height: 1.25; }
.ttp-cats-light .ttp-cat-desc {
  max-width: 28ch; color: #555e5d; font-size: 14px; line-height: 1.45;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}

/* Thẻ sản phẩm: ảnh vuông, thông tin và lối đi xem chi tiết nhất quán. */
.ttp-product { padding: 0 0 14px; background: #fff; border: 1px solid #e4e4e0; border-radius: 4px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.ttp-product:hover, .ttp-product:focus-visible { border-color: #86bfc9; box-shadow: 0 8px 24px rgba(19,50,54,.08); }
.ttp-product-name { margin: 8px 14px 0; font-weight: 600; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.ttp-product-price { margin: 0 14px; }

/* Bộ lọc của trang danh sách: nhấn mạnh nhóm đang xem, giữ số lượng rõ ràng. */
.ttp-filter { padding: 18px; background: #f8f7f4; border: 1px solid #e4e4e0; border-radius: 4px; }
.ttp-filter-h { margin-bottom: 12px; }
.ttp-filter a { padding: 9px 10px; border-radius: 4px; }
.ttp-filter a:hover { background: #e9f6f8; }
.ttp-filter a[aria-current="page"] { color: #005d75; background: #dff2f5; }
.ttp-filter-sub a { padding-left: 14px; }
.ttp-quote-link { text-align: center; }
@media (max-width: 760px) {
  .ttp-filter { padding: 14px; }
  .ttp-filter-list, .ttp-filter-list > li.is-open, .ttp-filter-sub { gap: 8px; }
  .ttp-filter a, .ttp-filter-sub a { padding: 9px 12px; border: 1px solid #d5dcda; background: #fff; }
  .ttp-filter a[aria-current="page"] { color: #fff; background: #006e89; border-color: #006e89; }
  .ttp-filter a[aria-current="page"] .ttp-filter-count { color: inherit; }
  .ttp-filter-sub a { padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ttp-cats-light .ttp-cat, .ttp-product { transition: none; }
}

/* Điện thoại: thu bộ lọc lại và đưa ảnh sản phẩm lên trước bài giới thiệu dài. */
.ttp-filter-mobile { display: none; }
@media (max-width: 760px) {
  .ttp-filter { padding: 0; }
  .ttp-filter-h, .ttp-filter-desktop { display: none; }
  .ttp-filter-mobile { display: block; }
  .ttp-filter-mobile summary {
    padding: 13px 15px; font-size: 16px; font-weight: 600; color: #005d75;
    cursor: pointer; list-style: none;
  }
  .ttp-filter-mobile summary::-webkit-details-marker { display: none; }
  .ttp-filter-mobile summary::after { content: '⌄'; float: right; font-size: 22px; line-height: 1; }
  .ttp-filter-mobile[open] summary::after { transform: rotate(180deg); }
  .ttp-filter-mobile summary:focus-visible { outline: 3px solid #007b98; outline-offset: 2px; }
  .ttp-filter-mobile .ttp-filter-list { padding: 0 12px 14px; }
  .ttp-shop-main { display: flex; flex-direction: column; }
  .ttp-shop-head, .ttp-products-shop, .ttp-pages, .ttp-category-description, .ttp-empty { width: 100%; }
  .ttp-products-shop, .ttp-empty { order: 1; }
  .ttp-pages { order: 2; }
  .ttp-category-description { order: 3; margin: var(--space-6) 0 0; }
}

@media (max-width: 760px) {
  .ttp-product-name { -webkit-line-clamp: 4; line-clamp: 4; }
}