/* ============================================================
   湖南少年警训夏令营 - 军绿色主题主样式表（布局零改动）
   主军旅色：#3A4F37  深军绿：#283626  浅军绿：#526B4E
   军绿浅底：#E8ECE6  强调红：#c0392b  警示橙：#f39c12
   新增：低饱和迷彩纹理 + 按钮呼吸脉冲 + 全局标题间距优化
   ============================================================ */

/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; line-height: 1.6; color: #333; background: #fff; }
img { max-width: 100%; height: auto; display: block; }
a { color: #2d4059; text-decoration: none; transition: color 0.2s; }
a:hover { color: #3A4F37; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { line-height: 1.3; font-weight: 700; }
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

/* Container */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 6px; font-size: 15px; font-weight: 600; border: 2px solid transparent; cursor: pointer; transition: all 0.2s; text-align: center; }
.btn-primary { 
    background: #3A4F37; 
    color: #fff; 
    border-color: #3A4F37;
    position: relative;
    overflow: hidden;
}
/* 主按钮脉冲呼吸动画 */
.btn-primary::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.6);
    opacity: 0;
    animation: btnPulse 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes btnPulse {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.08); opacity: 0; }
}
.btn-primary:hover { background: #526B4E; color: #fff; border-color: #526B4E; }
.btn-primary:hover::after { animation-play-state: paused; }

.btn-outline { background: transparent; color: #3A4F37; border-color: #3A4F37; }
.btn-outline:hover { background: #3A4F37; color: #fff; }
.btn-lg { padding: 14px 32px; font-size: 17px; }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-block { display: flex; width: 100%; justify-content: center; }
.btn-text { background: none; border: none; color: #3A4F37; padding: 0; font-weight: 600; }
.btn-text:hover { color: #526B4E; }
.btn-success { background: #526B4E; color: #fff; border-color: #526B4E; }
.btn-warning { background: #f39c12; color: #fff; border-color: #f39c12; }
.btn-danger { background: #c0392b; color: #fff; border-color: #c0392b; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; box-shadow: 0 2px 12px rgba(58,79,55,0.08); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: #1a2332; }
.logo img { width: 48px; height: 48px; }
.main-nav .nav-menu { display: flex; gap: 4px; }
.main-nav .nav-menu a { padding: 8px 14px; border-radius: 6px; font-size: 15px; font-weight: 500; color: #333; transition: all 0.2s; }
.main-nav .nav-menu a:hover, .main-nav .nav-menu a.active { background: #E8ECE6; color: #3A4F37; }
.header-phone { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #3A4F37; font-size: 16px; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #333; margin: 5px 0; transition: 0.3s; }

/* Hero */
.hero { position: relative; height: 80vh; min-height: 500px; display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(26,35,50,0.85) 0%, rgba(58,79,55,0.5) 100%); }
.hero-content { position: relative; z-index: 2; color: #fff; }
.hero-content h1 { font-size: 3.5rem; margin-bottom: 16px; text-shadow: 0 2px 20px rgba(0,0,0,0.3); }
.hero-subtitle { font-size: 1.3rem; margin-bottom: 32px; opacity: 0.9; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero .btn-outline { color: #fff; border-color: #fff; }
.hero .btn-outline:hover { background: #fff; color: #3A4F37; }

/* Inner Banner */
.inner-banner { position: relative; height: 320px; display: flex; align-items: center; overflow: hidden; }
.inner-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inner-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(58,79,55,0.75), rgba(26,35,50,0.5)); }
.inner-banner .container { position: relative; z-index: 2; color: #fff; }
.inner-banner h1 { font-size: 2.5rem; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }

/* Breadcrumb */
.breadcrumb { 
    background: #E8ECE6; 
    padding: 12px 0; 
    font-size: 14px; 
    color: #666;
    position: relative;
}
.breadcrumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(58, 79, 55, 0.08) 0 8%, transparent 9%),
      radial-gradient(circle at 80% 20%, rgba(58, 79, 55, 0.08) 0 10%, transparent 11%);
    background-size: 120px 120px;
    opacity: 0.45;
    pointer-events: none;
}
.breadcrumb a { color: #666; }
.breadcrumb a:hover { color: #3A4F37; }
.breadcrumb span { margin: 0 8px; }

/* Sections */
.content-section { padding: 60px 0; }
/* 首页各区块上下间距（修复区块标题与上一区块图片过近问题） */
.about-brief, .courses-section, .camp-section, .instructor-section, .cases-section, .faq-section { padding: 64px 0; position: relative; }
.courses-section, .cases-section { background: #E8ECE6; }
.bg-light { background: #E8ECE6; position: relative; }

/* 浅色区块统一迷彩纹理 */
.courses-section::before,
.cases-section::before,
.bg-light::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(58, 79, 55, 0.08) 0 8%, transparent 9%),
      radial-gradient(circle at 80% 20%, rgba(58, 79, 55, 0.08) 0 10%, transparent 11%),
      radial-gradient(circle at 40% 80%, rgba(58, 79, 55, 0.08) 0 9%, transparent 10%),
      radial-gradient(circle at 70% 70%, rgba(58, 79, 55, 0.08) 0 7%, transparent 8%);
    background-size: 120px 120px;
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
}

.section-header { text-align: center; margin-bottom: 48px; padding-top: 10px; }
.section-header h2 { font-size: 2rem; margin-bottom: 12px; color: #1a2332; }
.section-desc { color: #666; font-size: 1.1rem; }
.section-action { text-align: center; margin-top: 40px; }

/* Stats */
.stats-section { 
    background: #283626; 
    padding: 48px 0; 
    position: relative;
}
.stats-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(255,255,255,0.05) 0 10%, transparent 11%),
      radial-gradient(circle at 85% 15%, rgba(255,255,255,0.05) 0 12%, transparent 13%),
      radial-gradient(circle at 35% 75%, rgba(255,255,255,0.05) 0 10%, transparent 11%),
      radial-gradient(circle at 75% 80%, rgba(255,255,255,0.05) 0 8%, transparent 9%);
    background-size: 150px 150px;
    opacity: 0.3;
    pointer-events: none;
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; position: relative; z-index: 1; }
.stat-number { display: block; font-size: 2.5rem; font-weight: 800; color: #fff; }
.stat-label { color: rgba(255,255,255,0.85); font-size: 0.95rem; margin-top: 4px; }

/* About Brief */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.about-text p { margin-bottom: 16px; color: #555; }
.about-text .btn-text { margin-top: 16px; }
.about-image img { border-radius: 12px; box-shadow: 0 8px 30px rgba(58,79,55,0.15); }

/* Courses Grid */
.courses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.courses-grid-full { grid-template-columns: 1fr; }
.course-card { 
    background: #fff; 
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 4px 20px rgba(58,79,55,0.08); 
    transition: transform 0.2s, box-shadow 0.2s;
    border-top: 4px solid #3A4F37;
    position: relative;
    z-index: 1;
}
.course-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(58,79,55,0.15); }
.course-card-img { aspect-ratio: 1; overflow: hidden; }
.course-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.course-card:hover .course-card-img img { transform: scale(1.05); }
.course-card-body { padding: 20px; }
.course-card-body h3 { font-size: 1.2rem; margin-bottom: 8px; }
.course-card-body h3 a { color: #1a2332; }
.course-card-body h3 a:hover { color: #3A4F37; }
.course-card-desc { color: #666; font-size: 0.9rem; margin-bottom: 12px; }
.course-card-subtitle { color: #888; font-size: 0.95rem; margin-bottom: 8px; }
.course-age { display: inline-block; background: #E8ECE6; padding: 2px 10px; border-radius: 12px; font-size: 0.8rem; color: #3A4F37; margin-bottom: 8px; }
.course-card-price { margin: 12px 0; }
.price-label { font-size: 0.8rem; color: #999; }
.price-value { font-size: 1.1rem; font-weight: 700; color: #c0392b; }
.course-card-horizontal { display: grid; grid-template-columns: 300px 1fr; }
.course-card-horizontal .course-card-img { aspect-ratio: auto; }
.course-prices-table { margin: 16px 0; }
.course-prices-table table { width: 100%; border-collapse: collapse; }
.course-prices-table th, .course-prices-table td { padding: 8px 16px; border: 1px solid #ddd; text-align: left; }
.course-prices-table th { background: #E8ECE6; }
.course-prices-table .price { color: #c0392b; font-weight: 700; }

/* Camp Grid */
.camp-grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; height: 500px; }
.camp-item { position: relative; border-radius: 12px; overflow: hidden; border: 2px solid rgba(58,79,55,0.2); }
.camp-item-lg { grid-row: span 2; }
.camp-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.camp-item:hover img { transform: scale(1.05); }
/* 营地图片迷彩叠层 */
.camp-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 30% 40%, rgba(58,79,55,0.18) 0 6%, transparent 7%),
      radial-gradient(circle at 70% 60%, rgba(58,79,55,0.18) 0 6%, transparent 7%);
    background-size: 80px 80px;
    opacity: 0.35;
    pointer-events: none;
    z-index: 1;
}
.camp-item-overlay { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    padding: 20px; 
    background: linear-gradient(transparent, rgba(58,79,55,0.8)); 
    color: #fff;
    position: relative;
    z-index: 2;
}
.camp-item-overlay h3 { font-size: 1.2rem; }

/* Camp Showcase */
.camp-showcase-item { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-bottom: 48px; }
.camp-showcase-item:nth-child(even) { direction: rtl; }
.camp-showcase-item:nth-child(even) > * { direction: ltr; }
.camp-showcase-img img { border-radius: 12px; box-shadow: 0 6px 24px rgba(58,79,55,0.12); }
.camp-showcase-info h3 { font-size: 1.5rem; margin-bottom: 12px; color: #3A4F37; }
.camp-showcase-info p { color: #555; }
.camp-features { margin-top: 48px; text-align: center; }
.camp-features h3 { margin-bottom: 24px; }
.camp-features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.camp-feature { 
    background: #fff; 
    padding: 24px; 
    border-radius: 12px; 
    box-shadow: 0 2px 12px rgba(58,79,55,0.08); 
    border-left:4px solid #3A4F37;
    position: relative;
    z-index: 1;
}
.camp-feature h4 { color: #3A4F37; margin-bottom: 8px; }

/* Instructor */
.instructor-content { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.instructor-image img { border-radius: 12px; }
.instructor-info h3 { color: #3A4F37; margin-bottom: 16px; }
.instructor-info p { color: #555; margin-bottom: 20px; }
.instructor-features { display: flex; flex-direction: column; gap: 16px; }
.instructor-features li { display: flex; gap: 12px; align-items: flex-start; }
.instructor-features strong { min-width: 80px; color: #3A4F37; }
.instructor-features span { color: #666; }

/* Team */
.team-content { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: flex-start; }
.team-image img { border-radius: 12px; }
.team-info h3 { color: #3A4F37; margin-bottom: 16px; }
.team-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.team-role { 
    background: #fff; 
    padding: 16px; 
    border-radius: 8px; 
    box-shadow: 0 2px 8px rgba(58,79,55,0.06); 
    border-left:3px solid #526B4E;
    position: relative;
    z-index: 1;
}
.team-role h4 { color: #3A4F37; margin-bottom: 6px; font-size: 0.95rem; }
.team-role p { color: #666; font-size: 0.85rem; }

/* Cases */
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case-card { 
    background: #fff; 
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 4px 20px rgba(58,79,55,0.06); 
    transition: transform 0.2s;
    border-top: 3px solid #526B4E;
    position: relative;
    z-index: 1;
}
.case-card:hover { transform: translateY(-4px); }
.case-card-img { aspect-ratio: 16/9; overflow: hidden; }
.case-card-img img { width: 100%; height: 100%; object-fit: cover; }
.case-card-body { padding: 20px; }
.case-card-body h3 { font-size: 1.1rem; margin-bottom: 8px; }
.case-card-body h3 a { color: #1a2332; }
.case-card-body h3 a:hover { color: #3A4F37; }
.case-card-body p { color: #666; font-size: 0.9rem; }
.case-meta { color: #999; font-size: 0.8rem; margin-bottom: 8px; }
.parent-quote { margin-top: 12px; padding: 12px; background: #E8ECE6; border-radius: 8px; border-left: 3px solid #3A4F37; }
.parent-quote p { font-style: italic; color: #555; }
.parent-quote cite { font-size: 0.8rem; color: #999; }

/* FAQ */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-list-full { max-width: 100%; }
.faq-item { border: 1px solid #ddd; border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.faq-item summary { padding: 16px 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 1rem; color: #1a2332; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { background: #E8ECE6; color: #3A4F37; }
.faq-icon { width: 20px; height: 20px; position: relative; flex-shrink: 0; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; background: #3A4F37; transition: 0.3s; }
.faq-icon::before { width: 12px; height: 2px; top: 9px; left: 4px; }
.faq-icon::after { width: 2px; height: 12px; top: 4px; left: 9px; }
.faq-item[open] .faq-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-a { padding: 0 20px 16px; color: #555; }

/* CTA Section */
.cta-section { 
    position: relative; 
    padding: 80px 0; 
    background: #283626; 
    overflow: hidden; 
}
.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(255,255,255,0.05) 0 10%, transparent 11%),
      radial-gradient(circle at 85% 15%, rgba(255,255,255,0.05) 0 12%, transparent 13%),
      radial-gradient(circle at 35% 75%, rgba(255,255,255,0.05) 0 10%, transparent 11%),
      radial-gradient(circle at 75% 80%, rgba(255,255,255,0.05) 0 8%, transparent 9%);
    background-size: 150px 150px;
    opacity: 0.3;
    pointer-events: none;
}
.cta-bg { position: absolute; inset: 0; opacity: 0.15; }
.cta-bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-content { position: relative; z-index: 2; text-align: center; color: #fff; }
.cta-content h2 { font-size: 2rem; margin-bottom: 12px; }
.cta-content p { font-size: 1.1rem; opacity: 0.9; margin-bottom: 32px; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-section .btn-outline { color: #fff; border-color: #fff; }
.cta-section .btn-outline:hover { background: #fff; color: #3A4F37; }

/* Footer */
.site-footer { 
    background: #283626; 
    color: #b8c0b6; 
    padding: 60px 0 24px;
    position: relative;
}
.site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(255,255,255,0.04) 0 8%, transparent 9%),
      radial-gradient(circle at 80% 20%, rgba(255,255,255,0.04) 0 10%, transparent 11%),
      radial-gradient(circle at 40% 80%, rgba(255,255,255,0.04) 0 9%, transparent 10%),
      radial-gradient(circle at 70% 70%, rgba(255,255,255,0.04) 0 7%, transparent 8%);
    background-size: 120px 120px;
    opacity: 0.3;
    pointer-events: none;
}
.footer-grid { 
    display: grid; 
    grid-template-columns: 2fr 1fr 1fr 2fr; 
    gap: 40px; 
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}
.footer-brand img { width: 40px; height: 40px; margin-bottom: 12px; }
.footer-brand h3 { color: #fff; font-size: 1.1rem; margin-bottom: 8px; }
.footer-brand p { font-size: 0.9rem; }
.footer-links h4, .footer-courses h4, .footer-contact h4 { color: #fff; font-size: 1rem; margin-bottom: 16px; }
.footer-links li, .footer-courses li { margin-bottom: 8px; }
.footer-links a, .footer-courses a { color: #b8c0b6; font-size: 0.9rem; }
.footer-links a:hover, .footer-courses a:hover { color: #fff; }
.footer-contact li { margin-bottom: 12px; }
.footer-contact strong { display: block; color: #d8e0d6; font-size: 0.85rem; margin-bottom: 2px; }
.footer-contact a, .footer-contact span { color: #b8c0b6; font-size: 0.9rem; }

/* Footer Friend Links 友情链接 军绿主题适配 */
.footer-friendlinks { 
    border-top: 1px solid #384935; 
    padding: 20px 0; 
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}
.footer-friendlinks h4 { color: #fff; font-size: 0.95rem; margin-bottom: 12px; }
.footer-friendlinks ul { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 0; }
.footer-friendlinks a { color: #b8c0b6; font-size: 0.85rem; }
.footer-friendlinks a:hover { color: #fff; }

.footer-bottom { 
    border-top: 1px solid #384935; 
    padding-top: 24px; 
    text-align: center; 
    font-size: 0.85rem;
    position: relative;
    z-index: 1;
}
.footer-bottom a { color: #b8c0b6; }
.footer-bottom a:hover { color: #fff; }

/* Float Buttons */
.float-consult { position: fixed; right: 20px; bottom: 20px; z-index: 99; display: flex; flex-direction: column; gap: 12px; }
.float-btn { 
    width: 52px; 
    height: 52px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #fff; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
    transition: transform 0.2s;
    position: relative;
}
.float-btn:hover { transform: scale(1.1); }
.float-phone { background: #3A4F37; }
/* 悬浮电话按钮强化脉冲 */
.float-phone::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.75);
    opacity: 0;
    animation: floatBtnPulse 1.8s ease-out infinite;
    pointer-events: none;
}
@keyframes floatBtnPulse {
    0% { transform: scale(1); opacity: 0.75; }
    100% { transform: scale(1.16); opacity: 0; }
}
.float-phone:hover::before { animation-play-state: paused; }
.float-msg { background: #27ae60; }

/* Article Detail */
.article-detail { max-width: 800px; margin: 0 auto; }
.article-header { margin-bottom: 32px; }
.article-header h1 { font-size: 2rem; margin-bottom: 12px; }
.article-meta { display: flex; gap: 16px; flex-wrap: wrap; color: #999; font-size: 0.9rem; }
.article-cover { margin-bottom: 32px; border-radius: 12px; overflow: hidden; }
.article-body { font-size: 1.05rem; line-height: 1.8; color: #444; }
.article-body p { margin-bottom: 16px; }
.article-body h2 { font-size: 1.5rem; margin: 32px 0 16px; color: #3A4F37; }
.article-body h3 { font-size: 1.25rem; margin: 24px 0 12px; }
.article-body img { border-radius: 8px; margin: 16px 0; }
.article-body blockquote { border-left: 4px solid #3A4F37; padding: 16px 20px; background: #E8ECE6; margin: 16px 0; border-radius: 0 8px 8px 0; }
.article-body table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.article-body th, .article-body td { padding: 10px 16px; border: 1px solid #ddd; }
.article-body th { background: #E8ECE6; font-weight: 600; }
.article-footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid #ddd; color: #999; font-size: 0.9rem; }
.article-tags .tag { display: inline-block; background: #E8ECE6; padding: 2px 10px; border-radius: 12px; font-size: 0.8rem; color: #3A4F37; margin-right: 6px; }
.parent-evaluation { margin-top: 40px; padding: 24px; background: #E8ECE6; border-radius: 12px; }
.parent-evaluation h3 { margin-bottom: 12px; color: #3A4F37; }
.parent-evaluation blockquote { border-left: 4px solid #3A4F37; padding: 16px; font-style: italic; }
.parent-evaluation cite { display: block; margin-top: 8px; font-size: 0.9rem; color: #999; }

/* News Layout */
.news-layout { display: grid; grid-template-columns: 1fr 280px; gap: 40px; }
.news-list { display: flex; flex-direction: column; gap: 24px; }
.news-item { display: grid; grid-template-columns: 240px 1fr; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid #ddd; }
.news-item-img { border-radius: 8px; overflow: hidden; aspect-ratio: 3/2; }
.news-item-img img { width: 100%; height: 100%; object-fit: cover; }
.news-item-body h3 { font-size: 1.1rem; margin-bottom: 8px; }
.news-item-body h3 a { color: #1a2332; }
.news-item-body h3 a:hover { color: #3A4F37; }
.news-item-meta { display: flex; gap: 12px; color: #999; font-size: 0.85rem; margin-bottom: 8px; }
.news-cat { background: #E8ECE6; padding: 1px 8px; border-radius: 4px; color: #3A4F37; }
.news-item-body p { color: #666; font-size: 0.9rem; }
.sidebar-widget { 
    background: #E8ECE6; 
    padding: 20px; 
    border-radius: 12px;
    position: relative;
}
.sidebar-widget h3 { font-size: 1.1rem; margin-bottom: 16px; color: #3A4F37; }
.category-list li { margin-bottom: 8px; }
.category-list a { display: block; padding: 8px 12px; border-radius: 6px; color: #555; font-size: 0.9rem; }
.category-list a:hover, .category-list a.active { background: #3A4F37; color: #fff; }

/* Course Detail */
.course-detail { display: grid; grid-template-columns: 1fr 320px; gap: 40px; }
.course-detail-hero { border-radius: 12px; overflow: hidden; margin-bottom: 24px; }
.course-subtitle { font-size: 1.2rem; color: #666; margin-bottom: 24px; }
.course-content h2, .course-schedule h2, .course-guarantee h2 { 
    font-size: 1.5rem; 
    margin: 32px 0 16px; 
    padding-bottom: 8px; 
    border-bottom: 2px solid #3A4F37;
    color: #3A4F37;
}
.price-card, .enroll-card { 
    background: #E8ECE6; 
    padding: 24px; 
    border-radius: 12px; 
    margin-bottom: 20px;
    position: relative;
}
.price-card h3, .enroll-card h3 { margin-bottom: 16px; color: #3A4F37; }
.price-table { width: 100%; border-collapse: collapse; }
.price-table th, .price-table td { padding: 10px 16px; border: 1px solid #ddd; text-align: left; }
.price-table th { background: #fff; }
.price-table .price { color: #c0392b; font-weight: 700; font-size: 1.1rem; }
.enroll-card .btn { margin-bottom: 10px; }
.enroll-tip { font-size: 0.85rem; color: #666; margin-top: 12px; text-align: center; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.contact-info h2, .contact-form-wrapper h2 { margin-bottom: 24px; color: #3A4F37; }
.contact-items { display: flex; flex-direction: column; gap: 24px; }
.contact-item h3 { font-size: 0.9rem; color: #999; margin-bottom: 4px; }
.contact-value { font-size: 1.2rem; font-weight: 700; color: #1a2332; }
a.contact-value:hover { color: #3A4F37; }
.contact-form .form-group { margin-bottom: 20px; }
.contact-form label { display: block; margin-bottom: 6px; font-weight: 600; color: #3A4F37; }
.contact-form input, .contact-form textarea { width: 100%; padding: 12px 16px; border: 1px solid #ccc; border-radius: 8px; font-size: 15px; background: #fff; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: #3A4F37; box-shadow: 0 0 0 3px rgba(58,79,55,0.15); }
.required { color: #c0392b; }
.form-message { padding: 12px; border-radius: 8px; margin-top: 12px; }
.form-message.success { background: #d4edda; color: #155724; }
.form-message.error { background: #f8d7da; color: #721c24; }

/* About */
.about-story { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.about-story-text p { margin-bottom: 16px; color: #555; }
.about-story-img img { border-radius: 12px; }
.credentials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.credential-card { 
    background: #fff; 
    padding: 24px; 
    border-radius: 12px; 
    box-shadow: 0 2px 12px rgba(58,79,55,0.06); 
    text-align: center;
    border-top: 3px solid #3A4F37;
    position: relative;
    z-index: 1;
}
.credential-card h3 { color: #3A4F37; margin-bottom: 8px; font-size: 1.1rem; }
.credential-card p { color: #666; font-size: 0.9rem; }
.culture-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.culture-item { 
    text-align: center; 
    padding: 32px 20px; 
    background: #fff; 
    border-radius: 12px; 
    box-shadow: 0 2px 12px rgba(58,79,55,0.06);
    position: relative;
    z-index: 1;
}
.culture-item h3 { color: #3A4F37; margin-bottom: 12px; }
.culture-item p { color: #555; font-size: 0.95rem; }

/* Pagination */
.pagination { margin-top: 32px; text-align: center; }
.pagination ul { display: inline-flex; gap: 4px; }
.pagination li a { display: block; padding: 8px 14px; border: 1px solid #ddd; border-radius: 6px; color: #555; font-size: 0.9rem; }
.pagination li.active a, .pagination li a:hover { background: #3A4F37; color: #fff; border-color: #3A4F37; }
.empty-state { text-align: center; padding: 60px 0; color: #999; font-size: 1.1rem; }

/* Rich Content */
.rich-content p { margin-bottom: 12px; }
.rich-content h2 { font-size: 1.5rem; margin: 24px 0 12px; color: #3A4F37; }
.rich-content h3 { font-size: 1.25rem; margin: 20px 0 10px; }
.rich-content img { border-radius: 8px; margin: 12px 0; }
.rich-content table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.rich-content th, .rich-content td { padding: 8px 12px; border: 1px solid #ddd; }
.rich-content th { background: #E8ECE6; }
.rich-content blockquote { border-left: 4px solid #3A4F37; padding: 12px 16px; background: #E8ECE6; margin: 12px 0; }

/* Responsive */
@media (max-width: 1024px) {
    .courses-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .news-layout { grid-template-columns: 1fr; }
    .course-detail { grid-template-columns: 1fr; }
    .camp-showcase-item { grid-template-columns: 1fr; }
    .camp-showcase-item:nth-child(even) { direction: ltr; }
}

@media (max-width: 768px) {
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    .site-header .container { height: 60px; }
    .logo-text { display: none; }
    .header-phone { display: none; }
    .nav-toggle { display: block; }
    .main-nav .nav-menu { display: none; position: absolute; top: 60px; left: 0; right: 0; background: #fff; flex-direction: column; padding: 16px; box-shadow: 0 4px 12px rgba(58,79,55,0.12); }
    .main-nav .nav-menu.open { display: flex; }
    .hero { height: 60vh; min-height: 400px; }
    .hero-content h1 { font-size: 2rem; }
    .hero-subtitle { font-size: 1rem; }
    .inner-banner { height: 200px; }
    .inner-banner h1 { font-size: 1.8rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .about-grid, .about-story, .instructor-content, .team-content, .contact-grid { grid-template-columns: 1fr; }
    .courses-grid { grid-template-columns: 1fr; }
    .course-card-horizontal { grid-template-columns: 1fr; }
    .camp-grid { grid-template-columns: 1fr; height: auto; }
    .camp-item { height: 200px; }
    .camp-item-lg { grid-row: auto; height: 250px; }
    .camp-features-grid { grid-template-columns: repeat(2, 1fr); }
    .cases-grid { grid-template-columns: 1fr; }
    .credentials-grid { grid-template-columns: 1fr; }
    .culture-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr; }
    .news-item { grid-template-columns: 1fr; }
    .team-roles { grid-template-columns: 1fr; }
    .cta-content h2 { font-size: 1.5rem; }
    .content-section { padding: 40px 0; }
    .about-brief, .courses-section, .camp-section, .instructor-section, .cases-section, .faq-section { padding: 44px 0; }
}
.credential-card .credential-img { margin: -24px -24px 16px; height: 160px; border-radius: 12px 12px 0 0; overflow: hidden; background: #E8ECE6; }
.credential-card .credential-img img { width: 100%; height: 100%; object-fit: cover; display: block; }