/* cam-nang-hub.css — bố cục hub cẩm nang, TRÍCH NGUYÊN VĂN từ Web/cam-nang.php.
   Giữ nguyên tên lớp hub-* để HTML bên MHTravel dùng lại y hệt.
   ĐỪNG sửa tay — chạy lại bộ trích là mất. Phần riêng để ở cuối css/bai.css.
   Trích bằng scratchpad/trich-hub-css.js */

@keyframes fcPulse {0%,100%{box-shadow:0 4px 16px rgba(255,82,82,.35),0 0 0 0 rgba(255,82,82,.4)}60%{box-shadow:0 4px 16px rgba(255,82,82,.35),0 0 0 10px rgba(255,82,82,0)}}
@keyframes dropIn { from { opacity:0; transform: translateX(-50%) translateY(-6px); } to { opacity:1; transform: translateX(-50%) translateY(0); } }
@keyframes ringPulse {
            0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(201,169,97,0.4); }
            50% { transform: scale(1.1); box-shadow: 0 4px 14px rgba(201,169,97,0.65); }
        }
@keyframes shimmer {
            0%   { background-position: -600px 0; }
            100% { background-position: 600px 0; }
        }
@keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
.hub-lead { text-align: center; margin: 0 0 34px; }
.hub-eyebrow { display: inline-flex; align-items: center; gap: 11px; font-size: 10.5px; font-weight: 700;
            letter-spacing: 4px; text-transform: uppercase; color: #a8873c; margin-bottom: 16px; }
.hub-eyebrow::before, .hub-eyebrow::after { content: ''; display: block; width: 30px; height: 1px; background: var(--accent); }
.hub-h2 { font-size: clamp(26px, 4vw, 44px); font-weight: 800; color: var(--navy); text-transform: uppercase;
            letter-spacing: 1.5px; line-height: 1.12; margin: 0 0 16px; }
.hub-lead-sub { font-size: 15px; color: #7b8a99; margin: 0; line-height: 1.75; }
.hub-wrap { display: flex; flex-direction: column; gap: 24px; margin-bottom: 46px; }
.hub-cluster { background: #fff; border-radius: 20px; overflow: hidden;
            box-shadow: 0 4px 24px rgba(30,58,95,.08); transition: box-shadow .3s, transform .3s; }
.hub-cluster:hover { box-shadow: 0 18px 48px rgba(30,58,95,.17); transform: translateY(-3px); }
.hub-cluster.is-soon { box-shadow: 0 3px 14px rgba(30,58,95,.06); }
.hub-cluster.is-soon:hover { box-shadow: 0 10px 30px rgba(30,58,95,.12); }
.hub-cluster.is-soon .hub-banner { padding-top: 22px; padding-bottom: 22px; }
.hub-banner { position: relative; display: flex; align-items: center; gap: 22px;
            padding: 28px 30px; background-size: cover; background-position: center; overflow: hidden; }
.hub-banner::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
            background: linear-gradient(90deg, var(--accent), #e8d08a 55%, transparent); }
.hub-banner-no { position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
            font-size: 96px; font-weight: 800; line-height: 1; color: rgba(255,255,255,.07);
            letter-spacing: -4px; pointer-events: none; user-select: none; }
.hub-banner-text { min-width: 0; flex: 1; position: relative; z-index: 1; }
.hub-kicker { display: inline-flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 700;
            letter-spacing: 3px; text-transform: uppercase; color: #e8d08a; margin-bottom: 9px; }
.hub-kicker::before { content: ''; display: block; width: 22px; height: 1px; background: #e8d08a; }
.hub-title { font-size: clamp(19px, 2.2vw, 26px); font-weight: 800; color: #fff; text-transform: uppercase;
            letter-spacing: 1.4px; line-height: 1.15; margin: 0 0 8px; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
.hub-title a { color: inherit; text-decoration: none; }
.hub-title a:hover { color: #e8d08a; }
.hub-sub { font-size: 13.5px; color: rgba(255,255,255,.82); margin: 0; line-height: 1.6;
            text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.hub-cta { position: relative; z-index: 1; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
            font-size: 13px; font-weight: 800; letter-spacing: .4px; color: #0b1a2d;
            background: linear-gradient(135deg, #e8d08a, var(--accent)); border-radius: 30px; padding: 11px 22px;
            text-decoration: none; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,.28); transition: all .22s; }
.hub-cta:hover { transform: translateY(-2px); box-shadow: 0 9px 26px rgba(201,169,97,.5); }
.hub-cta-arw { transition: transform .22s; }
.hub-cta:hover .hub-cta-arw { transform: translateX(4px); }
.hub-cluster.is-soon .hub-cta { background: transparent; color: #e8d08a; border: 1px solid rgba(232,208,138,.55);
            box-shadow: none; padding: 9px 19px; font-size: 12.5px; }
.hub-cluster.is-soon .hub-cta:hover { background: rgba(232,208,138,.14); border-color: #e8d08a; transform: translateY(-2px); }
.hub-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.hub-card { display: flex; flex-direction: column; text-decoration: none; background: #fff;
            border-right: 1px solid #eef2f6; transition: background .22s; }
.hub-cards .hub-card:last-child { border-right: 0; }
.hub-card:hover { background: #fbfcfe; }
.hub-card-img { aspect-ratio: 16/10; background: linear-gradient(135deg, #e9f0f7, #f4f8fc);
            overflow: hidden; position: relative; }
.hub-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s ease; }
.hub-card:hover .hub-card-img img { transform: scale(1.07); }
.hub-card-img.is-blank::after { content: '📄'; position: absolute; inset: 0; display: grid; place-items: center;
            font-size: 26px; opacity: .28; }
.hub-card-body { padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.hub-card-title { font-size: 14.5px; font-weight: 700; color: var(--navy); line-height: 1.45;
            display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hub-card-desc { font-size: 12.5px; color: #97a3af; line-height: 1.55;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hub-card-go { margin-top: auto; padding-top: 10px; font-size: 12px; font-weight: 800; letter-spacing: .5px;
            text-transform: uppercase; color: #a8873c; display: inline-flex; align-items: center; gap: 6px; }
.hub-card-go span { transition: transform .22s; }
.hub-card:hover .hub-card-go span { transform: translateX(4px); }
@media (max-width: 900px) {
.hub-cards { grid-template-columns: repeat(2, 1fr); }
.hub-cards .hub-card:nth-child(3) { display: none; }
.hub-cards .hub-card:nth-child(2) { border-right: 0; }
.hub-banner-no { font-size: 74px; right: 16px; }
}
@media (max-width: 620px) {
.hub-br { display: none; }
.hub-banner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 18px; }
.hub-banner-no { font-size: 60px; top: 18px; right: 14px; transform: none; }
.hub-cta { width: 100%; justify-content: center; }
.hub-cards { grid-template-columns: 1fr; }
.hub-cards .hub-card { border-right: 0; border-bottom: 1px solid #eef2f6; }
.hub-cards .hub-card:nth-child(3) { display: flex; }
.hub-cards .hub-card:last-child { border-bottom: 0; }
.hub-card-img { aspect-ratio: 16/9; }
}
@keyframes hsKenBurns {from{transform:scale(1.07)}to{transform:scale(1)}}