/*
Theme Name: Firstclass
Theme URI:https://www.firstclass.com.vn/
Author:Special One
Author URI:https://www.firstclass.com.vn/
Version:1.0
License:GNU General Public License v2 or later
License URI:http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:Firstclass
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@font-face{font-family:PR-Regular;src:url(./fonts/PicareskVN/PicareskVN-Regular.ttf);font-display:swap}
@font-face{font-family:PR-Italic;src:url(./fonts/PicareskVN/PicareskVN-Italic.ttf);font-display:swap}
@font-face{font-family:PR-Medium;src:url(./fonts/PicareskVN/PicareskVN-Medium.ttf);font-display:swap}
body{font-family:'PR-Regular',sans-serif;margin:0;padding:0;font-size:16px;background:#fff}
img{border:none}
a{text-decoration:none;color:#0F0F0F}
p{margin:0;color:#222}
h2,h3,h4{color:#222}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;vertical-align:baseline;}
.container{margin-right:auto;margin-left:auto}

/*Header*/
.header{width:100%;;background-color:#1e73be}
.top-bar{display:flex;justify-content:space-between;align-items:center;padding:15px 40px;color:#fff}
.contact-left,.contact-right{display:flex;align-items:center;gap:10px}
.contact-left img,.contact-right img{width:30px}
.label{font-style:italic;font-size:0.85rem;margin:0; color: #fff}
.info{margin: 0; font-size: 0.9rem; color: #fff; margin-top: 3px;}
.logo{text-align:center}
.logo h1{font-size:2rem;margin:0}
.logo span{font-weight:bold}
.logo p{margin:0;font-size:0.85rem; color: #fff}
.main-nav{background: #f8f8f8; position: relative;border-bottom: 1px solid #1e73be;}
.main-nav .nav {display: flex ; flex-direction: row; justify-content: space-between; align-items: center;}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:25px}
.main-nav ul li{position:relative;padding:12px 10px;cursor:pointer;white-space:nowrap}
.main-nav ul li:hover{background-color:#e8e8e8}
    /* Submenu cấp 1 */
    .main-nav .submenu{display:none;position:absolute;top:100%;left:0;background-color:#1d64af;color:white;min-width:250px;z-index:1000}
.main-nav .submenu li{padding:10px;border-bottom:1px solid rgba(255,255,255,0.2)}
.main-nav .submenu li:hover{background-color:#155293}
    /* Submenu cấp 2 */
    .submenu-right{display:none;position:absolute;left:100%;top:0;background-color:#1d64af;min-width:280px}
.submenu li:hover .submenu-right{display:block}
.has-submenu:hover .submenu{display:block}

.menu,.menu ul{list-style:none;margin:0;padding:0}
.menu > li{position:relative;display:inline-block;padding:12px;cursor:pointer}
.menu li ul.submenu{display:none;position:absolute;top:100%;left:0;background:#1d64af;color:white;min-width:250px;z-index:999}
.menu li ul.submenu a{color:#fff}
.menu li:hover > .submenu{display:block}
.menu li .submenu-right{display:none;position:absolute;top:0;left:100%;background:#1d64af;min-width:280px}
.menu li:hover > .submenu > li:hover > .submenu-right{display:block}
    /* Tìm kiếm */
    .search-form-wrapper{position:relative;display:flex;align-items:center}
.search-form{display:flex;align-items:center;border:1px solid #ccc;border-radius:20px;overflow:hidden;background-color:#fff}
.search-form .search-field{padding:8px 12px;border:none;outline:none;font-size:14px;min-width:180px}
.search-form .search-submit{background-color:#2d74bb;border:none;padding:8px;cursor:pointer}
.search-form .search-submit img{width:16px;height:16px;filter:brightness(0) invert(1);/* làm icon trắng */}
/*Main*/
    /*Home*/
        /*slide*/
.hero-slider{position:relative;height:396px;overflow:hidden}
.slide{display:none;height:100%;background-size:cover;background-position:center;position:absolute;width:100%;top:0;left:0;transition:opacity 1s ease-in-out}
.slide.active{display:block;z-index:1}
.slide-overlay{background:rgba(0,0,0,0.3);height:100%;display:flex;align-items:center;justify-content:center}
.slide-content{text-align:center;color:white;max-width:600px}
.slide-content .subtitle{font-style:italic;font-size:18px;margin-bottom:10px;letter-spacing:1px; color: #fff; }
.slide-content h1{font-size:48px;margin:0;font-weight:bold}
.slide-button{margin-top:20px;display:inline-block;padding:12px 25px;background-color:#1d64af;color:white;text-decoration:none;border-radius:4px;font-weight:bold;transition:background-color 0.3s}
.slide-button:hover{background-color:#155293}
.slide-nav{position:absolute;top:50%;transform:translateY(-50%);background:#1d64af;color:white;font-size:24px;padding:10px 15px;border:none;cursor:pointer;z-index:2}
.slide-nav.prev{left:30px}
.slide-nav.next{right:30px}
.slide-bg, .slide-video { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; z-index: 0; } .slide-overlay { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; height: 100%; background: rgba(0,0,0,0.3); /* tùy chỉnh overlay */ text-align: center; color: white; padding: 20px; }
 /*tour*/

.tour-packages{padding:50px 30px;}
.tour-packages h2{text-transform:uppercase;font-size:28px;margin-bottom:30px;border-left:5px solid #1d64af;padding-left:15px;color:#111}
.tour-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px}
.tour-card{background:white;border:1px solid #e0e0e0;overflow:hidden;transition:transform 0.3s ease;position:relative}
.tour-card:hover{transform:translateY(-5px);box-shadow:0 10px 20px rgba(0,0,0,0.1)}
.tour-thumb{position:relative}
.tour-thumb img{width:100%;display:block;height:200px;object-fit:cover}
.price-ribbon{position:absolute;top:10px;right:0;background-color:#1d64af;color:white;padding:6px 12px;font-weight:bold;font-size:14px}
.badge-live{position:absolute;top:10px;left:10px;background-color:red;color:white;padding:4px 10px;font-size:12px;border-radius:3px;font-weight:bold}
.tour-info{padding:20px}
.tour-info h3{font-size:18px;margin:0 0 10px}
.tour-info .duration{color:#555;font-size:14px;margin-bottom:5px}
.tour-info .itinerary{color:#666;font-size:13px;margin:15px 0px}
.btn-learn{background: #1d64af; color: white; padding: 10px 15px; display: flex ; text-decoration: none; font-size: 14px; border-radius: 3px; margin-top: 15px; text-align: center; justify-content: space-around; align-items: center; width: 50%; margin-right: auto; margin-left: auto;}
.btn-learn:hover{background:#155293}

        /*Blog*/
.blog-highlight{padding:60px 30px;text-align:center}
.section-header .subtitle{color:#6b28cf;font-weight:bold;margin-bottom:10px}
.section-header .title{font-size:32px;font-weight:800;margin-bottom:10px}
.section-header .desc{font-size:14px;color:#666;max-width:600px;margin:auto}
.blog-grid{display:flex;gap:30px;margin-top:40px;justify-content:center;flex-wrap:wrap}
.blog-item{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.08);transition:all 0.3s ease-in-out;text-align:left; width: 100%}
.blog-item img{width:100%;height:auto;object-fit:cover;display:block}
.blog-meta{position:relative;margin-top:-36px;margin-left:16px}
.blog-category{background:#6b28cf;color:white;padding:4px 10px;border-radius:6px;font-size:12px;display:inline-block}
.blog-content{padding:16px 20px}
.blog-content h3{font-size:18px;font-weight:bold;margin:10px 0;color:#111}
.blog-footer{display:flex;gap:20px;font-size:13px;color:#555}
.blog-big{flex:1 1 50%;width: 450px;}
.blog-column{flex: 1 1 40%; flex-wrap: nowrap; align-content: flex-start; align-items: flex-start; display: flex ; grid-template-columns: 1fr 1fr; gap: 28px; flex-direction: column;}
.blog-small{display:flex;gap:16px;padding:5px;align-items:center}
.blog-small img{width:140px;height:100px;border-radius:10px;object-fit:cover}
    /*category*/
.page-hero{position:relative;background-size:cover;background-position:center;background-repeat:no-repeat;height:300px;display:flex;align-items:center;justify-content:center;color:white}
.hero-overlay{width:100%;height:100%;background:rgba(0,0,0,0.4);/* Làm tối nền */
  display:flex;align-items:center;justify-content:center}
.hero-content{text-align:center;z-index:2}
.hero-content h1{font-size:48px;font-weight:700;margin-bottom:10px}
.breadcrumb{background:rgba(255,255,255,0.1);padding:6px 16px;border-radius:20px;font-size:14px;display:inline-block;border: 1px solid #fff; }
.breadcrumb a{color:#fff;text-decoration:none;font-weight:500}
.breadcrumb span{margin:0 5px;color:#ccc}
.destination-wrapper{padding:40px;}
.destination-grid{display:grid;grid-template-columns:280px 1fr;gap:30px}
.destination-sidebar{background:#f9f9f9;padding:20px;border-radius:12px}
.destination-sidebar h3 {margin-bottom: 15px;}
.subcategory-list{list-style:none;padding:0}
.subcategory-list li{margin-bottom:15px}
.subcategory-list label{font-size:15px;display:flex;justify-content:space-between;align-items:center}
.subcategory-list input[type="checkbox"]{margin-right:10px}
.destination-posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.tour-card{background:#fff;border-radius:16px;box-shadow:0 0 10px rgba(0,0,0,0.06);overflow:hidden;transition:0.3s}
.tour-thumb img{width:100%;height:180px;object-fit:cover}
.tour-info{padding:20px}
.tour-info h4{font-size:18px;margin-bottom:10px}
.tour-meta p{font-size:14px;margin-bottom:5px;color:#555}
.tour-price{margin-top:10px;font-size:18px;display:flex;align-items:center;gap:10px}
.tour-price .discount{background:#1ec58a;color:#fff;font-size:12px;padding:4px 8px;border-radius:6px}
.tour-price del{color:#999;font-size:14px}
.btn-book{display:block;margin-top:15px;padding:10px;background:#111;color:#fff;text-align:center;border-radius:8px;text-decoration:none;font-weight:bold}
.latest-posts{padding:60px 20px;background:#fff; }
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;max-width:1200px;margin:auto}
.post-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.06);transition:transform 0.3s ease}
.post-card:hover{transform:translateY(-5px)}
.post-card img{width:100%;height:200px;object-fit:cover;display:block}

.post-meta{font-size:14px;color:#777;margin-bottom:10px}
.post-content h3{font-size:18px;font-weight:bold;color:#111;margin-bottom:15px}
.post-link{color:#1ec58a;font-weight:600;text-decoration:none;font-size:14px}
.post-link:hover{text-decoration:underline}
        /*Single*/
.single-post .container{display:flex;gap:40px;max-width:1200px;margin:auto;padding:60px 20px;}
.post-content{flex:3}
.sidebar{flex:1}
.post-meta{font-size:14px;color:#777;margin-bottom:10px}
.post-title{font-size:32px;font-weight:bold;margin-bottom:20px}
.post-content p{font-size:14px;color:#333;line-height:1.8;margin-bottom:20px}
.post-content li {font-size: 18px; margin: 15px 0; line-height: 29px; padding-left: 8px; list-style: none; color: #333}.
.post-content .wp-block-list li:before {content: ""; display: inline-block; position: relative; top: -2px; flex: 0 0 5px; width: 6px; height: 6px; margin: 0 10px 0 0; border-radius: 3px; background-color: #0F0F0F}
.post-content h2,h3, h4 {margin: 15px 0px; color: #333}
blockquote{background:#f5f5f5;padding:20px 30px;border-left:5px solid #28b482;border-radius:10px;margin-bottom:30px;font-style:italic;color:#444}
.related-posts{padding:20px; background: #fff; margin: auto; border: 1px solid #ebebeb;}
.related-posts h2{font-size:24px;font-weight:700;text-align:center;margin-bottom:30px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.related-card{background:#fff;border:1px solid #eee;border-radius:10px;padding:16px;box-shadow:0 3px 6px rgba(0,0,0,0.06);transition:0.3s ease;display:flex;flex-direction:column;justify-content:space-between}
.related-card img{width:100%;height:160px;object-fit:cover;border-radius:6px;margin-bottom:12px}
.related-card h3{font-size:17px;font-weight:bold;margin-bottom:8px;color:#0052cc}
.related-card h3 a{text-decoration:none;color:inherit}
.related-desc{font-size:14px;color:#444;flex-grow:1;margin-bottom:16px}
.read-more{background:none;color:#0052cc;font-weight:bold;border:1px solid #0052cc;padding:6px 14px;border-radius:5px;text-decoration:none;transition:0.3s;text-align: center;}
.read-more:hover{background:#0052cc;color:#fff}
.sidebar .widget{margin-bottom: 30px; background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 16px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06); transition: 0.3s ease; display: flex ; flex-direction: column; justify-content: space-between;}
.sidebar h4{font-size:18px;margin-bottom:15px}
.search-box{background:#f8f8f8;padding:20px;border-radius:12px;margin-bottom:30px}
.search-box h4{font-size:18px;font-weight:600;margin-bottom:15px}
.search-form{display:flex;gap:10px}
.search-form input[type="text"]{flex:1;padding:10px 14px;border:none;border-radius:6px;font-size:14px;background:#fff;outline:none}
.search-form button{padding:10px 14px;background:#28b482;color:#fff;border:none;border-radius:0 6px 6px 0px;font-size:16px;cursor:pointer;transition:0.2s}
.search-form button:hover{background:#1da373}
.widget.categories{background:#f8f8f8;padding:20px;border-radius:12px;margin-bottom:30px}
.widget.categories h4{font-size:18px;font-weight:600;margin-bottom:15px}
.widget.categories ul{list-style:none;padding:0;margin:0}
.widget.categories li{margin-bottom:10px;background:#fff;padding:10px 14px;border-radius:8px;display:flex;justify-content:space-between;font-size:14px;font-weight:500;transition:0.3s}
.widget.categories li:hover{background:#28b482;color:#fff}
.widget.categories li a{color:inherit;text-decoration:none;display:flex;justify-content:space-between;width:100%}
.widget.categories li span{background:#eee;padding:2px 8px;border-radius:8px;font-size:12px}
.search-results {margin-bottom: 30px}
.search-results h1 {font-size: 20px; text-transform: uppercase; margin: 20px 0;}
/*Contact*/

.contact-form-grid{display:flex;flex-wrap:wrap;gap:30px; margin: 30px 0}
.form-left{flex:1;min-width:280px;}
.form-left h1{font-size:28px;font-weight:bold;margin-bottom:10px}
.form-left p{margin-bottom:1em;color:#333}
.contact-info i{margin-right:10px;color:#111}
.social-icons a{display:inline-block;margin-right:10px;font-size:18px;color:#111}
.form-right{flex: 1; min-width: 280px; font-size: 15px;}
.form-right label{display:block;margin-bottom:-10px;color:#222;font-weight:500;font-size: 15px;}
input[type="text"],input[type="email"],input[type="tel"],textarea{width:100%;padding:10px;background-color:#f9f9fb;border:1px solid #ccc;font-family:'Poppins',sans-serif;font-size:14px;border-radius:4px;box-sizing: border-box;}
textarea{min-height:100px}
input[type="submit"]{background-color:#0c0c16;color:#fff;border:none;padding:15px 30px;text-transform:uppercase;cursor:pointer;font-weight:bold;font-size:14px;border-radius:0}
/*Footer*/
.site-footer{background-color:#222222;color:#fff;padding:60px 30px 30px;position:relative;}
.footer_content {padding: 0 30px;}
.site-footer p {color: #fff}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:30px; padding-bottom: 15px; }
.footer-logo{font-size:24px;font-weight:bold;margin-bottom:10px; color: #fff}
.footer-logo span{display:block;font-size:14px;font-weight:normal;color:#ccc}
.subscribe-form{display:flex;margin:20px 0}
.subscribe-form input{flex:1;padding:10px;border:none;border-radius:5px 0 0 5px;font-size:12px}
.subscribe-form button{background:#7d2ae8;color:white;border:none;padding:0 20px;font-size:16px;border-radius:0 5px 5px 0;cursor:pointer}
.social-icons{margin-top:15px}
.social-icons a{color:#fff;font-size:16px;margin-right:10px;background:rgba(255,255,255,0.1);display:inline-block;width:36px;height:36px;line-height:40px;text-align:center;border-radius:50%;transition:0.3s}
.social-icons a:hover{background:#7d2ae8}
.footer-col h4{margin-bottom:15px;font-size:16px;font-weight:600; color: #fff}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col ul li{margin-bottom:10px;font-size:14px}
.footer-col ul li i{margin-right:8px}
.footer-col ul li a{color:#ccc;text-decoration:none}
.footer-col ul li a:hover{color:#fff}
.footer-col iframe {border: 0; width: 100%; height: auto;}
.footer-bottom{text-align:center;padding-top:30px;font-size:13px;color:#bbb;border-top:1px solid rgba(255,255,255,0.1)}
.back-to-top{position:fixed;right:20px;bottom:20px;background:#7d2ae8;color:white;border:none;border-radius:50%;width:42px;height:42px;font-size:20px;cursor:pointer;display:none;z-index:1000}