/* Trang Về Hải Đăng — họa tiết nền & khung ảnh */

.hd-ab { position: relative; isolation: isolate; overflow: hidden; }
.hd-ab > div { position: relative; z-index: 2; }
.hd-ab::before, .hd-ab::after { content: ""; position: absolute; pointer-events: none; z-index: 0; }

/* ---------- Thông điệp: la bàn vàng + lưới chấm ---------- */
.hd-ab--msg { background: radial-gradient(760px 420px at 50% 0%, rgba(255, 226, 160, .32), transparent 70%), #f6f3ec; }
.hd-ab--msg::before {
  width: 520px; height: 520px; right: -150px; top: -120px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23c59a48' stroke-width='1.2'%3E%3Ccircle cx='200' cy='200' r='190'/%3E%3Ccircle cx='200' cy='200' r='150' stroke-dasharray='2 7'/%3E%3Ccircle cx='200' cy='200' r='105'/%3E%3Cpath d='M200 6v388M6 200h388M63 63l274 274M337 63L63 337' stroke-opacity='.55'/%3E%3Cpath d='M200 40l16 160-16 160-16-160z' fill='%23c59a48' fill-opacity='.22' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hd-ab--msg::after {
  width: 300px; height: 220px; left: 4%; bottom: 28px; opacity: .9;
  background-image: radial-gradient(rgba(186, 140, 74, .32) 1.3px, transparent 1.6px); background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(45deg, #000, transparent 75%); mask-image: linear-gradient(45deg, #000, transparent 75%);
}

/* ---------- Hành trình: sóng địa hình mờ + ảnh khung vàng ---------- */
.hd-ab--journey { background: #fff; }
.hd-ab--journey::before {
  inset: 0; opacity: .8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='140' viewBox='0 0 420 140' fill='none' stroke='%2310314C' stroke-opacity='.06' stroke-width='1.4'%3E%3Cpath d='M0 30C70 6 140 54 210 30S350 6 420 30'/%3E%3Cpath d='M0 62C70 38 140 86 210 62S350 38 420 62'/%3E%3Cpath d='M0 94C70 70 140 118 210 94S350 70 420 94'/%3E%3Cpath d='M0 126C70 102 140 150 210 126S350 102 420 126'/%3E%3C/svg%3E") 0 0 / 420px 140px repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 62%); mask-image: linear-gradient(90deg, #000 0%, transparent 62%);
}
.hd-ab--journey::after { width: 360px; height: 360px; right: -120px; bottom: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 213, 138, .28), transparent 68%); }

.hd-photo { position: relative; margin-top: 2.25rem; max-width: 30rem; }
.hd-photo::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1.5px solid rgba(197, 154, 72, .75); border-radius: 1.25rem; z-index: 0; }
.hd-photo::after {
  content: ""; position: absolute; width: 112px; height: 112px; left: -38px; bottom: -38px; z-index: 0; opacity: .9;
  background-image: radial-gradient(rgba(197, 154, 72, .75) 1.6px, transparent 2px); background-size: 14px 14px;
}
.hd-photo img { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1.25rem; box-shadow: 0 26px 50px -30px rgba(10, 38, 54, .7); }
.hd-photo__tag {
  position: absolute; z-index: 2; right: -10px; top: 22px; padding: .6rem .95rem; border-radius: .9rem; text-align: center;
  background: #0e3448; color: #faf8f3; box-shadow: 0 14px 28px -16px rgba(10, 38, 54, .8); border: 1px solid rgba(217, 172, 88, .55);
}
.hd-photo__tag b { display: block; font-family: var(--font-heading), Georgia, serif; font-weight: 500; font-size: 1.15rem; color: #e0b866; line-height: 1.1; }
.hd-photo__tag small { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }

/* ---------- Định hướng: ảnh hải đăng + chấm vàng ---------- */
.hd-ab--mission { background:
    linear-gradient(180deg, rgba(14, 52, 72, .93) 0%, rgba(10, 38, 54, .9) 55%, rgba(7, 28, 42, .96) 100%),
    url("../images/hero-lighthouse.jpg") center 40% / cover no-repeat; }
.hd-ab--mission::before {
  inset: 0; opacity: .55;
  background-image: radial-gradient(rgba(217, 172, 88, .4) 1.2px, transparent 1.6px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(70% 70% at 85% 10%, #000, transparent 75%); mask-image: radial-gradient(70% 70% at 85% 10%, #000, transparent 75%);
}
.hd-ab--mission::after {
  width: 640px; height: 640px; left: -240px; bottom: -330px; border-radius: 50%;
  border: 1px solid rgba(217, 172, 88, .28); box-shadow: 0 0 0 46px rgba(217, 172, 88, .05), 0 0 0 92px rgba(217, 172, 88, .035);
}

/* ---------- Phương pháp: dải sóng vàng nhạt + vòng tròn ---------- */
.hd-ab--method { background: linear-gradient(180deg, #fff 0%, #fbf8f1 100%); }
.hd-ab--method::before {
  width: 560px; height: 560px; right: -300px; top: -150px; opacity: .6;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23c59a48' stroke-opacity='.45' stroke-width='1'%3E%3Ccircle cx='200' cy='200' r='60'/%3E%3Ccircle cx='200' cy='200' r='100'/%3E%3Ccircle cx='200' cy='200' r='140'/%3E%3Ccircle cx='200' cy='200' r='180'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hd-ab--method::after {
  left: 0; right: 0; bottom: 0; height: 120px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70C240 30 480 110 760 74S1230 30 1440 78V120H0z' fill='%23f6f3ec'/%3E%3Cpath d='M0 92C260 62 520 118 800 96S1250 64 1440 98V120H0z' fill='%23c59a48' fill-opacity='.16'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}

/* ---------- Người sáng lập: khung vàng lệch + lưới chấm ---------- */
.hd-ab--founder { background: radial-gradient(640px 380px at 8% 20%, rgba(255, 226, 160, .3), transparent 70%), #f6f3ec; }
.hd-ab--founder::before {
  width: 340px; height: 340px; left: -90px; top: 40px; opacity: .8;
  background-image: radial-gradient(rgba(186, 140, 74, .3) 1.4px, transparent 1.8px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 72%); mask-image: radial-gradient(circle, #000 20%, transparent 72%);
}
.hd-ab--founder::after {
  width: 420px; height: 420px; right: -160px; bottom: -190px; border-radius: 50%;
  border: 1px solid rgba(197, 154, 72, .35); box-shadow: 0 0 0 38px rgba(197, 154, 72, .06);
}
.hd-founder-wrap { position: relative; max-width: 26rem; margin: 0 auto; }
.hd-founder-wrap::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1.5px solid rgba(197, 154, 72, .8); border-radius: 1.4rem; z-index: 0; }
.hd-founder-wrap .hd-founder { position: relative; z-index: 1; }

/* ---------- Đối tác: dải ảnh ---------- */
.hd-ab--partners { background: #fff; }
.hd-ab--partners::before {
  inset: 0; opacity: .9;
  background-image: radial-gradient(rgba(16, 49, 76, .09) 1.2px, transparent 1.6px); background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%); mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
}
.hd-partner-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 3rem 0 0; text-align: left;
  width: min(1120px, calc(100vw - 2.5rem)); position: relative; left: 50%; transform: translateX(-50%); }
.hd-partner-strip figure { position: relative; margin: 0; border-radius: 1.1rem; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 22px 44px -28px rgba(10, 38, 54, .65); }
.hd-partner-strip img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s ease; }
.hd-partner-strip figure:hover img { transform: scale(1.05); }
.hd-partner-strip figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(10, 38, 54, .78)); }
.hd-partner-strip figcaption { position: absolute; z-index: 2; left: 1.1rem; right: 1.1rem; bottom: .95rem; color: #faf8f3; font-family: var(--font-heading), Georgia, serif; font-size: 1.1rem; }
.hd-partner-strip figcaption::before { content: ""; display: block; width: 1.6rem; height: 2px; margin-bottom: .45rem; background: #d9ac58; }
@media (max-width: 767px) {
  .hd-partner-strip { grid-template-columns: 1fr; }
  .hd-ab--msg::before { width: 340px; height: 340px; right: -140px; }
  .hd-photo::before { inset: 10px -8px -10px 10px; }
  .hd-founder-wrap::before { inset: 12px -10px -12px 12px; }
}
@media (prefers-reduced-motion: reduce) { .hd-partner-strip img { transition: none; } }