* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Segoe UI', Arial, Helvetica, sans-serif; line-height:1.6; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }

.site-header { padding:18px 40px; }
.header-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.header-logo { font-size:24px; font-weight:800; }
.header-nav { display:flex; gap:28px; flex-wrap:wrap; }
.header-nav .nav-link { font-size:15px; font-weight:600; }

main { max-width:1200px; margin:0 auto; padding:40px 40px 0; }

.section-block { margin-bottom:50px; }
.section-title { font-size:15px; font-weight:800; letter-spacing:1px; padding-bottom:12px; margin-bottom:24px; }

.popular-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.popular-card img { width:100%; height:200px; object-fit:cover; border-radius:6px; margin-bottom:12px; }
.popular-title { display:block; font-size:17px; font-weight:700; line-height:1.35; }

.section-block-triple { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-bottom:50px; }
.triple-title { font-size:15px; font-weight:800; letter-spacing:1px; padding-bottom:10px; margin-bottom:18px; }
.triple-list { display:flex; flex-direction:column; gap:18px; }
.triple-item { display:flex; gap:12px; align-items:flex-start; }
.triple-item img { width:64px; height:64px; object-fit:cover; border-radius:5px; flex-shrink:0; }
.triple-item > div { display:flex; flex-direction:column; gap:6px; }
.triple-item-title { font-size:14px; font-weight:700; line-height:1.35; }
.triple-date { font-size:12px; }

.tips-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.tips-card { position:relative; border-radius:8px; overflow:hidden; height:280px; }
.tips-card img { width:100%; height:100%; object-fit:cover; }
.tips-title { position:absolute; left:0; right:0; bottom:0; padding:24px; font-size:19px; font-weight:700; line-height:1.35; }

.site-footer { margin-top:60px; padding:50px 40px 0; }
.footer-inner { max-width:1200px; margin:0 auto; padding-bottom:30px; }
.footer-nav-inner { display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:40px; }
.footer-col h3 { font-size:14px; font-weight:800; letter-spacing:1px; margin-bottom:16px; }
.footer-col p { font-size:14px; line-height:1.6; }
.footer-col a.nav-link { display:block; font-size:14px; padding:5px 0; }
.footer-bottom { max-width:1200px; margin:0 auto; padding:20px 0; font-size:13px; text-align:center; }

.page-hero { padding:60px 40px 40px; text-align:center; }
.page-hero h1 { font-size:34px; font-weight:800; margin-bottom:10px; }
.page-hero p { font-size:16px; }

.breadcrumb { max-width:1200px; margin:20px auto 0; padding:0 40px; font-size:14px; }
.breadcrumb-sep { margin:0 6px; }

.content-wrap { max-width:900px; margin:0 auto; padding:50px 40px 80px; }
.content-wrap h2 { font-size:26px; font-weight:800; margin:34px 0 16px; }
.content-wrap h2:first-child { margin-top:0; }
.content-wrap p { font-size:16px; margin-bottom:18px; }
.content-wrap ul { margin:0 0 18px 22px; font-size:16px; }
.content-wrap li { margin-bottom:8px; }

.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; max-width:1200px; margin:0 auto; padding:0 40px 70px; }
.card { border-radius:8px; padding:26px; }
.card h3 { font-size:19px; margin-bottom:10px; font-weight:800; }
.card p { font-size:15px; margin-bottom:16px; }

.contact-form { max-width:600px; margin:0 auto; padding:0 40px 80px; }
.form-group { margin-bottom:20px; }
.form-label { display:block; font-size:14px; font-weight:700; margin-bottom:6px; }
.form-input, .form-textarea, .form-select { width:100%; padding:12px 14px; border-radius:6px; font-size:15px; font-family:inherit; }
.form-textarea { resize:vertical; min-height:120px; }

.article-list-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; max-width:1200px; margin:0 auto; padding:40px 40px 80px; }
.article-card { border-radius:8px; overflow:hidden; }
.article-thumb { width:100%; height:180px; object-fit:cover; }
.article-card .article-body { padding:18px; }
.article-meta { font-size:13px; margin-bottom:8px; }
.article-cat { font-weight:700; }
.article-date { margin-left:8px; }
.article-card .article-h { font-size:18px; margin-bottom:10px; font-weight:800; }
.article-excerpt { font-size:14px; margin-bottom:14px; }
.article-link { font-size:14px; font-weight:700; }

@media (max-width:900px) {
  main { padding:30px 20px 0; }
  .popular-grid { grid-template-columns:1fr; }
  .section-block-triple { grid-template-columns:1fr; gap:30px; }
  .tips-grid { grid-template-columns:1fr; }
  .footer-nav-inner { grid-template-columns:1fr; gap:28px; }
  .card-grid { grid-template-columns:1fr; padding:0 20px 60px; }
  .article-list-grid { grid-template-columns:1fr; padding:30px 20px 60px; }
  .site-footer { padding:40px 20px 0; }
  .breadcrumb { padding:0 20px; }
}