/* banner-slider.css — bộ chuyển ảnh banner, TRÍCH NGUYÊN VĂN từ Web/cam-nang.php.
   Giữ nguyên tên lớp (hero-slider, hero-slide, hs-dot, hs-progress…) để JS trích
   kèm chạy y hệt. ĐỪNG sửa tay — chạy lại bộ trích là mất.
   Trích bằng scratchpad/trich-slider.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); }
        }
.hero-slider {position:relative;width:100%;min-height:500px;overflow:hidden;background:#061020;margin-top:-68px}
.hero-slider-sm {min-height:300px}
.hero-slide {position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.4s cubic-bezier(0.4,0,0.2,1)}
.hero-slide.active {opacity:1;animation:hsKenBurns 8s ease-out forwards}
@keyframes hsKenBurns {from{transform:scale(1.07)}to{transform:scale(1)}}
.hero-slider-overlay {position:absolute;inset:0;z-index:2;background:rgba(4,12,34,.52),linear-gradient(to top,rgba(4,12,34,.38) 0%,transparent 46%)}
.hero-slider-content {position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;padding:0 48px}
.hs-inner {max-width:680px;width:100%;text-align:center}
.hs-eyebrow {display:inline-flex;align-items:center;gap:10px;font-size:10.5px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:#e8d08a;margin-bottom:14px}
.hs-eyebrow::before,.hs-eyebrow::after {content:'';display:block;width:26px;height:1px;background:#e8d08a}
.hs-title {font-size:clamp(18px,2.4vw,34px);font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:2px;line-height:1.1;margin:0 0 10px;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.hs-subtitle {font-size:clamp(14px,1.4vw,17px);color:rgba(255,255,255,.87);line-height:1.72;margin:0;font-weight:400;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.hs-dots {position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:4}
.hs-dot {width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);border:1.5px solid rgba(255,255,255,.5);cursor:pointer;transition:all .35s;padding:0;outline:none}
.hs-dot.active {background:#c9a961;border-color:#c9a961;width:28px;border-radius:4px}
.hs-progress {position:absolute;bottom:0;left:0;height:3px;background:linear-gradient(to right,#c9a961,#e8d08a);z-index:5;width:0}
.hs-progress.run {width:100%;transition:width 5.5s linear}
.hs-counter {position:absolute;bottom:22px;right:52px;z-index:4;color:rgba(255,255,255,.5);font-size:11.5px;font-weight:600;letter-spacing:2px}
@media(max-width:960px) {
.hero-slider {min-height:370px}
.hero-slider-sm {min-height:240px}
.hero-slider-content {padding:0 36px}
.hs-counter {right:36px}
.hs-inner {max-width:100%}
}
@media(max-width:600px) {
.hero-slider {min-height:300px}
.hero-slider-sm {min-height:210px}
.hero-slider-content {padding:0 24px}
.hs-counter {right:24px}
.hs-title {font-size:clamp(22px,6.5vw,36px);letter-spacing:1px}
.hs-subtitle {font-size:14px}
}
@media(max-width:400px) {
.hero-slider {min-height:260px}
.hero-slider-sm {min-height:185px}
.hero-slider-content {padding:0 18px}
.hs-counter {right:18px}
.hs-title {font-size:clamp(20px,7.5vw,28px)}
}