:root {
  --tt-gold: #e8b84a;
  --tt-gold-light: #f9d77a;
  --tt-gold-dark: #dba53b;
  --tt-gold-grad: linear-gradient(180deg, #f7cf6c 0%, #dca23a 100%);
  --tt-menu-bg: #ecc46e;
  --tt-cate-bg: #dcab3f;
  --tt-text: #2b2b2b;
  --tt-header-bg: #faf9f6;
}

html,
body {
  min-width: 1440px;
}
body {
  font-family: "Poppins", sans-serif;
  color: var(--tt-text);
}
.tt-wrap {
  width: 1440px;
  margin: 0 auto;
}

/* ---------- Header ---------- */
.tt-topline {
  height: 28px;
  background: linear-gradient(180deg, var(--tt-gold-light) 0%, #e3ac40 100%);
}
.tt-header {
  background: var(--tt-header-bg);
}
.tt-header-row {
  height: 112px;
  display: flex;
  align-items: center;
}
.tt-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  width: 470px;
}
.tt-logo img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}
.tt-logo-name {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #f2c55c 0%, #dda33a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tt-search {
  position: relative;
  width: 534px;
  height: 56px;
  display: flex;
  align-items: center;
  background: #f3f3f3;
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  padding: 0 16px;
  gap: 10px;
  color: #8a8a8a;
}
.tt-search input {
  flex: 1;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  color: var(--tt-text);
}
.tt-search input::placeholder {
  color: #9a9a9a;
}
.tt-search:focus-within {
  border-color: var(--tt-gold);
}
.tt-hotline {
  margin-left: auto;
  width: 255px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 4px;
  background: var(--tt-gold-grad);
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(180, 130, 30, 0.25);
}
.tt-hotline:hover,
.tt-cart:hover {
  color: #fff;
  filter: brightness(1.05);
}
/* Rule màu link chung của theme cũ đè lên màu trắng — tăng độ ưu tiên */
html body a.tt-hotline,
html body a.tt-cart,
html body a.tt-hotline:is(:hover, :focus),
html body a.tt-cart:is(:hover, :focus) {
  color: #fff;
}
.tt-cart {
  position: relative;
  margin-left: 49px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--tt-gold-grad);
  color: #fff;
  box-shadow: 0 2px 4px rgba(180, 130, 30, 0.25);
}
.tt-cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: #d32f2f;
  color: #fff;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
}
.tt-cart-count:empty {
  display: none;
}

/* ---------- Menu (dính đầu trang) ---------- */
.tt-menu {
  background: var(--tt-menu-bg);
  position: relative;
  z-index: 100;
}
.tt-menu.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.tt-menu-row {
  height: 67px;
  display: flex;
  align-items: stretch;
}
.tt-menu a {
  color: #fff;
  text-decoration: none;
}

/* Danh mục sản phẩm */
.tt-cate {
  position: relative;
  width: 274px;
  flex-shrink: 0;
}
.tt-cate-btn {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 22px;
  background: var(--tt-cate-bg);
  font-size: 17px;
  font-weight: 500;
}
.tt-cate-drop {
  position: absolute;
  top: 100%;
  left: 0;
  width: 1440px;
  min-height: 420px;
  display: flex;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  border-top: 3px solid var(--tt-cate-bg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: 0.2s;
}
.tt-cate:hover .tt-cate-drop {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.tt-cate-list {
  width: 274px;
  flex-shrink: 0;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fbf6ea;
  border-right: 1px solid #f0e3c4;
}
.tt-menu .tt-cate-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px;
  color: var(--tt-text);
  font-size: 15px;
}
.tt-cate-list li.active a {
  background: var(--tt-gold);
  color: #fff;
}
.tt-cate-panel {
  display: none;
  flex: 1;
  padding: 20px 24px;
}
.tt-cate-panel.active {
  display: block;
}
.tt-cate-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.tt-menu .tt-cate-sub a {
  padding: 6px 14px;
  border: 1px solid #ecd9a8;
  border-radius: 20px;
  color: #8a6418;
  font-size: 14px;
}
.tt-menu .tt-cate-sub a:hover {
  background: var(--tt-gold);
  border-color: var(--tt-gold);
  color: #fff;
}
.tt-cate-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.tt-menu .tt-cate-product {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px;
  border: 1px solid #f1f1f1;
  border-radius: 6px;
  color: var(--tt-text);
  transition: 0.2s;
}
.tt-cate-product:hover {
  border-color: var(--tt-gold);
  box-shadow: 0 4px 12px rgba(220, 165, 59, 0.2);
}
.tt-cate-product img {
  width: 120px;
  height: 120px;
  object-fit: contain;
}
.tt-cate-product-name {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tt-cate-product-price {
  margin-top: 4px;
  color: #d32f2f;
  font-weight: 600;
  font-size: 14px;
}
.tt-menu .tt-cate-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  color: var(--tt-gold-dark);
  font-weight: 500;
}
.tt-cate-empty {
  color: #888;
}

/* Các mục menu còn lại */
.tt-nav {
  flex: 1;
  display: flex;
  justify-content: space-around;
  margin: 0;
  padding: 0 0 0 60px;
  list-style: none;
}
.tt-nav-item {
  position: relative;
  display: flex;
  align-items: center;
}
.tt-nav-item > a {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  font-size: 17px;
  position: relative;
}
.tt-nav-item > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transition: 0.2s;
}
.tt-nav-item:hover > a::after,
.tt-nav-item > a.active::after {
  transform: scaleX(1);
}

/* Dropdown nhiều cấp */
.tt-drop {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border-top: 3px solid var(--tt-cate-bg);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: 0.2s;
}
.tt-drop li {
  position: relative;
}
.tt-drop-sub {
  top: -9px;
  left: 100%;
}
.tt-nav-item:hover > .tt-drop,
.tt-drop li:hover > .tt-drop {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.tt-menu .tt-drop a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  color: var(--tt-text);
  font-size: 15px;
  white-space: nowrap;
}
.tt-menu .tt-drop li:hover > a {
  background: #fbf3df;
  color: var(--tt-gold-dark);
}

/* ---------- Slideshow: ảnh giữ 1920px, cắt 2 bên khi cửa sổ hẹp ---------- */
.tt-slide {
  position: relative;
  overflow: hidden;
}
.tt-slide-item {
  position: relative;
  display: block;
  height: 780px;
  overflow: hidden;
}
.tt-slide-caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
/* Theo design: khối chữ + nút rộng 675px, nút cách phần chữ 47px, căn giữa banner theo chiều dọc */
.tt-slide-box {
  width: 675px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 47px;
}
.tt-slide-title,
.tt-slide-sub {
  width: fit-content;
  max-width: 675px;
  font-weight: 700;
  text-transform: uppercase;
  background: linear-gradient(180deg, #f8d77e 0%, #d9a23c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tt-slide-title {
  font-size: 58px;
  line-height: 1.25;
}
.tt-slide-sub {
  margin-top: 18px;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.3;
}
.tt-slide-desc {
  max-width: 675px;
  margin-top: 30px;
  color: #f1dcaa;
  font-size: 18px;
  line-height: 1.5;
}
.tt-slide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 188px;
  height: 55px;
  border-radius: 4px;
  background: var(--tt-gold-grad);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(220, 165, 59, 0.35);
  transition: 0.2s;
}
.tt-slide-btn:hover {
  color: #fff;
  filter: brightness(1.08);
}
/* Chữ trượt lên mỗi khi đổi slide */
.tt-slide .owl-item.active .tt-slide-text > *,
.tt-slide .owl-item.active .tt-slide-btn {
  animation: tt-fade-up 0.7s both;
}
.tt-slide .owl-item.active .tt-slide-sub { animation-delay: 0.12s !important; }
.tt-slide .owl-item.active .tt-slide-desc { animation-delay: 0.24s !important; }
.tt-slide .owl-item.active .tt-slide-btn { animation-delay: 0.36s !important; }
@keyframes tt-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* Đủ mạnh để thắng .owl-carousel .owl-item img { width: 100% } */
/* Theo design: ảnh 2159x780 căn giữa khung 1920 (lệch trái ~120px, cắt bớt 2 bên) */
.tt-slide .owl-carousel .owl-item .tt-slide-item img {
  display: block;
  width: 2159px;
  max-width: none;
  height: 780px;
  margin-left: 50%;
  transform: translateX(-50%);
  object-fit: cover;
}
.tt-slide-nav button.owl-prev,
.tt-slide-nav button.owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.15) !important;
  opacity: 0;
  transition: 0.2s;
}
.tt-slide:hover .tt-slide-nav button {
  opacity: 1;
}
.tt-slide-nav button.owl-prev {
  left: 40px;
}
.tt-slide-nav button.owl-next {
  right: 40px;
}
.tt-slide-nav svg {
  stroke: #fff;
}
.tt-slide .owl-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
}
.tt-slide .owl-dots .owl-dot span {
  background: rgba(255, 255, 255, 0.5);
}
.tt-slide .owl-dots .owl-dot.active span {
  width: 26px;
  background: var(--tt-gold);
}

/* ---------- Khối dùng chung ---------- */
.tt-section {
  padding: 40px 0 40px;
}
.tt-title {
  margin: 0 0 40px;
  text-align: center;
  font-size: 42px;
  font-weight: 600;
  line-height: 1.3;
  background: linear-gradient(180deg, #f2c55c 0%, #dda33a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tt-center {
  text-align: center;
}
.tt-btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 55px;
  padding: 0 24px;
  border-radius: 4px;
  background: #212121;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  transition: 0.2s;
}
.tt-btn-dark:hover {
  background: var(--tt-gold-dark);
  color: #fff;
}

/* ---------- Danh mục sản phẩm phụ kiện ---------- */
.tt-pk {
  background: var(--tt-header-bg);
}
.tt-pk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 271px);
  justify-content: center;
  column-gap: 21px;
  row-gap: 22px;
  margin-bottom: 36px;
}
.tt-pk-item {
  height: 133px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  color: var(--tt-text);
  transition: 0.2s;
}
.tt-pk-item:hover {
  color: var(--tt-gold-dark);
  box-shadow: 0 6px 18px rgba(220, 165, 59, 0.25);
  transform: translateY(-2px);
}
.tt-pk-name {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
}
.tt-pk-item img {
  width: 130px;
  height: 100px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ---------- Hiệu ứng tráng gương: vệt sáng lướt chéo khi trỏ chuột ---------- */
.tt-shine {
  position: relative;
  overflow: hidden;
}
.tt-shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 100%);
  transform: skewX(-25deg);
  pointer-events: none;
  z-index: 2;
}
.tt-shine:hover::after {
  animation: tt-shine 0.85s;
}
@keyframes tt-shine {
  100% {
    left: 125%;
  }
}
.tt-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  padding: 0 24px;
  border-radius: 4px;
  background: var(--tt-gold-grad);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(220, 165, 59, 0.35);
}
.tt-btn-gold:hover {
  color: #fff;
}

/* ---------- Sản phẩm bán chạy ---------- */
.tt-bc {
  background: var(--tt-header-bg);
}
.tt-bc-row {
  display: flex;
  gap: 21px;
}
.tt-bc-banner {
  width: 467px;
  height: 878px;
  flex-shrink: 0;
  border-radius: 24px;
  background: #111;
}
.tt-bc-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tt-bc-banner-text {
  position: relative;
  z-index: 1;
  padding: 72px 40px 0;
  text-align: center;
}
.tt-bc-title {
  margin: 0 auto;
  max-width: 330px;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.25;
  background: linear-gradient(180deg, #f8d77e 0%, #d9a23c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tt-bc-desc {
  margin: 14px 0 26px;
  color: #f1dcaa;
  font-size: 18px;
  line-height: 1.5;
}
.tt-bc-title + .tt-btn-gold {
  margin-top: 26px;
}
.tt-bc-banner-text .tt-btn-gold {
  height: 55px;
  padding: 0 24px;
  font-size: 18px;
}
.tt-bc-slider {
  flex: 1;
  min-width: 0;
}
.tt-bc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.tt-bc .owl-dots {
  margin-top: 36px !important;
}
.tt-bc .owl-dots .owl-dot span,
.tt-slide .owl-dots .owl-dot span {
  width: 50px !important;
  height: 4px !important;
  margin: 0 3px !important;
  border-radius: 2px !important;
  background: #dcdcdc !important;
}
.tt-bc .owl-dots .owl-dot.active span,
.tt-slide .owl-dots .owl-dot.active span {
  background: var(--tt-gold) !important;
}

/* ---------- Thẻ sản phẩm dùng chung ---------- */
.tt-pi {
  position: relative;
  height: 429px;
  display: flex;
  flex-direction: column;
  padding: 16px 17px 15px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: 0.25s;
}
.tt-pi:hover {
  box-shadow: 0 8px 24px rgba(220, 165, 59, 0.22);
}
.tt-pi-badge {
  position: absolute;
  top: 15px;
  left: 17px;
  z-index: 1;
  padding: 3px 10px;
  border-radius: 2px;
  background: var(--tt-gold-grad);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}
.tt-pi-img {
  height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.tt-bc .owl-carousel .owl-item .tt-pi-img img,
.tt-pi-img img {
  width: 230px;
  height: 230px;
  object-fit: contain;
  transition: transform 0.35s;
}
.tt-pi:hover .tt-pi-img img {
  transform: scale(1.05);
}
.tt-pi-cate {
  color: #8a8a8a;
  font-size: 10px;
  text-transform: uppercase;
}
.tt-pi-name {
  margin: 4px 0 6px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt-pi-name a {
  color: #111;
}
.tt-pi-name a:hover {
  color: var(--tt-gold-dark);
}
.tt-pi-price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 15px;
}
.tt-pi-price del {
  color: #9a9a9a;
}
.tt-pi-price span {
  color: var(--tt-gold-dark);
  font-weight: 500;
}
.tt-pi-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
}
.tt-pi-buy,
.tt-pi-cart {
  height: 39px;
  border: 0;
  border-radius: 4px;
  background: #1c1c1c;
  color: #fff;
  transition: 0.2s;
}
.tt-pi-buy {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
}
.tt-pi-cart {
  width: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt-pi-buy:hover,
.tt-pi-cart:hover {
  background: var(--tt-gold-dark);
}

/* ---------- Sản phẩm mới ---------- */
.tt-spm {
  background: var(--tt-header-bg);
}
.tt-spm-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 27px 26px 47px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}
.tt-spm-text {
  width: 580px;
}
.tt-spm-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #111;
  font-size: 17px;
  font-weight: 500;
}
.tt-spm-label::after {
  content: "";
  width: 38px;
  height: 1.5px;
  background: #111;
}
.tt-spm-title {
  margin: 4px 0 10px;
  font-size: 58px;
  font-weight: 700;
  line-height: 1.25;
  background: linear-gradient(180deg, #f2c55c 0%, #dda33a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tt-spm-sub {
  color: #1c1c1c;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.55;
}
.tt-spm-desc {
  max-width: 500px;
  margin: 18px 0 26px;
  color: #1c1c1c;
  font-size: 17px;
  line-height: 1.6;
}
.tt-spm-text .tt-btn-gold {
  width: 144px;
  padding: 0;
}
.tt-spm-img {
  display: block;
  width: 734px;
  height: 585px;
  flex-shrink: 0;
  border-radius: 20px;
}
.tt-spm-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Vì sao chọn chúng tôi ---------- */
.tt-why {
  padding: 100px 0 115px;
  background: #1a130b no-repeat center top;
  background-size: 1920px auto;
}
.tt-why-title {
  margin: 0 0 42px;
  text-align: center;
  color: #fff;
  font-size: 40px;
  font-weight: 600;
}
.tt-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 341px);
  justify-content: space-between;
}
.tt-why-item {
  min-height: 215px;
  padding: 28px 22px 24px;
  text-align: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.3s, background 0.3s;
}
.tt-why-item:hover {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.2);
}
.tt-why-icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--tt-gold);
  font-size: 28px;
  animation: tt-wiggle 2.4s ease-in-out infinite;
}
.tt-why-item h3 {
  margin: 0 0 4px;
  font-size: 21px;
  font-weight: 600;
}
.tt-why-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  line-height: 1.55;
}
/* Rung rinh: lắc nhẹ rồi nghỉ */
@keyframes tt-wiggle {
  0%, 60%, 100% { transform: rotate(0); }
  10%, 30%, 50% { transform: rotate(-12deg) scale(1.06); }
  20%, 40% { transform: rotate(12deg) scale(1.06); }
}

/* ---------- Thương hiệu hợp tác ---------- */
.tt-brand {
  padding: 100px 0;
  background: var(--tt-header-bg);
  overflow: hidden;
}
.tt-brand-row {
  display: flex;
  align-items: center;
}
.tt-brand-title {
  width: 360px;
  flex-shrink: 0;
  margin: 0;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.5;
  background: linear-gradient(180deg, #f2c55c 0%, #dda33a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Kéo dải logo ra sát mép phải màn hình, mờ dần ở mép trái */
.tt-brand-marquee {
  flex: 1;
  min-width: 0;
  margin-right: max(-240px, min(0px, calc((1440px - 100vw) / 2)));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 120px);
  mask-image: linear-gradient(to right, transparent 0, #000 120px);
}
.tt-brand-track {
  display: flex;
  width: max-content;
  animation: tt-marquee linear infinite;
}
.tt-brand-marquee:hover .tt-brand-track {
  animation-play-state: paused;
}
.tt-brand-item {
  flex-shrink: 0;
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt-brand-item img {
  width: 240px;
  height: 80px;
  object-fit: contain;
}
@keyframes tt-marquee {
  to { transform: translateX(-50%); }
}

/* ---------- Tin tức công nghệ ---------- */
.tt-news {
  --tt-notch-bg: var(--tt-header-bg);
  background: var(--tt-header-bg);
}
.tt-news-row {
  display: flex;
  gap: 28px;
  height: 632px;
}
.tt-news-big {
  position: relative;
  width: 828px;
  flex-shrink: 0;
}
.tt-news-big-item {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s, visibility 0.6s;
}
.tt-news-big-item.active {
  opacity: 1;
  visibility: visible;
}
.tt-news-big-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}
.tt-news-big-item:hover > img {
  transform: scale(1.04);
}
.tt-news-big-item::before {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.85));
  z-index: 1;
}
.tt-news-big-info {
  position: absolute;
  left: 28px;
  bottom: 28px;
  width: 700px;
  z-index: 2;
  padding: 28px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #111;
}
.tt-news-badge {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 20px;
  background: #1c1c1c;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.tt-news-big-info h3 {
  margin: 14px 0 8px;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.55;
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tt-news-meta {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
}
.tt-news-view {
  font-size: 13px;
}
.tt-news-meta .tt-news-view {
  font-size: 15px;
}
/* Ô khuyết góc phải dưới chứa nút mũi tên */
.tt-news-go {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 10px 0 0 10px;
  background: var(--tt-notch-bg);
  border-top-left-radius: 24px;
}
.tt-news-go::before,
.tt-news-go::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background: radial-gradient(circle at 0 0, transparent 23.5px, var(--tt-notch-bg) 24px);
}
.tt-news-go::before {
  right: 0;
  top: -24px;
}
.tt-news-go::after {
  left: -24px;
  bottom: 0;
}
.tt-news-go-btn {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--tt-gold-grad);
  color: #fff;
  font-size: 22px;
  transform: rotate(45deg);
  transition: transform 0.3s;
}
.tt-news-big-item:hover .tt-news-go-btn,
.tt-news-small:hover .tt-news-go-btn {
  transform: rotate(90deg);
}
.tt-news-side {
  flex: 1;
  height: 632px;
  overflow: hidden;
}
.tt-news-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.tt-news-list.is-moving {
  transition: transform 0.7s ease;
  transform: translateY(-328px);
}
.tt-news-small {
  position: relative;
  height: 304px;
  flex-shrink: 0;
  display: flex;
  border-radius: 20px;
  overflow: hidden;
  background: #f1f1f1;
  color: #111;
}
.tt-news-small[hidden] {
  display: none;
}
.tt-news-small img {
  width: 240px;
  height: 304px;
  flex-shrink: 0;
  object-fit: cover;
}
.tt-news-small-info {
  position: relative;
  flex: 1;
  padding: 26px 30px 0 18px;
}
.tt-news-small-info h3 {
  margin: 14px 0 10px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.55;
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tt-news-small:hover h3 {
  color: var(--tt-gold-dark);
}
.tt-news-date {
  font-size: 13px;
}
.tt-news-small .tt-news-view {
  position: absolute;
  left: 18px;
  bottom: 26px;
}
.tt-news-small .tt-news-go-btn {
  width: 46px;
  height: 46px;
  font-size: 17px;
}

/* ---------- Liên hệ tư vấn ngay ---------- */
/* Theo design: khung 1920x633, bo 2 góc trên 60px; ảnh nền giữ đúng 1920x633 */
.tt-contact {
  height: 633px;
  display: flex;
  align-items: center;
  background: #050505 no-repeat center top;
  background-size: 1920px 633px;
  border-radius: 60px 60px 0 0;
  color: #fff;
}
.tt-contact-row {
  display: flex;
  align-items: stretch;
}
.tt-contact-info {
  width: 622px;
  flex-shrink: 0;
  padding: 70px 0 0 60px;
  border-right: 2px solid rgba(255, 255, 255, 0.4);
}
.tt-contact-info h2 {
  margin: 0 0 34px;
  font-size: 42px;
  font-weight: 600;
}
.tt-contact-line {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  font-size: 17px;
  line-height: 1.45;
}
.tt-contact-line a {
  color: #fff;
}
.tt-contact-line a:hover {
  color: var(--tt-gold);
}
.tt-contact-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 20px;
}
.tt-contact-form {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 18px;
  padding: 10px 61px 0 81px;
}
.tt-field {
  display: block;
  margin: 0;
}
.tt-field-full {
  grid-column: 1 / -1;
}
.tt-field span {
  display: block;
  margin-bottom: 6px;
  font-size: 17px;
  font-weight: 500;
}
.tt-field input,
.tt-field textarea {
  width: 100%;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 15px;
  outline: 0;
}
.tt-field input {
  height: 52px;
}
.tt-field textarea {
  height: 142px;
  padding-top: 14px;
  resize: none;
}
.tt-field input::placeholder,
.tt-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.tt-field input:focus,
.tt-field textarea:focus {
  border-color: var(--tt-gold);
}
.tt-contact-submit {
  grid-column: 1 / -1;
  height: 59px;
  margin-top: 12px;
  border: 0;
  border-radius: 4px;
  background: var(--tt-gold-grad);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

/* ---------- Footer ---------- */
.tt-footer {
  position: relative;
  padding: 80px 0 0;
  background: #000 no-repeat center top;
  background-size: 1920px auto;
  color: #fff;
}
.tt-footer a {
  color: #fff;
}
.tt-footer a:hover {
  color: var(--tt-gold);
}
.tt-footer-row {
  position: relative;
  display: flex;
}
.tt-footer-about {
  width: 554px;
  margin-right: 0;
}
.tt-footer-logo {
  display: flex;
  align-items: center;
  gap: 20px;
}
.tt-footer-logo img {
  width: 77px;
  height: 77px;
  border-radius: 50%;
  object-fit: cover;
}
.tt-footer-logo span {
  font-size: 26px;
  font-weight: 600;
  text-transform: uppercase;
}
.tt-footer-desc {
  margin: 22px 0 22px;
  font-size: 17px;
  line-height: 1.45;
}
.tt-footer-contact {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tt-footer-contact li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 500;
}
.tt-footer-contact i {
  width: 16px;
  text-align: center;
}
.tt-footer-col {
  margin-left: 0;
}
.tt-footer-col:nth-child(2) {
  width: 310px;
  margin-left: auto;
}
.tt-footer-col:nth-child(3) {
  width: 292px;
}
.tt-footer-map {
  width: 285px;
}
.tt-footer-col h3 {
  margin: 0 0 22px;
  font-size: 17px;
  font-weight: 600;
}
.tt-footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tt-footer-col li {
  margin-bottom: 12px;
  font-size: 15px;
}
.tt-footer-map-frame {
  height: 116px;
  overflow: hidden;
}
.tt-footer-map-frame iframe {
  width: 100% !important;
  height: 116px !important;
  border: 0;
}
.tt-footer-social {
  display: flex;
  gap: 9px;
  margin-top: 20px;
}
.tt-footer-social a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: #1f1f1f;
  color: var(--tt-gold);
  font-size: 15px;
}
.tt-footer-social a:hover {
  background: var(--tt-gold-dark);
  color: #fff;
}
.tt-zalo {
  font-size: 9px;
  font-weight: 700;
}
.tt-footer-copy {
  position: relative;
  margin-top: 110px;
  padding: 0 0 20px;
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
}

/* Các khối có ảnh nền giữ đúng khổ 1920, màn hình rộng hơn thì căn giữa, không kéo dãn */
.tt-topline,
.tt-header,
.tt-menu,
.tt-slide,
.tt-section,
.tt-why,
.tt-brand,
.tt-contact,
.tt-footer,
.bvn-page-hero {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}

/* =====================================================================
   HIỆU ỨNG LẶP LIÊN TỤC (trang chủ + dùng chung)
   Tắt hết khi người dùng bật "giảm chuyển động" trong hệ điều hành.
   ===================================================================== */

/* 1. Chữ vàng ánh kim chạy liên tục trên các tiêu đề */
.tt-title,
.tt-logo-name,
.tt-slide-title,
.tt-slide-sub,
.tt-bc-title,
.tt-spm-title,
.tt-brand-title,
.title-main span {
  background-image: linear-gradient(100deg, #dda33a 0%, #f2c55c 25%, #fff3c4 50%, #f2c55c 75%, #dda33a 100%) !important;
  background-size: 200% auto !important;
  animation: tt-gold-flow 4s linear infinite;
}
@keyframes tt-gold-flow {
  to { background-position: -200% center; }
}

/* 2. Dải vàng trên cùng chảy liên tục */
.tt-topline {
  background: linear-gradient(90deg, #e3ac40, #f9d77a, #fff1c1, #f9d77a, #e3ac40);
  background-size: 200% 100%;
  animation: tt-gold-flow 6s linear infinite;
}

/* 3. Vệt sáng tráng gương tự lướt mỗi 4 giây (trước đây chỉ khi trỏ chuột) */
.tt-shine::after {
  animation: tt-shine-loop 4s ease-in-out infinite;
}
.tt-shine:hover::after {
  animation: tt-shine 0.85s;
}
.tt-bc-banner.tt-shine::after,
.tt-spm-img.tt-shine::after {
  animation-duration: 6s;
}
@keyframes tt-shine-loop {
  0% { left: -75%; }
  25%, 100% { left: 125%; }
}

/* 4. Hotline: icon rung chuông + vòng sóng lan ra */
.tt-hotline {
  animation: tt-pulse-gold 2s ease-out infinite;
}
.tt-hotline svg {
  animation: tt-ring 1.6s ease-in-out infinite;
  transform-origin: 50% 50%;
}
@keyframes tt-ring {
  0%, 50%, 100% { transform: rotate(0); }
  5%, 15%, 25%, 35% { transform: rotate(-18deg); }
  10%, 20%, 30%, 40% { transform: rotate(18deg); }
}
@keyframes tt-pulse-gold {
  0% { box-shadow: 0 0 0 0 rgba(232, 184, 74, 0.6); }
  100% { box-shadow: 0 0 0 16px rgba(232, 184, 74, 0); }
}

/* 5. Giỏ hàng lắc nhẹ, số lượng nảy */
.tt-cart svg {
  animation: tt-swing 3s ease-in-out infinite;
  transform-origin: 50% 0;
}
.tt-cart-count {
  animation: tt-bounce 2s ease-in-out infinite;
}
@keyframes tt-swing {
  0%, 70%, 100% { transform: rotate(0); }
  76% { transform: rotate(14deg); }
  84% { transform: rotate(-10deg); }
  92% { transform: rotate(5deg); }
}
@keyframes tt-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* 6. Logo: vòng hào quang vàng tỏa ra */
.tt-logo img,
.tt-footer-logo img {
  animation: tt-halo 3s ease-in-out infinite;
}
@keyframes tt-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 184, 74, 0.55); }
  50% { box-shadow: 0 0 0 8px rgba(232, 184, 74, 0); }
}

/* 7. Banner: bụi vàng lấp lánh bay lên (hạt do thienthanh.js tạo) */
.tt-sparkles {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}
.tt-sparkles i {
  position: absolute;
  bottom: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d5 0%, #f6cf6b 45%, rgba(246, 207, 107, 0) 70%);
  opacity: 0;
  animation: tt-rise linear infinite;
}
@keyframes tt-rise {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(var(--tt-drift), -390px) scale(1.2); opacity: 0.9; }
  100% { transform: translate(calc(var(--tt-drift) * -1), -790px) scale(0.4); opacity: 0; }
}

/* 8. Ô danh mục phụ kiện: ảnh bồng bềnh lệch nhịp */
.tt-pk-item img {
  animation: tt-float 3.2s ease-in-out infinite;
}
.tt-pk-item:nth-child(2n) img { animation-delay: -0.8s; }
.tt-pk-item:nth-child(3n) img { animation-delay: -1.6s; }
.tt-pk-item:nth-child(5n) img { animation-delay: -2.4s; }
@keyframes tt-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-8px) rotate(-2deg); }
}

/* 9. Thẻ sản phẩm: nhãn % đập nhịp tim */
.tt-pi-badge {
  animation: tt-heartbeat 1.8s ease-in-out infinite;
}
@keyframes tt-heartbeat {
  0%, 40%, 100% { transform: scale(1); }
  10%, 30% { transform: scale(1.15); box-shadow: 0 0 10px rgba(232, 184, 74, 0.7); }
  20% { transform: scale(1.05); }
}

/* 10. Ảnh banner bán chạy, sản phẩm mới: zoom chậm qua lại (Ken Burns) */
.tt-bc-banner img,
.tt-spm-img img {
  animation: tt-kenburns 16s ease-in-out infinite alternate;
}
@keyframes tt-kenburns {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.1) translate(-2%, -1%); }
}

/* 11. Vì sao chọn: viền sáng vàng chạy vòng quanh từng thẻ */
@property --tt-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.tt-why-item {
  position: relative;
}
.tt-why-item::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 2px;
  border-radius: 16px;
  background: conic-gradient(from var(--tt-angle), transparent 0 65%, #f8d77e 80%, #fff3c4 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: tt-spin 4s linear infinite;
  pointer-events: none;
}
.tt-why-item:nth-child(2)::before { animation-delay: -1s; }
.tt-why-item:nth-child(3)::before { animation-delay: -2s; }
.tt-why-item:nth-child(4)::before { animation-delay: -3s; }
@keyframes tt-spin {
  to { --tt-angle: 360deg; }
}

/* 12. Tin tức: nút mũi tên tỏa sóng — nút nằm ở góc thẻ (overflow:hidden) nên chừa 10px quanh nút
   và sóng chỉ lan 10px để không bị cắt phẳng ở cạnh phải/dưới */
.tt-news-go {
  padding: 10px;
}
.tt-news-go-btn {
  animation: tt-pulse-news 2.2s ease-out infinite;
}
@keyframes tt-pulse-news {
  0% { box-shadow: 0 0 0 0 rgba(232, 184, 74, 0.6); }
  100% { box-shadow: 0 0 0 10px rgba(232, 184, 74, 0); }
}

/* 13. Nút Xem Thêm (đen): viền vàng chạy quanh nút */
.tt-btn-dark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}
.tt-btn-dark::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -2;
  background: conic-gradient(from var(--tt-angle), transparent 0 70%, #f8d77e 85%, transparent 100%);
  animation: tt-spin 3s linear infinite;
}
.tt-btn-dark::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: 3px;
  background: #212121;
  transition: 0.2s;
}
.tt-btn-dark:hover {
  background: transparent;
}
.tt-btn-dark:hover::after {
  background: var(--tt-gold-dark);
}
.tt-pk .tt-center > button.tt-btn-dark + a.tt-btn-dark {
  display: none;
}

/* 14. Hiện dần từng khối khi cuộn tới (lớp do thienthanh.js gắn) */
.tt-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.tt-reveal.tt-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .tt-reveal {
    opacity: 1;
    transform: none;
  }
  .tt-sparkles {
    display: none;
  }
}

/* =====================================================================
   KHOẢNG CÁCH THEO ĐÚNG THÔNG SỐ DESIGN (khổ 1920, toạ độ tính từ đỉnh trang)
   banner chữ 675x340 top 427 | phụ kiện 1440x474 top 1057 gap 35
   bán chạy 1441x923 top 1621 gap 20 | sản phẩm mới 1440x638 top 2626
   vì sao chọn 1920x517 top 3351
   ===================================================================== */
.tt-slide-sub {
  margin-top: 26px;
}
.tt-slide-desc {
  margin-top: 39px;
}
.tt-pk {
  padding: 70px 0 0;
}
.tt-pk .tt-title {
  margin-bottom: 35px;
  line-height: 61.44px;
}
.tt-pk-grid {
  margin-bottom: 35px;
}
.tt-pk-grid--no-more {
  margin-bottom: 0;
}
.tt-bc {
  padding: 90px 0 0;
}
.tt-pk:has(.tt-pk-grid--no-more) + .tt-bc {
  padding-top: 60px;
}
.tt-bc-row {
  gap: 20px;
}
.tt-bc .owl-dots {
  margin-top: 24px !important;
}
.tt-spm {
  padding: 82px 0 87px;
}
.tt-spm-box {
  padding-top: 26.5px;
  padding-bottom: 26.5px;
}
.tt-why {
  height: 517px;
  padding: 0;
  display: flex;
  align-items: center;
}
/* thương hiệu 1774x156 top 3954 gap 27 (dải logo vượt mép 1920 tới 2014px) | tin tức 1440x732.55 top 4153 gap 40 */
.tt-brand {
  padding: 86px 0 0;
}
.tt-brand-row {
  gap: 27px;
}
.tt-brand-title {
  width: auto;
  line-height: 78px;
}
.tt-brand-marquee {
  margin-right: -334px;
}
.tt-news {
  padding: 43px 0 0;
}
.tt-news .tt-title {
  margin-bottom: 40px;
  line-height: 60.55px;
}
/* liên hệ top 4940 (cách tin tức 54px) | footer 1920x594 top 5573; khung nội dung 1440x469 cách đỉnh footer 105px, copyright cách phần thông tin 127px */
.tt-news {
  padding-bottom: 54.45px;
}
.tt-footer {
  min-height: 594px;
  padding: 105px 0 20px;
}
.tt-footer-frame {
  min-height: 469px;
  display: flex;
  flex-direction: column;
  gap: 127px;
}
.tt-footer-row {
  flex: 1;
}
.tt-footer-copy {
  margin-top: 0;
  padding: 0;
}
.tt-footer-col li {
  line-height: 21px;
}
.tt-footer-col li:last-child {
  margin-bottom: 0;
}
.tt-footer-col h3 {
  margin-bottom: 18px;
}
.tt-footer-contact li:last-child {
  margin-bottom: 0;
}

/* Footer: thông tin liên hệ khách tự nhập bằng CKEditor (Trang tĩnh > Footer > Nội dung) */
.tt-footer-content {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.tt-footer-content p {
  margin: 0 0 12px;
}
.tt-footer-content > :last-child {
  margin-bottom: 0;
}
.tt-footer-content ul,
.tt-footer-content ol {
  margin: 0 0 12px;
  padding-left: 20px;
}
.tt-footer-content img {
  max-width: 100%;
  height: auto;
}



/* Banner: mép dưới bo cong theo design (cung elip trên toàn khổ ảnh 2159px, giữa thấp, hai đầu cong lên ~80px) */
.tt-slide {
  background: var(--tt-header-bg);
}
.tt-slide .owl-carousel .owl-item .tt-slide-item img {
  border-radius: 0 0 50% 50% / 0 0 80px 80px;
}

/* ---------- Swiper (clone): banner + bán chạy ---------- */
.tt-slide .swiper,
.tt-bc-slider .swiper {
  width: 100%;
}
.tt-slide .tt-slide-item img {
  display: block;
  width: 2159px;
  max-width: none;
  height: 780px;
  margin-left: 50%;
  transform: translateX(-50%);
  object-fit: cover;
  border-radius: 0 0 50% 50% / 0 0 80px 80px;
}
.tt-slide .swiper-slide-active .tt-slide-text > *,
.tt-slide .swiper-slide-active .tt-slide-btn {
  animation: tt-fade-up 0.7s both;
}
.tt-slide .swiper-slide-active .tt-slide-sub { animation-delay: 0.12s; }
.tt-slide .swiper-slide-active .tt-slide-desc { animation-delay: 0.24s; }
.tt-slide .swiper-slide-active .tt-slide-btn { animation-delay: 0.36s; }
.tt-swiper-prev,
.tt-swiper-next {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 20px;
  opacity: 0;
  transition: 0.2s;
}
.tt-slide:hover .tt-swiper-prev,
.tt-slide:hover .tt-swiper-next {
  opacity: 1;
}
.tt-swiper-prev { left: 40px; }
.tt-swiper-next { right: 40px; }
.tt-slide .swiper-pagination {
  bottom: 30px !important;
}
.tt-bc-slider .swiper-pagination {
  position: static;
  margin-top: 24px;
}
.tt-slide .swiper-pagination-bullet,
.tt-bc-slider .swiper-pagination-bullet {
  width: 50px;
  height: 4px;
  margin: 0 3px !important;
  border-radius: 2px;
  background: #dcdcdc;
  opacity: 1;
}
.tt-slide .swiper-pagination-bullet-active,
.tt-bc-slider .swiper-pagination-bullet-active {
  background: var(--tt-gold);
}

/* clone: chống CSS PRONEST đè lên (swiper tràn khung, màu chữ link) */
.tt-bc-slider .swiper,
.tt-slide .swiper {
  overflow: hidden;
}
.tt-bc-slider .swiper-slide {
  height: auto;
}
.tt-btn-dark,
.tt-btn-dark:hover {
  color: #fff !important;
}
.tt-btn-gold,
.tt-slide-btn {
  color: #fff !important;
}

/* Chi tiết sản phẩm: số lượng + Thêm vào giỏ + Mua ngay */
.tt-pd-buy{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:22px 0 18px}
.tt-pd-qty{display:inline-flex;align-items:center;height:50px;border:1px solid #e3d6b8;border-radius:6px;overflow:hidden;background:#fff}
.tt-pd-qty span{display:grid;place-items:center;width:42px;height:100%;font-size:20px;cursor:pointer;user-select:none;color:#333}
.tt-pd-qty span:hover{background:#fbf1dc}
.tt-pd-qty input{width:52px;height:100%;border:0;text-align:center;font-weight:600;-moz-appearance:textfield}
.tt-pd-qty input::-webkit-inner-spin-button,.tt-pd-qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.tt-pd-add,.tt-pd-now{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 26px;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;text-decoration:none}
.tt-pd-add{border:1px solid #D7A641;background:#fff;color:#b8862b}
.tt-pd-add:hover{background:#fbf1dc}
html body .tt-pd-now{position:relative;overflow:hidden;border:0;background:linear-gradient(180deg,#FFD274 0%,#D7A641 100%);color:#fff;min-width:170px}
.tt-pd-add:disabled,.tt-pd-now:disabled{opacity:.6;cursor:wait}

/* Tailwind forms tô viền focus xanh (#2563eb) cho mọi ô nhập: đổi sang vàng theo tông trang chủ */
:is([type='text'], [type='email'], [type='tel'], [type='number'], [type='search'], [type='url'], [type='password'], textarea, select):focus {
  --tw-ring-color: #D7A641;
  border-color: #D7A641;
}
/* Ô tìm kiếm header: khung ngoài đã đổi vàng khi focus, bỏ viền của chính ô nhập */
.tt-search input:focus {
  box-shadow: none;
  outline: 0;
}
/* Bootstrap: viền focus và ô tick/radio đang chọn cũng mặc định xanh */
.form-control:focus, .form-select:focus {
  border-color: #D7A641;
  box-shadow: 0 0 0 0.2rem #d7a64140;
}
.form-check-input:checked {
  background-color: #D7A641;
  border-color: #D7A641;
}

/* Chi tiết bài viết: nút chia sẻ */
.kh-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:28px 0 8px;padding-top:20px;border-top:1px solid #eee}
.kh-share__label{font-weight:600;color:#333}
html body a.kh-share__btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:6px;color:#fff;font-size:14px;font-weight:600;text-decoration:none;transition:filter .2s}
html body a.kh-share__btn:hover{color:#fff;filter:brightness(1.1)}
.kh-share__btn--fb{background:#1877f2}
.kh-share__btn--x{background:#1d9bf0}