/* =============================================================================
   Chân trang dùng chung — dải CTA đỏ + dải thông tin nền kem
   -----------------------------------------------------------------------------
   Nạp trên MỌI trang (khai báo trong rt3/head.php), dùng cho rt3/footer.php.

   Bố cục lấy nguyên từ chân trang của /silver-house/workshop/. Khác ở chỗ mọi
   lớp mang tiền tố .shf- và tự khai báo màu riêng trong .shf, không mượn biến
   của run-test-3.css hay workshop-2.css — nhờ vậy dán được vào bất kỳ trang nào
   mà màu không lệch, kể cả trang chủ nền tối.

   Nhiều luật phải viết dạng ".shf .shf-… " (hai lớp) để thắng luật chung
   ".rt3 h2", ".rt3 a" trong run-test-3.css.
   ========================================================================== */

.shf {
  --shf-kem-2: #f4ece0;
  --shf-do:    #7d1f2b;
  --shf-vien:  rgba(140, 108, 72, .22);
  --shf-chu:   #2f2620;
  --shf-nhat:  #7d6d5e;
  --shf-vang:  #c08a4a;

  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

.shf *   { box-sizing: border-box; }
.shf img { display: block; max-width: 100%; }

.shf-shell { width: min(1280px, 100% - 56px); margin-inline: auto; }

.shf-i     { flex: none; width: 22px; height: 22px; }
.shf-i-nho { width: 15px; height: 15px; }

/* ------------------------------------------------------------------- CTA đỏ */
.shf-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, #6b1622 0%, #7d1f2b 52%, #8c2b36 100%);
  color: #fff;
}

.shf-cta-anh {
  position: absolute;
  right: 0;
  top: 0;
  width: 30%;
  height: 100%;
  object-fit: cover;
  opacity: .62;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 34%, #000 72%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 34%, #000 72%);
}

.shf-cta-in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 34px;
  padding: 40px 0;
}

.shf .shf-cta h2 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}

.shf .shf-cta p {
  margin: 0;
  max-width: 30em;
  font-size: 12px;
  line-height: 21px;
  color: rgba(255, 245, 236, .85);
}

.shf a.shf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 42px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 4px;
  background: transparent;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}

.shf a.shf-btn:hover { background: #fff; border-color: #fff; color: var(--shf-do); }

/* -------------------------------------------------------- dải thông tin kem */
.shf-chan {
  background: var(--shf-kem-2);
  border-top: 1px solid var(--shf-vien);
}

.shf-chan-in {
  display: grid;
  grid-template-columns: 1.35fr .85fr 1fr 1.1fr auto;
  align-items: center;
  gap: 26px;
  padding: 20px 0;
}

.shf .shf-chan p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 11px;
  line-height: 17px;
  color: var(--shf-nhat);
}

.shf-chan .shf-i { flex: none; color: var(--shf-do); }

.shf .shf-chan p b {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--shf-chu);
}

/* Số điện thoại bấm gọi được, nhưng nhìn phải y hệt các dòng chữ bên cạnh. */
.shf .shf-chan p a.shf-lien { color: inherit; text-decoration: none; }
.shf .shf-chan p a.shf-lien:hover { color: var(--shf-do); }

.shf .shf-xh { align-items: center; gap: 10px; }
.shf-xh > span { margin-right: 2px; }

.shf .shf-xh a {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #4a3d33;
}

.shf .shf-xh a:hover { color: var(--shf-do); }

.shf a.shf-chan-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.shf-chan-logo > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--shf-vang);
  border-radius: 50%;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 12px;
  color: var(--shf-do);
}

.shf-chan-logo b {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--shf-chu);
}

.shf-chan-logo small {
  display: block;
  font-size: 8.5px;
  letter-spacing: 0.24em;
  color: var(--shf-nhat);
}

/* ================================= khổ nhỏ ================================= */
@media (max-width: 1024px) {
  .shf-shell   { width: min(1280px, 100% - 40px); }
  .shf-cta-in  { grid-template-columns: 1fr; gap: 18px; }
  .shf-cta-anh { width: 100%; opacity: .22; -webkit-mask-image: none; mask-image: none; }
  .shf-chan-in { grid-template-columns: 1fr 1fr; gap: 18px; }
}

@media (max-width: 720px) {
  .shf-cta-in  { padding: 32px 0; }
  .shf a.shf-btn { height: 38px; padding: 0 16px; font-size: 11.5px; }
  .shf-chan-in { grid-template-columns: 1fr; }
}