/* Full style.css (compact edition) */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;600;700;800&family=Playfair+Display:wght@700;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',sans-serif;background:linear-gradient(180deg,#740000,#220000);color:#fff;overflow-x:hidden}
a{text-decoration:none;color:inherit}
#particles{position:fixed;inset:0;pointer-events:none;z-index:-1}
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.6)),url(images/vietnam.jpg) center/cover}
.hero-content{max-width:960px;padding:20px}
.small-title{display:inline-block;padding:10px 22px;border:1px solid rgba(255,255,255,.2);border-radius:40px;background:rgba(255,255,255,.08);color:#ffd54f}
.hero h1{font:800 72px 'Playfair Display',serif;color:#ffd54f;margin:20px 0}
.hero p{font-size:24px}
.line{width:140px;height:4px;background:#ffd54f;margin:30px auto;border-radius:20px}
.reading{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.reading span{width:7px;height:7px;border-radius:50%;background:#ffd54f}
.container{max-width:1350px;margin:auto;padding:70px 24px}
.search-box{max-width:700px;margin:0 auto 50px}
.search-box input{width:100%;padding:18px 24px;border-radius:40px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:24px}
.card{display:flex;gap:18px;align-items:center;padding:26px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);transition:.35s;position:relative;overflow:hidden}
.card:before{content:'';position:absolute;left:-120%;top:0;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:.8s}
.card:hover:before{left:130%}
.card:hover{transform:translateY(-8px);box-shadow:0 15px 35px rgba(0,0,0,.35);border-color:#ffd54f}
.number{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ffd54f;color:#7a0000;font-weight:800;font-size:24px;flex:none}
.card h3{font-size:25px;margin-bottom:6px}
.card p{color:#eee}
.featured{border:2px solid #ffd54f;animation:glow 2s infinite}
@keyframes glow{50%{box-shadow:0 0 24px rgba(255,213,79,.5)}}
footer{text-align:center;padding:70px 20px;background:#180000;margin-top:70px}
footer h2{font:800 42px 'Playfair Display',serif;color:#ffd54f;margin-bottom:10px}
footer p{opacity:.85}
.top-btn{position:fixed;right:20px;bottom:20px;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ffd54f;color:#700;font-weight:700;box-shadow:0 8px 25px rgba(0,0,0,.3)}
.fade{opacity:0;transform:translateY(30px);transition:.8s}
.fade.show{opacity:1;transform:none}
@media(max-width:768px){
.hero h1{font-size:42px}
.hero p{font-size:18px}
.grid{grid-template-columns:1fr}
.card{padding:20px}
.number{width:60px;height:60px}
footer h2{font-size:30px}
}