#bs5{
  --white:#fff;
  --green:#5A9443;
  --orange:#E38E17;
  --gray-text:#6C757D;
  --gray:#ADB5BD;
  color:#2A3320;
  font-family: "Noto Sans TC", sans-serif;
  background-color: #FEE867;
  background-image: url('http://www.digiwin.com/tw/images/solution/wb003954/tariff-bg.svg');
  background-size: 90vw auto;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center 30%;

  .btn-outline-warning{
    --bs-btn-color: var(--orange);
    --bs-btn-border-color: var(--orange);
    --bs-btn-hover-color: var(--white);
    --bs-btn-hover-bg: var(--orange);
    --bs-btn-hover-border-color: var(--orange);
    --bs-btn-active-color: var(--white);
    --bs-btn-active-bg: var(--orange);
    --bs-btn-active-border-color: var(--orange);
    --bs-btn-disabled-color: var(--orange);
    --bs-btn-disabled-border-color:var(--orange);
    --bs-btn-color: var(--orange);
    --bs-btn-border-color: var(--orange);
    --bs-btn-hover-color: var(--white);
    --bs-btn-hover-bg: var(--orange);
    --bs-btn-hover-border-color: var(--orange);
    --bs-btn-active-color: var(--white);
    --bs-btn-active-bg: var(--orange);
    --bs-btn-active-border-color: var(--orange);
    --bs-btn-disabled-color: var(--orange);
    --bs-btn-disabled-border-color: var(--orange);
  }
  .container {
    max-width: 1320px;
    margin: 0 auto;
    padding-left: 1.8rem;
    padding-right: 1.8rem;
  }

  /* Card: prefer Bootstrap's .card; keep subtle default if needed */
  .card {
    background-color: #fff;
    border-radius: .5rem; /* matches Bootstrap rounding */
    padding: .75rem;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  }

  /* Form elements: Bootstrap provides form-control, but keep small consistent defaults */
  label {
    display: block;
    font-size: 1rem;
    margin-top: .5rem;
  }

  input, select, textarea {
    width: 100%;
    padding: .5rem;
    border-radius: .375rem;
    border: 1px solid #e6e9ee;
    font-size: .875rem;
    box-sizing: border-box;
  }

  /* Utility row: use Bootstrap's d-flex and gap utilities in markup; keep small helper */
  .row-custom {
    display: flex;
    gap: .5rem;
  }
  .row-custom > * {
    flex: 1 1 0;
  }
  #originInput .btn{
    min-width: 102px;
  }
  .text-green{
    color:var(--green);
  }
  .text-orange{
    color:var(--orange);
  }
  .text-gray{
    color:var(--gray);
  }
  .bg-green{
    background:var(--green);
  }
  .bg-orange{
    background:var(--orange);
  }
  .bg-gray{
    background:var(--gray);
  }
  .btn.bg-green {
    background-color: var(--green);
    color: var(--white);
    border:0;
  }
  .btn.bg-green:hover,
  .btn.bg-green:active,
  .btn.bg-green:focus {
    background-color: color-mix(in srgb, var(--green) 80%, black 20%);
    color: var(--white);
  }

  .btn.bg-orange {
    background-color: var(--orange);
    color: var(--white);
    border:0;
  }
  .btn.bg-orange:hover,
  .btn.bg-orange:active,
  .btn.bg-orange:focus {
    background-color: color-mix(in srgb, var(--orange) 80%, black 20%);
    color: var(--white);
  }

  .btn.bg-gray{
    background-color: var(--gray);
    color: var(--white);
    border:0;
  }
  .btn.bg-gray:hover,
  .btn.bg-gray:active,
  .btn.bg-gray:focus {
    background-color: color-mix(in srgb, var(--gray) 80%, black 20%);
    color: var(--white);
  }

  h1{
    font-size:clamp(40px, 8vw, 72px);
  }
  h2{
    font-size:clamp(32px, 6vw, 64px);
  }
  h3{
    font-size:clamp(26px, 4vw, 32px);
  }
  .underline::after{
    content: '';
    width: 176px;
    height: 4px;
    background-color: var(--white);
    display: block;
    margin:.5rem auto 0;
  }


  #tariff-header,#the-more{
    background-color: #FFFEED;
  }
  #calculator-section{
    position: relative;
    z-index: 1;
  }
  #the-more{
    padding-top: 15rem;
    margin-top:-10rem;
  }
  @media (min-width: 1200px) {
    #tariff-header{
      clip-path: ellipse(100% 100% at 50% 0%);
    }
    #the-more{
      clip-path: ellipse(100% 67% at 50% 67%);
      padding-top: 30rem;
      margin-top:-20rem;
    }
    #chartRow .card{
      position: relative;
      #nana-cta{
        position: absolute;
        right: -64px;
        bottom: -44px;
        width: 200px;
        height: 300px;
        cursor: pointer;
      }
    }
  }

  canvas {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    /* 限制在手機/小螢幕上的最大高度，避免無限膨脹 */
    max-height: 60vh;
    height: auto;
  }

  /* List & items: prefer Bootstraps overflow utilities but keep custom sizes */
  .list {
    max-height: 400px;
    overflow: auto;
    margin-top: .5rem;
  }
  @media (min-width: 1200px) {
    .list{
      max-height: 492px;
    }
  }
  .item {
    padding: .5rem;
    border-radius: .375rem;
    border: 1px solid #BCBCBC;
    margin-bottom: .5rem;
    background: #fff;
  }

  .meta {
    color: var(--gray-text);
  }

  /* Responsive notes: prefer to use Bootstrap's grid system in markup.
    Keep a fallback to single-column at smaller widths to match previous behavior. */
  @media (max-width: 980px) {
    .container {
      max-width: 100%;
      padding-left: 1rem;
      padding-right: 1rem;
    }
  }

  /* Small helper to mimic the previous left/main + sidebar layout if not using Bootstrap grid
    (use .main-sidebar on a wrapper and place two children inside). */
  .main-sidebar {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: .875rem;
  }
  @media (max-width: 980px) {
    .main-sidebar {
      grid-template-columns: 1fr;
    }
  }
  #pointPopoverToggle{
    position: fixed;
    width: 0;
    height: 0;
    font-size: 0;
    overflow: hidden;
  }
  #nana-img{
    position: absolute;
    left: -36px;
    top: -40px;
    transform: rotateZ(-7deg);
    width: 95px;
    height: 95px;
    z-index: 2;
  }
  #pointPopover, .popover, [popover]{
    z-index: 9999;
    width:90vw;
    max-width:580px;
    padding:1rem;
    border:0;
    border-radius:8px;
    background-color: #FEE867;
    overflow: visible;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    &::backdrop{
      background-color: rgba(10, 10, 10, .5);
    }
  }
  .teach-popover{
    max-width: 800px;
    max-height: 98dvh;
  }
  .popover{
    max-width: 1200px;
    max-height: 98dvh;
  }
  .popover .card{
    max-height: calc(98dvh - 6rem);
    overflow-y: auto;
    /* -webkit-overflow-scrolling: touch; */
    /* padding-right: 0.5rem; */
  }
  .popoverInsideToggle{
    width:24px;
    height:24px;
    border-radius:50%;
    background-color:#fff;
    color:var(--orange);
  }
  
  #exmaple-swiper{
    max-width: 1000px;
    width: 100%;
  }
  /* @media (min-width: 1200px) {
    #exmaple-swiper{
      min-height: 580px;
    }
  } */
  .swiper-pagination-thumb img{width:60px;height:40px;object-fit:cover;border-radius:6px;border:2px solid rgba(255,255,255,.9)}
    .swiper-pagination-thumb{display:inline-block;margin:0 6px;opacity:0.6}
    .swiper-pagination-bullet-active.swiper-pagination-thumb{opacity:1;transform:scale(1.05);background:none;}
    .swiper-button-next, .swiper-button-prev{color:#2A3320}
  .swiper-pagination{
    position: relative;
  }
  .swiper-pagination-bullet{
    width: auto;
    height: auto;
    background:none;
  }
  .breathing{
    animation: breathingAnimation 3s ease-in-out infinite;
  }
}
@keyframes breathingAnimation {
  0% {
    opacity: .7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: .7;
    transform: scale(1);
  }
}