@charset "utf-8";
@import url('iconfont.css');
@import url("message.css");

/* === CSS Variables === */
:root {
  --primary: #1a5cb5;
  --primary-dark: #0d3d7a;
  --primary-light: #2980d9;
  --dark: #1a1a2e;
  --text: #333333;
  --text-light: #666666;
  --text-muted: #999999;
  --bg-light: #f5f7fa;
  --bg-white: #ffffff;
  --border: #e8eaed;
  --shadow: 0 2px 12px rgba(0,0,0,.08);
  --shadow-hover: 0 8px 25px rgba(26,92,181,.15);
  --radius: 6px;
  --max-width: 1400px;
  --font: 'Segoe UI','Roboto','Helvetica Neue',Arial,sans-serif;
}

/* === Reset === */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { overflow-x:hidden; scroll-behavior:smooth; }
body { font-family:var(--font); font-size:15px; color:var(--text); line-height:1.6; background:var(--bg-white); }
h1,h2,h3,h4,h5,h6 { font-weight:600; line-height:1.3; }
img { max-width:100%; height:auto; border:none; display:block; }
ul,ol,li { list-style:none; }
a { text-decoration:none; color:var(--text); transition:color .3s; }
a:hover { color:var(--primary); }
button { cursor:pointer; border:none; outline:none; }

/* === Utility === */
.section-inner { max-width:var(--max-width); margin:0 auto; padding:0 30px; }
.section-header { text-align:center; margin-bottom:50px; }
.section-header h2 { font-size:32px; color:var(--dark); text-transform:uppercase; letter-spacing:2px; }
.section-header .header-line { display:block; width:60px; height:3px; background:var(--primary); margin:12px auto 0; }

/* === Header === */
.site-header { width:100%; background:#fff; border-bottom:1px solid #eee; }
.header-wrap { max-width:1400px; margin:0 auto; padding:0 30px; display:flex; align-items:center; height:90px; }
.header-logo { margin-right:60px; }
.header-logo a { display:block; }
.header-logo img { height:80px; width:auto; display:block; }
.nav-list { display:flex; align-items:center; list-style:none; margin:0; padding:0; }
.nav-list > li { position:relative; margin-right:5px; }
.nav-list > li > a { display:block; line-height:90px; padding:0 20px; font-size:14px; font-weight:600; text-transform:uppercase; color:#333; text-decoration:none; border-bottom:3px solid transparent; }
.nav-list > li > a:hover,
.nav-list > li > a.active { color:#1a5cb5; border-bottom-color:#1a5cb5; }
.nav-list > li .sub-nav { display:none; position:absolute; top:90px; left:0; min-width:200px; background:#fff; box-shadow:0 4px 20px rgba(0,0,0,.1); border-radius:4px; padding:10px 0; z-index:999; list-style:none; margin:0; }
.nav-list > li.open .sub-nav { display:block; }
.nav-list > li .sub-nav li { margin:0; }
.nav-list > li .sub-nav li a { display:block; padding:10px 25px; font-size:14px; color:#555; text-decoration:none; white-space:nowrap; }
.nav-list > li .sub-nav li a:hover { color:#1a5cb5; background:#f5f7fa; }
.nav-toggle { display:none; }
/* === Banner === */
.banner-section { width:100%; }
.banner-section .swiper-container { width:100%; }
.banner-section .swiper-slide img { width:100%; display:block; }
.banner-section .swiper-button-prev,
.banner-section .swiper-button-next { color:var(--bg-white); }
.banner-section .swiper-button-prev::after,
.banner-section .swiper-button-next::after { content:""; }
.banner-section .swiper-button-prev i,
.banner-section .swiper-button-next i { font-size:36px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.3); }
.banner-section .swiper-pagination-bullet { background:#fff; opacity:.6; }
.banner-section .swiper-pagination-bullet-active { background:var(--primary); opacity:1; }

/* Page Banner for inner pages */
.page-banner { position:relative; overflow:hidden; height:250px; }
.page-banner img { width:100%; display:block; object-fit:cover; }
.banner-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(26,26,46,.5); display:flex; align-items:center; justify-content:center; }
.banner-overlay h1 { color:#fff; font-size:36px; text-transform:uppercase; letter-spacing:3px; }
/* === Home Page === */
.home-container { width:100%; }

/* Company Profile */
.company-profile { padding:80px 0; background:var(--bg-white); }
.profile-content { display:flex; gap:50px; align-items:center; }
.profile-img { flex:1; border-radius:var(--radius); overflow:hidden; }
.profile-img img { width:100%; display:block; border-radius:var(--radius); }
.profile-text { flex:1; }
.profile-text h3 { font-size:26px; color:var(--dark); margin-bottom:20px; }
.profile-text p { color:var(--text-light); line-height:1.8; margin-bottom:25px; }
.btn-more { display:inline-block; padding:10px 30px; background:var(--primary); color:#fff; border-radius:var(--radius); font-weight:600; transition:all .3s; }
.btn-more:hover { background:var(--primary-dark); color:#fff; transform:translateY(-2px); }

/* Products Section */
.home-products { padding:80px 0; background:var(--bg-light); }
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:25px; }
.product-card { background:var(--bg-white); border-radius:var(--radius); overflow:hidden; transition:all .3s; border:1px solid var(--border); }
.product-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-hover); }
.product-card a { display:block; }
.product-img { position:relative; padding-top:100%; overflow:hidden; background:#fafafa; }
.product-img img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain; padding:15px; transition:transform .4s; }
.product-card:hover .product-img img { transform:scale(1.05); }
.product-info { padding:15px; text-align:center; }
.product-info h4 { font-size:14px; color:var(--text); margin-bottom:12px; line-height:1.4; height:40px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.btn-reservation { display:inline-block; padding:8px 20px; background:var(--primary); color:#fff; font-size:13px; font-weight:600; border-radius:20px; transition:all .3s; }
.btn-reservation:hover { background:var(--primary-dark); }
.product-card:hover .btn-reservation { background:var(--primary-dark); }
.view-all { text-align:center; margin-top:40px; }
.btn-viewall { display:inline-block; padding:12px 35px; border:2px solid var(--primary); color:var(--primary); font-weight:600; border-radius:var(--radius); transition:all .3s; }
.btn-viewall:hover { background:var(--primary); color:#fff; }
/* News Section */
.home-news { padding:80px 0; background:var(--bg-white); }
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.news-card { background:var(--bg-white); border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); transition:all .3s; }
.news-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.news-card a { display:block; }
.news-img { height:200px; overflow:hidden; }
.news-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.news-card:hover .news-img img { transform:scale(1.05); }
.news-info { padding:20px; }
.news-info h4 { font-size:16px; color:var(--dark); margin-bottom:10px; line-height:1.4; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.news-desc { font-size:14px; color:var(--text-light); line-height:1.6; margin-bottom:10px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.news-date { font-size:13px; color:var(--text-muted); }

/* Partners Section */
.home-partners { padding:80px 0; background:var(--bg-light); }
.partner-list { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.partner-list li { width:150px; height:100px; display:flex; align-items:center; justify-content:center; background:var(--bg-white); border:1px solid var(--border); border-radius:var(--radius); padding:10px; transition:all .3s; }
.partner-list li:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.partner-list li img { max-width:100%; max-height:100%; object-fit:contain; }

/* === Products Page === */
.products-page { display:flex; gap:30px; max-width:var(--max-width); margin:0 auto; padding:40px 30px; }
/* Product Sidebar */
.product-sidebar { width:260px; flex-shrink:0; }
.product-sidebar h3 { font-size:18px; color:var(--dark); padding-bottom:12px; border-bottom:2px solid var(--primary); margin-bottom:15px; }
.category-list .cat-item > a { display:block; padding:10px 15px; font-size:14px; color:var(--text); border-radius:var(--radius); transition:all .3s; }
.category-list .cat-item > a:hover,
.category-list .cat-item > a.active { background:var(--primary); color:#fff; }
.sub-cat { padding-left:15px; }
.sub-cat li a { display:block; padding:6px 15px; font-size:13px; color:var(--text-light); border-radius:var(--radius); }
.sub-cat li a:hover { color:var(--primary); background:var(--bg-light); }

/* Product Main */
.product-main { flex:1; }
.product-main .product-grid { grid-template-columns:repeat(3,1fr); }

/* Pagination */
.pagination { margin-top:40px; text-align:center; }
.pagination ul { display:flex; justify-content:center; gap:5px; }
.pagination a,.pagination span { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; border:1px solid var(--border); border-radius:var(--radius); font-size:14px; color:var(--text); transition:all .3s; }
.pagination a:hover,.pagination .ctxt { background:var(--primary); color:#fff; border-color:var(--primary); }
.mypages ul { display:flex; justify-content:center; gap:5px; }
.mypages a,.mypages span { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; border:1px solid var(--border); border-radius:var(--radius); font-size:14px; color:var(--text); transition:all .3s; }
.mypages a:hover,.mypages .ctxt { background:var(--primary); color:#fff; border-color:var(--primary); }

/* === Footer === */
.site-footer { background:var(--dark); color:#ccc; margin-top:0; }
.footer-main { padding:60px 0 40px; }
.footer-inner { max-width:var(--max-width); margin:0 auto; padding:0 30px; display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:40px; }
.footer-col h4 { color:#fff; font-size:16px; margin-bottom:20px; padding-bottom:10px; border-bottom:2px solid var(--primary); display:inline-block; }
.footer-about .footer-logo img { max-height:70px; width:auto; margin-bottom:20px; }
.footer-desc { font-size:14px; line-height:1.7; color:#aaa; margin-bottom:20px; }
.footer-social { display:flex; gap:10px; }
.footer-social a { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; border:1px solid #555; color:#aaa; font-size:16px; transition:all .3s; }
.footer-social a:hover { background:var(--primary); border-color:var(--primary); color:#fff; }
.footer-links ul li,.footer-products ul li { margin-bottom:8px; }
.footer-links ul li a,.footer-products ul li a { color:#aaa; font-size:14px; transition:color .3s; }
.footer-links ul li a:hover,.footer-products ul li a:hover { color:var(--primary); }
.footer-contact ul li { display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; font-size:14px; color:#aaa; }
.footer-contact ul li i { color:var(--primary); font-size:16px; margin-top:2px; }
.footer-contact ul li a { color:#aaa; }
.footer-contact ul li a:hover { color:var(--primary); }
.footer-bottom { border-top:1px solid #333; padding:20px 0; text-align:center; }
.footer-bottom p { font-size:13px; color:#888; }
.footer-bottom a { color:#888; margin-left:10px; }
.footer-bottom a:hover { color:var(--primary); }
.back-to-top { position:fixed; bottom:30px; right:30px; width:42px; height:42px; background:var(--primary); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; visibility:hidden; transition:all .3s; box-shadow:0 4px 12px rgba(26,92,181,.3); z-index:999; }
.back-to-top.show { opacity:1; visibility:visible; }
.back-to-top:hover { background:var(--primary-dark); transform:translateY(-3px); }
/* === Common Pages === */
.common-container { margin-top:0; }
.breadcrumbs { max-width:var(--max-width); margin:0 auto; padding:15px 30px; font-size:13px; color:var(--text-muted); }
.breadcrumbs a { color:var(--text-light); }
.breadcrumbs a:hover { color:var(--primary); }
.breadcrumbs span { margin:0 5px; }
.breadcrumbs h1,.breadcrumbs h1 a,.breadcrumbs h2,.breadcrumbs h2 a { display:inline; font-size:13px; font-weight:normal; color:var(--primary); }

/* Product Detail */
.detail-container .pro-detail-content { max-width:var(--max-width); margin:0 auto; padding:40px 30px; }
.detail-container .pro-review { display:flex; gap:40px; }
.detail-container .pro-preview-left { flex:1; }
.detail-container .pro-preview-right { flex:1; }
.detail-container .pro-preview-right .pro-name { font-size:24px; color:var(--dark); margin-bottom:20px; }
.detail-container .pro-preview-right .product-content-price { font-size:14px; color:var(--text-light); margin-bottom:8px; }
.detail-container .pro-preview-right article { color:var(--text-light); line-height:1.8; margin:20px 0; }
.detail-container .btn-list { display:flex; gap:15px; margin-top:25px; }
.detail-container .btn-list .btn { padding:12px 30px; background:var(--primary); color:#fff; border-radius:var(--radius); cursor:pointer; transition:all .3s; }
.detail-container .btn-list .btn:hover { background:var(--primary-dark); }
.detail-container .btn-list .btn span,.detail-container .btn-list .pdown2 a span { color:#fff; font-weight:600; }
.detail-container .btn-list .pdown2 a { display:inline-block; padding:12px 30px; border:2px solid var(--primary); color:var(--primary); border-radius:var(--radius); transition:all .3s; }
.detail-container .btn-list .pdown2 a span { color:var(--primary); }
.detail-container .btn-list .pdown2 a:hover { background:var(--primary); }
.detail-container .btn-list .pdown2 a:hover span { color:#fff; }
.detail-container .pro-detail-title { font-size:20px; color:var(--dark); padding:20px 0; margin-top:40px; border-bottom:2px solid var(--primary); }
.detail-container .pro-intro article { padding:30px 0; line-height:1.8; color:var(--text-light); }
.detail-container .pro-intro article img { max-width:100%; border-radius:var(--radius); margin:15px 0; }
.detail-container .pro-page-switch { display:flex; justify-content:space-between; padding:20px 0; border-top:1px solid var(--border); margin-top:30px; }
.detail-container .pro-page-switch .page-prev,.detail-container .pro-page-switch .page-next { max-width:45%; }
.detail-container .pro-page-switch .page-btn { font-size:13px; color:var(--primary); font-weight:600; margin-bottom:5px; }
.detail-container .pro-page-switch a { font-size:14px; color:var(--text-light); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; max-width:300px; }
.detail-container .pro-page-switch a:hover { color:var(--primary); }

/* Inquiry Form */
.send-inquiry { margin-top:50px; padding:40px; background:var(--bg-light); border-radius:var(--radius); }
.inquiry-title { font-size:22px; color:var(--dark); margin-bottom:25px; font-weight:600; }
.inquiry-form input,.inquiry-form textarea { width:100%; padding:12px 16px; border:1px solid var(--border); border-radius:var(--radius); font-size:14px; margin-bottom:15px; transition:border .3s; font-family:var(--font); }
.inquiry-form input:focus,.inquiry-form textarea:focus { border-color:var(--primary); outline:none; }
.inquiry-form textarea { min-height:120px; resize:vertical; }
.send-btn { display:inline-block; padding:12px 40px; background:var(--primary); color:#fff; border-radius:var(--radius); font-size:15px; font-weight:600; transition:all .3s; margin-top:10px; }
.send-btn:hover { background:var(--primary-dark); }

/* Preview images */
.preview-container { position:relative; }
.preview-container .small-box { width:100%; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; align-items:center; justify-content:center; padding:20px; background:#fafafa; }
.preview-container .small-box img { max-width:100%; max-height:400px; object-fit:contain; }
.preview-container .thumbnail-box { margin-top:15px; position:relative; }
.preview-container .thumbnail-box .list ul { display:flex; gap:10px; }
.preview-container .thumbnail-box .list li { width:80px; height:80px; border:1px solid var(--border); border-radius:4px; overflow:hidden; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:5px; }
.preview-container .thumbnail-box .list li img { max-width:100%; max-height:100%; object-fit:contain; }
.preview-container .big-box { display:none; }

/* About page */
.abouts-content { max-width:var(--max-width); margin:0 auto; padding:40px 30px 60px; }
.abouts-content .abouts-title { font-size:24px; color:var(--dark); padding-bottom:15px; border-bottom:2px solid var(--primary); margin-bottom:25px; }
.abouts-content article { color:var(--text-light); line-height:1.8; }

/* News list */
.news-list-page { max-width:var(--max-width); margin:0 auto; padding:40px 30px; }

/* SM mask */
.sm-mask { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.6); z-index:99; }
/* Article Detail */
.news-detail-content { max-width:var(--max-width); margin:0 auto; padding:40px 30px 60px; }
.article-title { font-size:28px; color:var(--dark); margin-bottom:15px; }
.article-meta { display:flex; gap:20px; margin-bottom:30px; font-size:14px; color:var(--text-muted); }
.article-body { line-height:1.9; color:var(--text-light); }
.article-body img { max-width:100%; border-radius:var(--radius); margin:15px 0; }
.article-body p { margin-bottom:15px; }
.article-nav { display:flex; justify-content:space-between; padding:25px 0; border-top:1px solid var(--border); margin-top:40px; }
.article-nav .nav-prev,.article-nav .nav-next { max-width:45%; }
.article-nav span { font-size:13px; color:var(--primary); font-weight:600; }
.article-nav a { font-size:14px; color:var(--text-light); display:block; margin-top:5px; }
.article-nav a:hover { color:var(--primary); }

/* Contact Page */
.contact-page { max-width:var(--max-width); margin:0 auto; padding:50px 30px; display:flex; gap:50px; }
.contact-info-section { flex:1; }
.contact-info-section h2 { font-size:24px; color:var(--dark); margin-bottom:30px; }
.contact-list li { display:flex; align-items:flex-start; gap:15px; margin-bottom:20px; padding:15px; background:var(--bg-light); border-radius:var(--radius); }
.contact-list li i { font-size:22px; color:var(--primary); margin-top:3px; }
.contact-list li strong { display:block; font-size:14px; color:var(--dark); margin-bottom:4px; }
.contact-list li p { font-size:14px; color:var(--text-light); line-height:1.5; }
.contact-form-section { flex:1; background:var(--bg-light); padding:40px; border-radius:var(--radius); }

/* News List Page */
.news-list-page { max-width:var(--max-width); margin:0 auto; padding:40px 30px 60px; }
.news-list-page .news-grid { grid-template-columns:repeat(3,1fr); }

/* === Responsive === */
@media (max-width:1200px) {
  .footer-inner { grid-template-columns:1fr 1fr; }
  .product-grid { grid-template-columns:repeat(3,1fr); }
  .product-main .product-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:992px) {
  .header-wrap { height:60px; }
  .header-logo { margin-right:20px; }
  .nav-list { display:none; position:absolute; top:60px; left:0; width:100%; background:#fff; box-shadow:0 4px 15px rgba(0,0,0,.1); padding:15px; flex-direction:column; z-index:999; }
  .nav-list.active { display:flex; }
  .nav-list > li > a { line-height:44px; padding:0 15px; }
  .nav-list > li .sub-nav { position:static; box-shadow:none; padding-left:20px; display:block; }
  .nav-toggle { display:block; position:absolute; right:30px; top:20px; width:28px; height:20px; cursor:pointer; }
  .nav-toggle span { display:block; width:100%; height:2px; background:#333; position:absolute; left:0; }
  .nav-toggle span:nth-child(1) { top:0; }
  .nav-toggle span:nth-child(2) { top:9px; }
  .nav-toggle span:nth-child(3) { top:18px; }
  .profile-content { flex-direction:column; }
  .product-grid { grid-template-columns:repeat(2,1fr); }
  .news-grid { grid-template-columns:repeat(2,1fr); }
  .products-page { flex-direction:column; }
  .product-sidebar { width:100%; }
  .category-list { display:flex; flex-wrap:wrap; gap:5px; }
  .category-list .cat-item > a { padding:6px 12px; font-size:13px; border:1px solid var(--border); border-radius:20px; }
  .detail-container .pro-review { flex-direction:column; }
  .footer-inner { grid-template-columns:1fr; gap:30px; }
}

@media (max-width:576px) {
  .section-header h2 { font-size:24px; }
  .product-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .product-info h4 { font-size:12px; height:34px; }
  .btn-reservation { font-size:11px; padding:6px 14px; }
  .news-grid { grid-template-columns:1fr; }
  .profile-text h3 { font-size:20px; }
  .partner-list li { width:100px; height:70px; }
  .header-search { display:none; }
  .detail-container .pro-preview-right .pro-name { font-size:20px; }
  .footer-inner { padding:0 20px; }
}