:root{
  --green:#0ea54a; --green-700:#0b823a; --ink:#0b1220; --muted:#6b7280;
  --border:#e5e7eb; --bg:#fff; --bg-soft:#f6f8f7;
  --gutter:16px;
  color-scheme: light;
     --font-sans: "Be Vietnam Pro", system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", Arial, "Apple Color Emoji","Segoe UI Emoji";
      --font-serif: "Merriweather", Georgia, "Times New Roman", serif;
}
*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html,body{margin:0;padding:0}
body.lp-home{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#fff;-webkit-text-size-adjust:100%;overflow-x:hidden}
.lp-container{max-width:1120px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
@supports(padding:max(0px)){
  .lp-container{padding-left:max(var(--gutter), env(safe-area-inset-left));padding-right:max(var(--gutter), env(safe-area-inset-right))}
}

/* Header */
.siteHeader{padding:15px;position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #eef2ef;transition:box-shadow .2s}
.siteHeader.is-stuck{box-shadow:0 6px 18px rgba(0,0,0,.06)}
.headerRow{display:flex;align-items:center;justify-content:space-between;height:56px;gap:12px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:700}
.mainNav{display:flex;gap:16px}
.mainNav a{color:#0b1220;text-decoration:none;padding:8px 0}
.mainNav a:hover{color:var(--green)}
.headerActions{display:flex;gap:8px}
.iconBtn{border:1px solid var(--border);background:#fff;border-radius:10px;padding:6px 10px;cursor:pointer}
.searchBar{display:flex;gap:8px;padding:10px 0;border-bottom:1px solid #eef2ef}
.searchBar input{flex:1;padding:10px 12px;border:1px solid var(--border);border-radius:10px}
@media (max-width:800px){
  .mainNav{position:absolute;left:0;right:0;top:56px;background:#fff;border-bottom:1px solid #eef2ef;display:none;flex-direction:column;padding:8px 16px;gap:0}
  .mainNav.is-open{display:flex}
}

/* Hero */
.lp-hero{padding:15px;background:linear-gradient(180deg,#e8f7ee,#f7fbf8);border-bottom:1px solid #ecf0ec;overflow:hidden}
.lp-heroWrap{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;min-height:420px;padding:24px 0}
.lp-hero h1{font-size:48px;line-height:1.1;margin:6px 0 10px}
.lp-hero p{font-size:18px;color:#334155;margin:0 0 18px}
.lp-heroMedia{border-radius:18px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.10)}
.lp-heroMedia img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.lp-cta{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 8px}
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid var(--border);background:#fff;color:var(--ink);text-decoration:none}
.lp-btn:hover{border-color:var(--green);box-shadow:0 2px 12px rgba(14,165,74,.18)}
.lp-btnPrimary{background:var(--green);border-color:var(--green);color:#fff}
.lp-btnPrimary:hover{background:var(--green-700);border-color:var(--green-700)}
.lp-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.lp-pill{display:inline-block;padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:#fff;text-decoration:none;color:#0b1220;font-size:13px}
.lp-pill:hover{border-color:var(--green);color:var(--green-700)}

/* Main layout */
.lp-main{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin:22px auto}
.lp-h2{font-size:22px;margin:6px 0 10px}

/* Left */
.lp-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:10px}
.lp-action{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border:1px solid var(--border);border-radius:14px;background:#fff;text-decoration:none;color:var(--ink);min-height:88px}
.lp-action img{width:24px;height:24px}
.lp-action:hover{border-color:var(--green)}
.lp-events{display:grid;gap:12px}
.lp-clubs{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:center;margin-top:18px;background:var(--bg-soft);border:1px solid var(--border);border-radius:16px;padding:14px}
.lp-clubs img{display:block;width:100%;height:auto;aspect-ratio:16/10;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.06)}

/* Right rail */
.lp-right .lp-railSection{border:1px solid var(--border);border-radius:16px;background:#fff;padding:14px;margin-bottom:16px}
.lp-railHead{display:flex;justify-content:space-between;align-items:center}
.lp-link{font-size:13px;color:var(--green-700);text-decoration:none}

/* List wide (ảnh ngang) */
.lp-postList{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:12px}
.lp-post--wide{display:grid;grid-template-columns:132px 1fr;gap:12px;align-items:center}
.lp-post--wide .lp-postThumb img{
  display:block;width:132px;aspect-ratio:16/10;height:auto;object-fit:cover;
  border-radius:14px;border:1px solid #e6e9ee;box-shadow:0 3px 10px rgba(0,0,0,.06)
}

/* Tiêu đề màu GREEN (kể cả đã click) */
.lp-postTitle--green,
.lp-postTitle--green:visited{
  color:var(--green-700); text-decoration:none; font-weight:600; line-height:1.35; font-size:16.5px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.lp-postTitle--green:hover{color:var(--green)}

/* Footer */
.siteFooter{border-top:1px solid #eef2ef;background:#fff;margin-top:18px}
.footRow{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px}
.footNav{display:flex;gap:12px}
.footNav a{text-decoration:none;color:#334155}
.footNav a:hover{color:var(--green)}

/* Phone */
@media (max-width:600px){
  :root{ --gutter:20px; }
  .lp-heroWrap{grid-template-columns:1fr;gap:16px;min-height:0;padding:16px 0}
  .lp-hero h1{font-size:clamp(26px,7vw,34px)}
  .lp-hero p{font-size:15px;margin-bottom:12px}
  .lp-btn{flex:1 1 100%;min-width:0}
  .lp-main{grid-template-columns:1fr;gap:16px;margin:16px auto}
  .lp-actions{grid-template-columns:repeat(2,1fr);gap:10px}
  .lp-action{min-height:74px;padding:10px}
  .lp-clubs{grid-template-columns:1fr}
  .lp-post--wide{grid-template-columns:120px 1fr}
  .lp-post--wide .lp-postThumb img{width:120px;border-radius:12px}
}

/* iPad */
@media (max-width:900px){
  .lp-main{grid-template-columns:1fr;gap:16px;margin:16px auto}
}
@media (min-width:901px) and (max-width:1200px){
  .lp-main{grid-template-columns:1.7fr 1fr}
}

/* Small UX */
a,button{-webkit-tap-highlight-color:rgba(0,0,0,.08)}
@supports (-webkit-touch-callout: none){
  input,button,select,textarea{font-size:16px}
}
/* ===== Decor cho TẤT CẢ tiêu đề section (.lp-h2) ===== */
.lp-h2{
  position: relative;
  font-weight: 700;
  margin: 6px 0 14px;          /* chừa chỗ cho gạch chân */
  padding-left: 14px;          /* chừa chỗ cho thanh dọc trái */
  line-height: 1.2;
}

/* Thanh dọc xanh ở bên trái tiêu đề */
.lp-h2::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 6px;
  height: 1.2em;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--green), var(--green-700));
  box-shadow: 0 6px 16px rgba(14,165,74,.25);
}

/* Gạch chân gradient nhẹ dưới tiêu đề */
.lp-h2::after{
  content: "";
  position: absolute;
  left: 14px;                  /* bằng padding-left của .lp-h2 */
  right: 0;
  bottom: -6px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(14,165,74,.35), rgba(14,165,74,.07));
}

/* Trường hợp tiêu đề nằm trong thanh head có nút "Xem tất cả" bên phải */
.lp-railHead{ align-items: flex-end; }
.lp-railHead .lp-h2{
  margin: 0 0 10px;
  padding-left: 12px;
}
.lp-railHead .lp-h2::before{
  top: 0.15em;
  height: 1.1em;
}
.lp-railHead .lp-h2::after{
  right: 96px;                 /* chừa chỗ cho link "Xem tất cả" */
}

/* Nhãn nhỏ (tùy chọn) đặt TRÊN tiêu đề: <span class="lp-eyebrow">…</span> */
.lp-eyebrow{
  display: inline-block;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--green-700);
  background: #eaf7ef;
  border: 1px solid #d7f0e1;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
  font-weight: 600;
}

/* Giữ thẩm mỹ trên mobile */
@media (max-width:600px){
  .lp-h2{ margin-bottom: 12px; padding-left: 12px; }
  .lp-h2::after{ bottom: -5px; height: 2px; }
  .lp-railHead .lp-h2::after{ right: 84px; }
}

/* Right rail */
.lp-right .lp-railSection{border:1px solid var(--border);border-radius:16px;background:#fff;padding:14px;margin-bottom:16px}
.lp-railHead{display:flex;justify-content:space-between;align-items:center}
.lp-link{font-size:13px;color:var(--green-700);text-decoration:none}

/* List wide */
.lp-postList{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:12px}
.lp-post--wide{display:grid;grid-template-columns:132px 1fr;gap:12px;align-items:center}
.lp-post--wide .lp-postThumb img{
  display:block;width:132px;aspect-ratio:16/10;height:auto;object-fit:cover;
  border-radius:14px;border:1px solid #e6e9ee;box-shadow:0 3px 10px rgba(0,0,0,.06)
}
.lp-postTitle--green,
.lp-postTitle--green:visited{
  color:var(--green-700);text-decoration:none;font-weight:600;line-height:1.35;font-size:16.5px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.lp-postTitle--green:hover{color:var(--green)}

@media (max-width:600px){
  .lp-post--wide{grid-template-columns:120px 1fr}
  .lp-post--wide .lp-postThumb img{width:120px;border-radius:12px}
}