/* Front page — tách từ front-page.php (P2 2026-07-16) */
/* ==================================================================
   SMEDEC HOMEPAGE v3 — ALL FIXES APPLIED
   ================================================================== */

/* Reset Flatsome wrappers */
.sm-wrap{margin:0!important;padding:0!important;max-width:100%!important}
body.home .page-wrapper .page,body.home #content{padding:0!important;margin:0!important}
body.home .row.page-row,body.home #content .row{max-width:100%!important;padding:0!important}
.sm-full{width:100vw!important;margin-left:calc(-50vw + 50%)!important;box-sizing:border-box!important}

/* ---- HERO ---- */
/* .sm-hero background: giữ inline trong template vì chứa PHP $banner_url */
.sm-hero::before{content:''!important;position:absolute!important;inset:0!important;background:linear-gradient(180deg,rgba(10,26,44,.65),rgba(10,59,115,.78))!important;z-index:1!important}
.sm-hero-inner{position:relative!important;z-index:2!important;text-align:center!important;padding:90px 20px 120px!important;max-width:860px!important;margin:0 auto!important;width:100%!important}

/* FIX #1: Badge — white-space:nowrap prevents vertical text break */
.sm-hero .hero-badge{
    display:inline-block!important;
    white-space:nowrap!important;
    background:rgba(255,255,255,.15)!important;
    backdrop-filter:blur(8px)!important;
    -webkit-backdrop-filter:blur(8px)!important;
    color:#fff!important;
    font-size:12px!important;
    font-weight:700!important;
    letter-spacing:2px!important;
    padding:8px 24px!important;
    border-radius:20px!important;
    margin-bottom:22px!important;
    border:1px solid rgba(255,255,255,.25)!important;
    text-transform:uppercase!important;
    line-height:1.4!important;
}
.sm-hero h1{color:#fff!important;font-size:40px!important;font-weight:800!important;line-height:1.2!important;margin:0 0 16px!important;text-shadow:0 3px 20px rgba(0,0,0,.4)!important;font-family:'Nunito',sans-serif!important;text-align:center!important}
.sm-hero .desc{color:rgba(255,255,255,.88)!important;font-size:17px!important;margin:0!important;text-align:center!important}

/* ---- SEARCH BOX ---- */
.sm-search{position:relative!important;z-index:10!important;max-width:820px!important;margin:-50px auto 0!important;padding:0 20px!important;box-sizing:border-box!important}
.sm-search form{background:#fff!important;border-radius:16px!important;box-shadow:0 16px 50px rgba(0,0,0,.18)!important;padding:8px!important;display:flex!important;align-items:stretch!important}
.sm-search .sf{padding:14px 20px!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
.sm-search .sf label{display:block!important;font-size:10px!important;font-weight:700!important;text-transform:uppercase!important;color:#999!important;letter-spacing:1px!important;margin-bottom:4px!important}
.sf-kw{flex:1!important;border-right:1px solid #eee!important}
.sf-ct{flex:0 0 210px!important;border-right:1px solid #eee!important}
.sm-search input[type="search"],.sm-search select{width:100%!important;border:none!important;outline:none!important;font-size:14px!important;font-family:'Rubik',sans-serif!important;color:#333!important;background:transparent!important;padding:4px 0!important;box-shadow:none!important;height:auto!important}
.sf-go{flex:0 0 64px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:8px!important}
.sf-go button{width:50px!important;height:50px!important;border-radius:12px!important;border:none!important;background:#0a3b73!important;color:#fff!important;font-size:18px!important;cursor:pointer!important;transition:all .2s!important}
.sf-go button:hover{background:#083060!important;transform:scale(1.06)!important}

/* ---- QUICK ACTIONS ---- */
.sm-actions{padding:50px 0 20px!important;background:#fff!important}
.sm-actions-grid{display:flex!important;justify-content:center!important;gap:28px!important;flex-wrap:wrap!important}
.sm-action-item{display:flex!important;flex-direction:column!important;align-items:center!important;gap:10px!important;text-decoration:none!important;transition:transform .2s!important;cursor:pointer!important;width:100px!important}
.sm-action-item:hover{transform:translateY(-5px)!important}
.sm-action-icon{width:64px!important;height:64px!important;border-radius:16px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:24px!important;color:#fff!important;box-shadow:0 6px 20px rgba(0,0,0,.12)!important}
.sm-action-item span{font-size:13px!important;font-weight:600!important;color:#444!important;text-align:center!important}

/* ---- SECTION COMMON ---- */
.sm-section{padding:60px 0!important}
.sm-section.bg-w{background:#fff!important}.sm-section.bg-l{background:#f8f9fb!important}.sm-section.bg-d{background:linear-gradient(135deg,#0a3b73,#0f2847)!important}
.sm-c{max-width:1200px!important;margin:0 auto!important;padding:0 20px!important;box-sizing:border-box!important}
.stitle{font-size:28px!important;font-weight:800!important;color:#0a3b73!important;text-align:center!important;margin:0 0 10px!important;font-family:'Nunito',sans-serif!important}
.stitle .gold{color:#e6a23c!important}
.sdesc{text-align:center!important;color:#777!important;font-size:15px!important;margin:0 0 30px!important}

/* ---- FIX #2: CITY SLIDER — fixed image display ---- */
.dest-row{display:flex!important;gap:30px!important;align-items:flex-start!important}
.dest-txt{flex:0 0 260px!important}
.dest-txt h2{font-size:28px!important;font-weight:800!important;color:#0a3b73!important;margin:0 0 14px!important;line-height:1.3!important;font-family:'Nunito',sans-serif!important}
.dest-txt p{font-size:14px!important;color:#666!important;line-height:1.7!important}
.dest-scroll{flex:1!important;display:flex!important;gap:16px!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;-webkit-overflow-scrolling:touch!important;padding-bottom:12px!important}
.dest-scroll::-webkit-scrollbar{height:4px!important}.dest-scroll::-webkit-scrollbar-thumb{background:#ccc!important;border-radius:4px!important}
.d-card{flex:0 0 195px!important;scroll-snap-align:start!important;position:relative!important;border-radius:14px!important;overflow:hidden!important;text-decoration:none!important;display:block!important;transition:transform .3s!important;box-shadow:0 4px 15px rgba(0,0,0,.1)!important}
.d-card:hover{transform:translateY(-6px)!important}
.d-card img{width:195px!important;height:260px!important;object-fit:cover!important;display:block!important;transition:transform .5s!important}
.d-card:hover img{transform:scale(1.08)!important}
.d-cap{position:absolute!important;bottom:0!important;left:0!important;right:0!important;padding:50px 14px 14px!important;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent)!important;color:#fff!important}
.d-cap h3{color:#fff!important;font-size:16px!important;margin:0 0 3px!important;font-weight:700!important}
.d-cap p{font-size:11px!important;margin:0!important;opacity:.85!important;color:#fff!important}

/* ---- FIX #3: TRENDING — no emoji, clean badge ---- */
.trending-scroll{display:flex!important;gap:20px!important;overflow-x:auto!important;scroll-snap-type:x mandatory!important;padding-bottom:12px!important;margin-top:10px!important}
.trending-scroll::-webkit-scrollbar{height:4px!important}
.trending-scroll::-webkit-scrollbar-thumb{background:#ddd!important;border-radius:4px!important}
.t-card{flex:0 0 280px!important;scroll-snap-align:start!important;background:#fff!important;border-radius:14px!important;overflow:hidden!important;box-shadow:0 3px 15px rgba(0,0,0,.08)!important;transition:all .3s!important;text-decoration:none!important;display:block!important;border:1px solid #f0f0f0!important}
.t-card:hover{transform:translateY(-5px)!important;box-shadow:0 12px 30px rgba(0,0,0,.12)!important}
.t-card .t-img{position:relative!important;overflow:hidden!important}
.t-card .t-img img{width:100%!important;height:170px!important;object-fit:cover!important;display:block!important}
/* FIX: Trending badge smaller, no emoji rendering issue */
.t-badge{position:absolute!important;top:10px!important;left:10px!important;background:linear-gradient(135deg,#ff6b35,#f72585)!important;color:#fff!important;font-size:11px!important;font-weight:700!important;padding:4px 12px!important;border-radius:12px!important;z-index:3!important;line-height:1.3!important}
.t-card .t-body{padding:16px!important}
.t-card h3{font-size:14px!important;font-weight:700!important;line-height:1.4!important;margin:0 0 8px!important;color:#222!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
.t-card .t-meta{font-size:12px!important;color:#999!important}

/* ---- CATEGORY TAGS ---- */
.cat-tags{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:10px!important;margin:0 0 40px!important}
.cat-tag{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:9px 22px!important;border-radius:25px!important;background:#fff!important;border:1px solid #e0e4ea!important;color:#555!important;font-size:13px!important;font-weight:600!important;text-decoration:none!important;transition:all .25s!important}
.cat-tag:hover{background:#0a3b73!important;border-color:#0a3b73!important;color:#fff!important;transform:translateY(-2px)!important;box-shadow:0 6px 18px rgba(10,59,115,.25)!important}

/* ---- STATS ---- */
.sm-stats{display:flex!important;justify-content:center!important;gap:50px!important;flex-wrap:wrap!important;padding:30px 0!important}
.stat-item{text-align:center!important}
.stat-num{font-size:42px!important;font-weight:800!important;color:#fff!important;font-family:'Nunito',sans-serif!important;line-height:1!important}
.stat-label{font-size:14px!important;color:rgba(255,255,255,.7)!important;margin-top:6px!important}

/* ---- POST GRID ---- */
.pgrid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:24px!important}
.pcard{background:#fff!important;border-radius:14px!important;overflow:hidden!important;box-shadow:0 2px 12px rgba(0,0,0,.06)!important;transition:all .3s!important;border:1px solid #f0f0f0!important}
.pcard:hover{transform:translateY(-5px)!important;box-shadow:0 12px 30px rgba(0,0,0,.12)!important}
.pcard .pc-img{position:relative!important;overflow:hidden!important}
.pcard .pc-img img{width:100%!important;height:200px!important;object-fit:cover!important;display:block!important;transition:transform .4s!important}
.pcard:hover .pc-img img{transform:scale(1.06)!important}
.pcard .pc-bd{padding:18px!important}
.pcard .pc-mt{display:flex!important;gap:14px!important;margin-bottom:10px!important;font-size:12px!important;color:#999!important}
.pcard .pc-mt i{color:#0a3b73!important;margin-right:4px!important}
.pcard h3{font-size:15px!important;font-weight:700!important;line-height:1.4!important;margin:0 0 10px!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
.pcard h3 a{color:#222!important;text-decoration:none!important}.pcard h3 a:hover{color:#0a3b73!important}
.pc-rt{display:flex!important;align-items:center!important;gap:8px!important}
.pc-rt .stars{color:#f5a623!important;font-size:13px!important}.pc-rt .leg{font-size:12px!important;color:#999!important}

/* ---- SOCIAL PROOF — colored brand logos ---- */
.sm-proof{text-align:center!important;padding:30px 0!important}
.proof-title{font-size:20px!important;font-weight:700!important;color:#333!important;margin:0 0 8px!important;font-family:'Nunito',sans-serif!important;font-style:italic!important}
.proof-line{width:60px!important;height:3px!important;background:#2ecc71!important;margin:0 auto 30px!important;border-radius:2px!important}
.proof-logos{display:flex!important;justify-content:center!important;gap:45px!important;align-items:center!important;flex-wrap:wrap!important}
.proof-logo-item{display:inline-block!important;font-size:22px!important;font-weight:800!important;letter-spacing:-.5px!important;text-decoration:none!important;transition:opacity .3s!important;opacity:.85!important;line-height:1!important}
.proof-logo-item:hover{opacity:1!important}

/* ---- NEWSLETTER — fixed button alignment ---- */
.sm-nl{text-align:center!important;max-width:600px!important;margin:0 auto!important}
.sm-nl h2{color:#fff!important;font-size:26px!important;font-weight:800!important;margin:0 0 10px!important;font-family:'Nunito',sans-serif!important}
.sm-nl p{color:rgba(255,255,255,.75)!important;font-size:15px!important;margin:0 0 28px!important}
.nl-form{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:0!important;max-width:480px!important;margin:0 auto!important;align-items:stretch!important}
.nl-form input[type="email"]{flex:1 1 auto!important;min-width:0!important;border:none!important;outline:none!important;padding:14px 20px!important;border-radius:12px 0 0 12px!important;font-size:14px!important;font-family:'Rubik',sans-serif!important;box-shadow:none!important;height:auto!important;margin:0!important;background:#fff!important;color:#333!important;-webkit-appearance:none!important}
.nl-form button{flex:0 0 auto!important;padding:14px 28px!important;border:none!important;background:#e6a23c!important;color:#fff!important;font-weight:700!important;font-size:14px!important;border-radius:0 12px 12px 0!important;cursor:pointer!important;transition:background .2s!important;white-space:nowrap!important;margin:0!important;height:auto!important;line-height:1.2!important}
.nl-form button:hover{background:#d4911a!important}

/* ---- LOAD MORE ---- */
.sm-more{text-align:center!important;margin-top:40px!important}
.btn-more{display:inline-block!important;padding:14px 40px!important;border-radius:30px!important;background:#0a3b73!important;color:#fff!important;font-size:14px!important;font-weight:700!important;text-decoration:none!important;transition:all .3s!important;box-shadow:0 6px 20px rgba(10,59,115,.2)!important}
.btn-more:hover{background:#083060!important;transform:translateY(-2px)!important;color:#fff!important}

/* ---- RESPONSIVE ---- */
@media(max-width:991px){.dest-row{flex-direction:column!important}.dest-txt{flex:none!important;width:100%!important;text-align:center!important}.pgrid{grid-template-columns:repeat(2,1fr)!important}.sm-stats{gap:30px!important}.sf-ct{flex:0 0 180px!important}.sm-actions-grid{gap:16px!important}}
@media(max-width:768px){.sm-hero h1{font-size:26px!important}.sm-hero-inner{padding:60px 15px 80px!important}.sm-search form{flex-direction:column!important}.sf-kw,.sf-ct{border-right:none!important;border-bottom:1px solid #eee!important;flex:none!important}.sf-go{flex:none!important}.sf-go button{width:100%!important;height:46px!important;border-radius:10px!important}.pgrid{gap:16px!important}.stitle{font-size:22px!important}.stat-num{font-size:32px!important}.sm-stats{gap:20px!important}.nl-form{flex-direction:column!important;gap:10px!important}.nl-form input,.nl-form button{border-radius:10px!important}.proof-logos{gap:20px!important}.proof-logos img{height:24px!important}}
@media(max-width:480px){.pgrid{grid-template-columns:1fr!important}.sm-hero{min-height:400px!important}.sm-action-item{width:80px!important}.sm-action-icon{width:52px!important;height:52px!important;font-size:20px!important}}