:root{
  --ink:#171717;
  --cream:#eee6db;
  --taupe:#81745f;
  --hero:#36342f;
  --accent:#c8b18e;
}
*{box-sizing:border-box}
body {
  font-family: 'Barlow', sans-serif;
  font-size:16px;
}

h1, h2, h3, h4, h5, h6,
.nav-link,
.btn,
.section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
}

.nav-link{
  color: #fff;
}

body{margin:0;color:var(--ink);background:#fff}
a{text-decoration:none;color:inherit}
.hero{
  min-height:520px;
  background:linear-gradient(110deg,#2e2d29 0%,#3a3934 50%,#8a806e 100%);
  color:#fff;
  overflow:hidden;
}
.navbar-brand{font-size:16px}
.hero-content{min-height:445px;}
.eyebrow,.section-title h2,.sponsor h2,.footer h2{
  font-weight:900;letter-spacing:.7px
}
.hero h1{font-size:48px;line-height:1.08;font-weight:900;letter-spacing:1px}
.hero h1 span,.section-title span,.sponsor span,.footer h2 span{color:var(--accent)}
.hero-copy{max-width:560px;font-size:16px;line-height:1.7;color:#d4d0c8}
.eyebrow{font-size:18px;color:#f2f0eb}
.amazon-note{font-size:16px;color:#d0ccc4}
.book-wrap{height:340px;display:flex;align-items:center;justify-content:center;perspective:900px}
.book{width:180px;height:270px;position:relative;transform:rotateY(-12deg) rotateZ(-1deg);filter:drop-shadow(18px 20px 12px rgba(0,0,0,.38))}
.book-cover{
  position:absolute;right:0;top:0;width:164px;height:270px;
  border-radius:2px 5px 5px 2px;
  background:linear-gradient(145deg,#d8d0bf,#8f8574);
  border:1px solid #292622;padding:10px;text-align:center;color:#222;
  display:flex;flex-direction:column;align-items:center
}
.book-cover small{font-size:7px;font-weight:700}.book-cover strong{font-size:19px}
.book-cover b{font-size:21px;margin-top:auto}.book-cover span{font-size:7px;font-weight:700}
.book-spine{position:absolute;left:0;top:3px;width:18px;height:264px;background:linear-gradient(90deg,#171717,#57534a,#1e1d1a);transform:skewY(-1deg);z-index:2}
.book-face{width:88px;height:105px;margin-top:7px;border-radius:48% 48% 40% 40%;background:radial-gradient(circle at 50% 35%,#d2aa86 0 25%,#6c4c37 26% 45%,#2c2a26 46%);position:relative}
.book-face:after{content:"";position:absolute;left:20px;right:20px;bottom:12px;height:23px;border-radius:50%;background:#3c2e27}
.section-white{background:#fff}
.section-title h2{font-size:36px;margin:0}
.section-title p{font-size:18px;color:#777;margin-top:6px}
.video-frame{max-width:900px;margin:auto}
.video-art{
  height:350px;border:1px solid #ddd;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#d8c7ad 0%,#f2dfc3 34%,#5b6265 100%);
}
.sun{position:absolute;width:280px;height:280px;border-radius:50%;left:0;top:-55px;background:radial-gradient(circle,#fff6d9 0 20%,#e8bd86 40%,transparent 70%);opacity:.8}
.cloud{position:absolute;background:rgba(255,255,255,.5);filter:blur(18px);border-radius:50%}
.cloud-a{width:480px;height:90px;left:60px;top:50px}.cloud-b{width:360px;height:80px;right:-20px;top:130px}
.jet{position:absolute;left:38%;top:42%;font-size:130px;color:#20252a;transform:rotate(-8deg) skewX(-12deg);text-shadow:8px 8px 8px rgba(0,0,0,.35)}
.flag-stars{position:absolute;right:20px;top:20px;color:rgba(255,255,255,.55);font-size:28px;line-height:1.5;transform:rotate(18deg)}
.play-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:55px;height:55px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:27px}
.video-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:#222}.video-bar span{display:block;width:65%;height:100%;background:#d33}
.partners{display:flex;justify-content:space-around;align-items:center;gap:15px;flex-wrap:wrap;padding:18px;background:#fff;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.18);font-size:11px;font-weight:800;color:#57708a}
.partners small{display:block;font-size:6px;color:#999}.partner-dark{font-size:18px}
.sponsor{background:var(--cream)}
.sponsor h2,.footer h2{font-size:24px;margin:0}.sponsor p{font-size:16px;line-height:1.6;max-width:650px}
.pill-control{border-radius:50px;border-color:#555;background:transparent;font-size:16px;min-width:210px}
.questions{background:#fff}.question-grid a{display:block;border-bottom:1px solid #aaa;padding:16px 0;font-size:16px;line-height:1.35}
.btn-load{border:1px solid #aaa;background:#fff;font-size:16px;box-shadow:0 2px 6px rgba(0,0,0,.1)}
.footer{background:#81745f;color:#fff}.footer h2 span{color:#e2d3bd}.footer-copy{font-size:16px;line-height:1.6;color:#e8e0d5;max-width:650px}
.footer-links{display:flex;flex-direction:column;gap:15px;font-size:16px}.footer-links a{color:#f0e8dd}.footer-links i{font-size:17px;vertical-align:middle;margin-right:10px}.border-start-lg{border-color:rgba(255,255,255,.45)!important}
.footer .form-control{border:1px solid rgba(255,255,255,.8);background:transparent;color:#fff;border-radius:18px;font-size:16px;padding:16px 14px}.footer .form-control::placeholder{color:#eee}
.copyright{border-top:1px solid rgba(255,255,255,.25);background: #000; padding-bottom: 10px; font-size:11px;padding-left:20px}
.hero-section {
  position: relative;
  min-height: 680px;
  overflow: hidden;
  background-image:url("bg.jpg"); background-size:cover;
  color: #fff;

  display: flex;
  align-items: center;
}

/* =========================================
   VIDEO BACKGROUND
========================================= */

.hero-video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  z-index: 0;
}

/* =========================================
   DARK OVERLAY
========================================= */

.hero-overlay {
  position: absolute;
  inset: 0;

  z-index: 1;

  background:
          linear-gradient(
                  90deg,
                  rgba(0, 0, 0, 0.90) 0%,
                  rgba(0, 0, 0, 0.72) 35%,
                  rgba(0, 0, 0, 0.45) 65%,
                  rgba(0, 0, 0, 0.60) 100%
          );
}

/*
 * Bottom dark gradient giúp video hòa vào
 * section tiếp theo.
 */

.hero-overlay::after {
  content: "";

  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 180px;

  background: linear-gradient(
          to bottom,
          transparent,
          rgba(0, 0, 0, 0.85)
  );
}

/* =========================================
   FILM GRAIN
========================================= */

.hero-grain {
  position: absolute;
  inset: 0;

  z-index: 2;

  pointer-events: none;

  opacity: 0.12;

  background-image:
          url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");

  mix-blend-mode: screen;
}

/* =========================================
   HERO CONTENT
========================================= */

.hero-content {
  position: relative;

  z-index: 3;

  width: 100%;

  padding-top: 0px;
  padding-bottom: 80px;
}

/* =========================================
   TYPOGRAPHY
========================================= */

.hero-eyebrow {
  margin-bottom: 12px;

  font-family:
          "Barlow Condensed",
          sans-serif;

  font-size: 18px;
  font-weight: 700;

  letter-spacing: 3px;

  color: #fff;
}

.hero-section h1 {
  margin: 0;

  font-family:
          "Barlow Condensed",
          sans-serif;

  font-size: clamp(64px, 8vw, 110px);

  font-weight: 900;

  line-height: 0.85;

  letter-spacing: -2px;

  text-transform: uppercase;
}

.hero-section h1 span {
  color: #d71920;
}

.hero-section h2 {
  margin-top: 18px;

  font-family:
          "Barlow Condensed",
          sans-serif;

  font-size: clamp(24px, 3vw, 42px);

  font-weight: 800;

  letter-spacing: 4px;

  text-transform: uppercase;
}

.hero-description {
  max-width: 540px;

  margin-top: 25px;

  font-family: "Barlow", sans-serif;

  font-size: 16px;

  line-height: 1.7;

  color: rgba(255,255,255,.82);
}

/* =========================================
   BUTTONS
========================================= */

.hero-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 32px;
}

.hero-actions .btn {
  min-width: 165px;

  padding: 12px 24px;

  border-radius: 3px;

  font-family:
          "Barlow Condensed",
          sans-serif;

  font-size: 16px;

  font-weight: 700;

  letter-spacing: 1.5px;
}

.hero-actions .btn-danger {
  background: #c9151e;

  border-color: #c9151e;
}

.hero-actions .btn-danger:hover {
  background: #ed1c24;

  border-color: #ed1c24;
}

/* =========================================
   BOOK
========================================= */

.hero-book {
  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 520px;
}

.hero-book img {
  position: relative;

  max-width: 360px;

  width: 80%;

  height: auto;

  filter:
          drop-shadow(
                  25px 30px 25px
                  rgba(0,0,0,.65)
          );

  transform:
          perspective(900px)
          rotateY(-8deg)
          rotateZ(-1deg);

  transition:
          transform .5s ease;
}

.hero-book img:hover {
  transform:
          perspective(900px)
          rotateY(0deg)
          rotateZ(0deg)
          scale(1.03);
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 991px) {

  .hero-section {
    min-height: 900px;
  }

  .hero-content {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .hero-book {
    height: 360px;

    margin-top: 30px;
  }

  .hero-book img {
    max-width: 260px;
  }

  .hero-overlay {
    background:
            linear-gradient(
                    180deg,
                    rgba(0,0,0,.88),
                    rgba(0,0,0,.65) 55%,
                    rgba(0,0,0,.90)
            );
  }
}

@media (max-width: 575px) {

  .hero-section {
    min-height: 850px;
  }

  .hero-eyebrow {
    font-size: 14px;

    letter-spacing: 2px;
  }

  .hero-section h1 {
    font-size: 62px;
  }

  .hero-section h2 {
    font-size: 24px;

    letter-spacing: 2px;
  }

  .hero-description {
    font-size: 14px;
  }

  .hero-actions {
    flex-direction: column;

    align-items: flex-start;
  }

  .hero-book {
    height: 300px;
  }

  .hero-book img {
    max-width: 230px;
  }
}
.donate-modal{
  border:0;
  border-radius:18px;
  background:#fff;
  color:var(--ink);
}
.donate-modal .modal-title{
  font-size:22px;
  letter-spacing:.6px;
}
.donate-modal .form-control{
  border-radius:12px;
  border:1px solid #cfc6b8;
  padding:12px 14px;
}
.donate-item,
.donate-summary{
  font-size:15px;
  color:#555;
}
.donate-card-label{
  font-size:13px;
  font-weight:600;
  letter-spacing:.4px;
  margin-bottom:6px;
}
#card-element{
  min-height:20px;
  border:1px solid #cfc6b8;
  border-radius:12px;
  padding:14px 12px;
  background:#fff;
}
#card-element.StripeElement--focus{
  border-color:#c9151e;
  box-shadow:0 0 0 3px rgba(201,21,30,.12);
}
#card-element.StripeElement--invalid{
  border-color:#c9151e;
}
.video-section {
    position: relative;

    padding: 20px 0 20px;

    background: #ffffff;

    overflow: hidden;
}


/* =========================================
   HEADING
========================================= */

.video-heading {
    margin-bottom: 35px;
}

.video-eyebrow {
    margin-bottom: 8px;

    font-family: "Barlow Condensed", sans-serif;

    font-size: 15px;
    font-weight: 800;

    letter-spacing: 3px;

    color: #222;

    text-transform: uppercase;
}

.video-heading h2 {
    margin: 0;

    font-family: "Barlow Condensed", sans-serif;

    font-size: clamp(32px, 4vw, 48px);

    font-weight: 900;

    letter-spacing: 1px;

    line-height: 1;
}

.video-heading h2 span {
    color: #b79b78;
}

.video-heading p {
    max-width: 600px;

    margin: 12px auto 0;

    font-family: "Barlow", sans-serif;

    font-size: 14px;

    line-height: 1.6;

    color: #777;
}


/* =========================================
   CAROUSEL
========================================= */

.video-carousel {
    max-width: 1000px;

    margin: 0 auto;
}


/* =========================================
   VIDEO
========================================= */

.video-player {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #111;

    border-radius: 4px;

    box-shadow:
        0 25px 60px rgba(0,0,0,.22);
}

.main-video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    background: #000;
}


/* =========================================
   CAPTION
========================================= */

.video-caption {
    padding: 18px 10px 0;

    text-align: center;
}

.video-caption h3 {
    margin: 0;

    font-family: "Barlow Condensed", sans-serif;

    font-size: 22px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.video-caption p {
    margin: 3px 0 0;

    font-family: "Barlow", sans-serif;

    font-size: 12px;

    color: #777;
}


/* =========================================
   CAROUSEL ARROWS
========================================= */

.carousel-control-prev,
.carousel-control-next {
    width: 70px;

    opacity: 1;
}

.video-arrow {
    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(0,0,0,.65);

    color: #fff;

    font-size: 18px;

    transition: all .25s ease;
}

.carousel-control-prev:hover .video-arrow,
.carousel-control-next:hover .video-arrow {
    background: #c9151e;

    transform: scale(1.08);
}


/* =========================================
   CIRCULAR THUMBNAILS
========================================= */

.video-thumbnails {

    display: flex;

    justify-content: center;
    align-items: center;

    gap: 18px;

    margin-top: 28px;
}


/* Remove button style */

.video-thumb {
    position: relative;

    width: 76px;
    height: 76px;

    padding: 0;

    border: 0;

    background: transparent;

    border-radius: 50%;

    cursor: pointer;
}


/* Outer ring */

.video-thumb::before {
    content: "";

    position: absolute;

    inset: -4px;

    border-radius: 50%;

    border: 2px solid transparent;

    transition: all .3s ease;

    z-index: 1;
}


/* Thumbnail image/video */

.thumb-inner {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 50%;

    background: #222;

    box-shadow:
        0 5px 15px rgba(0,0,0,.2);
}

.thumb-inner video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* Dark overlay */

.thumb-inner::after {
    content: "";

    position: absolute;

    inset: 0;

    background: rgba(0,0,0,.30);

    transition: background .3s ease;
}


/* Play icon */

.thumb-play {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 28px;
    height: 28px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(0,0,0,.72);

    color: #fff;

    font-size: 16px;

    z-index: 2;

    transition: all .25s ease;
}


/* Active */

.video-thumb.active::before {
    border-color: #c9151e;

    box-shadow:
        0 0 0 3px rgba(201,21,30,.12);
}

.video-thumb.active .thumb-inner::after {
    background: rgba(0,0,0,.08);
}

.video-thumb.active .thumb-play {
    background: #c9151e;
}


/* Hover */

.video-thumb:hover {
    transform: translateY(-3px);
}

.video-thumb:hover .thumb-play {
    transform:
        translate(-50%, -50%)
        scale(1.12);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 767px) {

    .video-section {
        padding: 20px 0 70px;
    }

    .video-heading {
        margin-bottom: 25px;
    }

    .video-heading h2 {
        font-size: 36px;
    }

    .video-heading p {
        padding: 0 20px;

        font-size: 13px;
    }

    .video-carousel {
        width: 100%;
    }

    .video-player {
        aspect-ratio: 16 / 10;

        border-radius: 0;
    }

    .carousel-control-prev,
    .carousel-control-next {
        width: 45px;
    }

    .video-arrow {
        width: 34px;
        height: 34px;

        font-size: 14px;
    }

    .video-thumbnails {
        margin-top: 22px;

        gap: 14px;
    }

    .video-thumb {
        width: 62px;
        height: 62px;
    }

    .thumb-play {
        width: 24px;
        height: 24px;

        font-size: 14px;
    }
}

@media(max-width:991.98px){
  .hero{min-height:auto}.hero-content{padding:45px 0}.hero h1{font-size:31px}.book-wrap{height:300px}.video-art{height:280px}.border-start-lg{border-left:0!important}
}
@media(max-width:575.98px){
  .hero h1{font-size:25px}.hero-content{padding-top:25px}.video-art{height:210px}.jet{font-size:75px}.partners{font-size:8px}.sponsor .d-flex{justify-content:flex-start!important}.pill-control{min-width:0;flex:1}
}