:root{
      --ram-blue:#0A3BD6;
      --ram-cyan:#26B5E7;
      --text:#0b0b0b;
      --muted:#6b7280;
      --line:#e8edf4;

      --container: 980px;
      --radius: 12px;
    }

    @font-face {
    font-family: 'IBM Plex Sans Thai';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    /* อย่าลืม ../ เพื่อถอยออกจากโฟลเดอร์ css ไปหา fonts */
    src: url('../fonts/IBMPlexSansThai-Regular.ttf') format('truetype');
    }

    /* ตัวอย่างสำหรับตัวหนา (Bold 700) */
    @font-face {
    font-family: 'IBM Plex Sans Thai';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/IBMPlexSansThai-Bold.ttf') format('truetype');
    }


    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family:"IBM Plex Sans Thai", system-ui, -apple-system, Segoe UI, sans-serif !important;
      color:var(--text);
      background:#fff;
    }

    .wrap{
      max-width:var(--container);
      margin:0 auto;
      padding:24px 22px 0;
      position:relative;
      padding-bottom: 140px !important;
    }

    /* top-right blue corner shape */
    .corner-shape{
      position:absolute;
      right:22px;
      top:18px;
      width:92px;
      height:92px;
      background:var(--ram-blue);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 45%, 0 45%);
    }

    /* header logo */
    .header{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      padding-top:4px;
    }
    .logo{
      display:flex;
      flex-direction:column;
      gap:2px;
      line-height:1;
      user-select:none;
      width: 160px;
    }
    .logo .ram{
      font-weight:900;
      letter-spacing:.5px;
      font-size:26px;
      color:var(--ram-blue);
      position:relative;
      display:inline-block;
    }
    .logo .ram::after{
      content:"";
      position:absolute;
      right:-10px;
      top:2px;
      width:8px;height:8px;
      border-radius:2px;
      background:var(--ram-cyan);
    }
    .logo .hospital{
      font-weight:700;
      font-size:10px;
      color:var(--ram-cyan);
      letter-spacing:.6px;
    }

    /* hero */
    .hero{
      display:grid;
      grid-template-columns: 1.15fr .95fr;
      gap:34px;
      align-items:center;
      padding:18px 0 10px;
    }

    .hero-copy{
     width: 435px;
    }

    .hero-title{
      margin:0 0 12px 0;
      line-height:1.02;
    }
    .hero-title .checkup{
      display:block;
      font-size:64px;
      font-weight:900;
      color:var(--ram-blue);
      letter-spacing:.5px;
    }
    .hero-title .ramquiz{
      display:block;
      font-size:46px;
      font-weight:900;
      color:var(--ram-cyan);
      letter-spacing:.3px;
      margin-top:4px;
    }

    .hero-desc{
      margin:10px 0 10px;
      max-width:360px;
      font-size:18px;
      color:var(--text);
      font-weight:700;
    }
    .hero-sub{
      margin:0 0 14px;
      max-width:420px;
      font-size:16px;
      color:var(--muted);
      line-height:1.65;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      background:#0a0a0a;
      color:#fff;
      border:0;
      padding:10px 14px;
      border-radius:6px;
      font-weight:800;
      font-size:16px;
      text-decoration:none;
      box-shadow: 0 10px 18px rgba(0,0,0,.18);
      transition: transform .12s ease, box-shadow .12s ease;
    }
    .btn:hover{
      transform: translateY(-1px);
      box-shadow: 0 14px 22px rgba(0,0,0,.22);
    }

    .hero-media{
      display:flex;
      justify-content:flex-start;
      width: 566.667px;
      height: 340px;
    }
    .hero-img{
      width:100%;
      max-width:390px;
      height:auto;
      display:block;
      object-fit:cover;
    }

    /* section titles */
    .sec{
      padding:22px 0 0;
    }
    .sec-title{
      text-align:center;
      margin:0;
      font-weight:900;
      font-size:22px;
      letter-spacing:-.2px;
    }
    .sec-sub{
      text-align:center;
      margin:6px 0 0;
      font-size:18px;
      color:var(--muted);
    }

    /* steps */
    .steps{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:26px;
      justify-items:center;
      margin:22px 0 12px;
    }
    .step{
      text-align:center;
      max-width:240px;
    }
    .step-num{
      width:38px;height:38px;
      border-radius:999px;
      display:grid;
      place-items:center;
      background:var(--ram-blue);
      color:#fff;
      font-weight:900;
      margin:0 auto 10px;
      font-size:14px;
    }
    .step-title{
      margin:0;
      font-weight:900;
      font-size:22px;
    }
    .step-desc{
      margin:6px 0 0;
      font-size:18px;
      color:var(--text);
      line-height:1.55;
      opacity:.9;
    }

    /* service cards */
    .cards{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:20px;
      margin:24px 0 10px;
    }
    .card{
      background:#fff;
      border-radius:12px;
      text-align:center;
    }
    .card img{
        display: inline-block; /* หรือ inline */
        text-align: center; /* ใช้ร่วมกับ parent */
    }
    .card-img{
      /* width:100%;
      height:190px; */
      min-width: 336px;
        max-width: 388px;
        width: 362.667px;
        height: 486px;
      border-radius:12px;
      border:1px solid var(--line);
      object-fit:cover;
      display:block;
    }
    .card-title{
      margin:12px 0 2px;
      font-weight:900;
      font-size:22px;
    }
    .card-desc{
      margin:0;
      color:var(--muted);
      font-size:18px;
      line-height:1.6;
    }

    /* CTA block */
    .cta{
      text-align:center;
      padding:28px 0 28px;
    }
    .cta-title{
      margin:0;
      font-weight:900;
      font-size:26px;
      letter-spacing:-.2px;
    }
    .cta-sub{
      margin:6px 0 14px;
      color:var(--muted);
      font-size:18px;
    }
    .cta .btn{
      padding:11px 18px;
      border-radius:6px;
    }

    /* blue strip feature cards */
    .blue-strip{
      margin-top:6px;
      background:var(--ram-blue);
      padding:22px 0 24px;
    }
    .blue-inner{
      max-width:var(--container);
      margin:0 auto;
      padding:0 22px;
    }
    .features{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
    }
    .feature{
      background:#fff;
      border-radius:8px;
      padding:12px 12px;
      display:flex;
      gap:10px;
      align-items:flex-start;
      box-shadow: 0 10px 16px rgba(0,0,0,.12);
    }
    .f-ic{
      width:34px;height:34px;
      border-radius:8px;
      display:grid;
      place-items:center;
      background: rgba(38,181,231,.18);
      border: 1px solid rgba(38,181,231,.25);
      flex:0 0 auto;
    }
    .f-ic svg{ width:18px;height:18px; }
    .f-title{
      margin:0;
      font-weight:900;
      font-size:18px;
      line-height:1.3;
    }
    .f-desc{
      margin:4px 0 0;
      color:var(--muted);
      font-size:16px;
      line-height:1.45;
    }

    .rq-step {
        max-width: 940px !important;
        text-align: start;
    }

    /* responsive */
    @media (max-width: 920px){
      .hero{ grid-template-columns:1fr; gap:18px; }
      .hero-media{ justify-content:center; }
      .corner-shape{ width:78px; height:78px; }
      .hero-title .checkup{ font-size:54px; }
      .hero-title .ramquiz{ font-size:40px; }
    }
    @media (max-width: 430px) {
        .hero-media{
            display:flex;
            justify-content:flex-start;
        }
        .hero-media img{
            width: 331px;
            justify-content:center;
            height: 340px;
        }
        .card{
            text-align: center;
        }
        .card-img{
            justify-content:center;
            height:210px;
            width: 331px;
            display: initial;
        }

        .hero-sub{
            max-width: 350px;
        }
    }
    @media (max-width: 820px){
      .steps, .cards, .features{ grid-template-columns:1fr; }
      .cards{ gap:16px; }
    }


    /* =========================
   RAM QUIZ - FORM PAGE
   ใช้ร่วมกับ landing CSS ได้
========================= */


   /* base container */
    .rq-page{
      max-width: var(--container);
      margin: 0 auto;
      padding: 18px 22px 0;
      padding-bottom: 140px !important;
    }



    /* card base */
    .rq-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:12px;
      box-shadow: 0 10px 20px rgba(16,24,40,.08);
    }

    /* doctor card */
    .rq-doctor{
      display:flex;
      align-items:center;
      gap:16px;
      padding: 18px;
      margin: 12px 0 18px;
    }
    .rq-avatar{
      width:74px;
      height:74px;
      border-radius:50%;
      display:grid;
      place-items:center;
      overflow:hidden;
      flex:0 0 auto;
    }
    .rq-avatar img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .rq-doc-body{ flex:1; }
    .rq-doc-title{
      margin:0 0 8px;
      font-size:18px;
      font-weight:900;
      color: var(--ram-blue);
      text-align:center;
    }
    .rq-bubble{
      display:block;
      background: var(--ram-cyan);
      color:#fff;
      padding: 10px 14px;
      border-radius:10px;
      font-size:16px;
      font-weight:700;
      line-height:1.35;
      text-align:center;
      max-width: 460px;
      margin: 0 auto;
    }

    /* form card */
    .rq-form{
      padding: 20px 18px 18px;
      margin-bottom: 18px;
    }
    .rq-form-head{
      text-align:center;
      margin-bottom: 14px;
    }
    .rq-form-head h2{
      margin:0;
      font-size:18px;
      font-weight:900;
      color: var(--ram-blue);
    }
    .rq-form-head p{
      margin:6px 0 0;
      font-size:16px;
      color:var(--muted);
      text-align: start;
    }

    /* fields */
    .rq-field{ margin: 12px 0; }

    .rq-label{
      display:block;
      font-size:18px;
      font-weight:800;
      color: var(--ram-blue);
      margin: 0 0 8px;
      text-align: start;
    }
    .rq-label .req{ color:#ff3b30; margin-left:4px; }

    .rq-input{
      width:100%;
      height:44px;
      border-radius:8px;
      border:1px solid #d7dfec;
      padding: 0 12px;
      font-size:13px;
      outline:none;
      transition: border-color .12s ease, box-shadow .12s ease;
    }
    .rq-input::placeholder{ color:#9aa4b2; }
    .rq-input:focus{
      border-color: rgba(10,59,214,.55);
      box-shadow: 0 0 0 4px rgba(10,59,214,.10);
    }

    /* actions */
    .rq-form-actions{
      display:flex;
      gap:12px;
      justify-content:space-between;
      margin-top: 18px;
    }
    .rq-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      height:44px;
      padding: 0 16px;
      border-radius:8px;
      font-weight:900;
      font-size:16px;
      text-decoration:none;
      cursor:pointer;
      border:1px solid transparent;
      user-select:none;
      white-space:nowrap;
    }
    .rq-btn-primary{
      background: var(--ram-blue);
      color:#fff;
      box-shadow: 0 10px 18px rgba(10,59,214,.18);
    }
    .rq-btn-primary:hover{ filter: brightness(.98); }
    .rq-btn-outline{
      background:#fff;
      color: var(--ram-blue);
      border-color: rgba(10,59,214,.55);
    }
    .rq-btn-outline:hover{ background: rgba(10,59,214,.05); }

    /* footer bar */
    .rq-footer-bar{
      margin-top: 10px;
      background: var(--ram-blue);
      color:#fff;
      padding: 18px 22px;

      position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
    }
    .rq-footer-inner{
      max-width: var(--container);
      margin:0 auto;
      padding: 0 22px;
      position:relative;
    }
    /* small diagonal accent (เหมือนภาพมีเส้นเฉียง) */
    .rq-footer-inner::after{
      content:"";
      position:absolute;
      right:22px;
      top:-18px;
      width:120px;height:36px;
      background: rgba(255,255,255,.12);
      clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%);
    }

    .rq-footer-title{
      font-weight:900;
      font-size:14px;
      margin:0;
    }
    .rq-footer-sub{
      margin:4px 0 0;
      font-size:11px;
      opacity:.9;
    }
    .rq-form-title {
        font-size: 42px;
        color: var(--ram-blue);
    }

    /* mobile */
    @media (max-width: 560px){
      .rq-form-title{ font-size:42px; color: var(--ram-blue);}
      .rq-doctor{ padding: 16px; }
      .rq-doc-title{ text-align:center; }
      .rq-form-actions{ flex-direction:column; }
      .rq-btn{ width:100%; }
      .rq-footer-inner::after{ display:none; }
    }



    /* =========================
   RESULT PAGE (append to ram-quiz.css)
========================= */
.rq-result-page{ padding-bottom: 20px; }
.rq-result-header{ padding-top: 6px; }

/* top tabs */
.rq-tabs{
  display:flex;
  justify-content:center;
  gap:12px;
  margin: 22px 0 18px;
}
.rq-tab{
  min-width: 160px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(10,59,214,.18);
  background: #fff;
  color: var(--ram-blue);
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 12px 20px rgba(16,24,40,.10);
}
.rq-tab.is-active{
  background: var(--ram-blue);
  color: #fff;
  border-color: var(--ram-blue);
}

/* tab panels */
.rq-tabpanel{ display:none; }
.rq-tabpanel.is-active{ display:block; }

.rq-block{
  margin: 18px 0;
  padding: 0;
  overflow:hidden;
}
.rq-block__head{
  background: rgba(10,59,214,.10);
  padding: 14px 16px;
}
.rq-block__title{
  color: var(--ram-blue);
  font-weight: 900;
  font-size: 25px;
}

/* profile */
.rq-profile{
  padding: 18px 16px 18px;
  text-align:center;
}
.rq-avatar2{
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--ram-blue);
  display:grid;
  place-items:center;
  margin: 4px auto 10px;
  box-shadow: 0 14px 22px rgba(10,59,214,.18);
}
.rq-avatar2 svg{ width:46px;height:46px; }

.rq-profile__name{
  font-weight: 900;
  font-size: 22px;
  color: var(--ram-blue);
  margin-top: 8px;
}
.rq-profile__meta{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  color: #111;
  font-size: 15px;
  margin: 6px 0 14px;
  font-weight: 600;
}
.rq-profile__meta .dot{ color: #c7cdd8; }

.rq-profile-cards{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
  margin-top: 6px;
}
.rq-mini{
  background: var(--ram-blue);
  border-radius: 10px;
  padding: 10px 10px;
  color:#fff;
  text-align:left;
  box-shadow: 0 12px 18px rgba(10,59,214,.16);
}
.rq-mini__label{
  font-size: 16px;
  opacity: .9;
  font-weight: 700;
}
.rq-mini__value{
  margin-top: 4px;
  font-size: 14px;
  font-weight: 900;
}

/* article */
.rq-article{ padding: 18px 16px 16px; }
.rq-article__h{
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 20px;
}
.rq-article__grid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  align-items:start;
}
.rq-ill{
  width:100%;
  height:auto;
  border-radius: 12px;
  display:block;
}
.rq-article__text{
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}
.rq-article__text p{ margin: 0 0 10px; }

/* long text blocks */
.rq-longtext{
  padding: 16px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}
.rq-longtext p{ margin: 0 0 10px; }

/* mid tabs (same design but smaller) */
.rq-midtabs{
  display:flex;
  justify-content:center;
  gap:12px;
  margin: 10px 0 18px;
}
.rq-midtab{
  min-width: 150px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(10,59,214,.18);
  background: #fff;
  color: var(--ram-blue);
  font-weight: 900;
  font-size: 14px;
  cursor:pointer;
  box-shadow: 0 10px 18px rgba(16,24,40,.10);
}
.rq-midtab.is-active{
  background: var(--ram-blue);
  color:#fff;
  border-color: var(--ram-blue);
}

/* blue callout */
.rq-callout{
  background: var(--ram-blue);
  color:#fff;
  padding: 16px;
  display:flex;
  gap:16px;
  align-items:center;
}
.rq-callout__logo .logo .ram{ color:#fff; }
.rq-callout__logo .logo .hospital{ color:#cfefff; }
.rq-callout__logo .logo .ram::after{ background:#cfefff; }

.rq-callout__title{
  font-weight: 900;
  font-size: 36px;
}
.rq-callout__sub{
  margin-top: 2px;
  opacity: .9;
  font-size: 24px;
}
.rq-callout__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top: 10px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background:#fff;
  color: var(--ram-blue);
  font-weight: 900;
  font-size: 21px;
  text-decoration:none;
}

@media (max-width: 430px) {
    /* Banner */
    .rq-callout{
        height: 120px;
        padding: 0;
    }
    .rq-callout__title {
        font-size: 17px;
    }
    .rq-callout__sub{
        font-size: 16px;
    }
    .logo {
        width:110px;
    }
    .rq-callout__btn {
        font-size: 16px;
        height: 29px;
    }
}

/* actions bottom */
.rq-actions2{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
  padding: 18px 0 8px;
}
.rq-share{
  width:min(360px, 100%);
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius: 10px;
  background: #0B3BD7;
  color:#fff;
  text-decoration:none;
  font-weight: 900;
  box-shadow: 0 14px 22px rgba(10,59,214,.18);
}
.rq-share__ic{
  width:22px; height:22px;
  border-radius: 6px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.18);
  font-weight: 900;
}
.rq-backhome{
  width:min(240px, 100%);
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  border: 1px solid rgba(10,59,214,.55);
  color: var(--ram-blue);
  text-decoration:none;
  font-weight: 900;
  background:#fff;
}

/* responsive */
@media (max-width: 880px){
  .rq-profile-cards{ grid-template-columns: repeat(2, 1fr); }
  .rq-article__grid{ grid-template-columns: 1fr; }
  .rq-ill{ max-width: 360px; margin: 0 auto; }
}
@media (max-width: 520px){
  .rq-tab, .rq-midtab{ min-width: 140px; }
}



/* =========================
   FORM PAGE (Disease/Behavior) - append to ram-quiz.css
========================= */

.rq-form-page{ padding-bottom: 20px; }

.rq-seg{ display:flex; justify-content:center; margin:22px 0 18px; }
.rq-seg__wrap{
  background:#fff;
  border:1px solid rgba(10,59,214,.14);
  border-radius:999px;
  padding:8px;
  box-shadow:0 14px 24px rgba(16,24,40,.10);
  display:flex;
  gap:8px;
  width:min(720px, 100%);
}
.rq-seg__btn{
  flex:1;
  height:42px;
  border-radius:999px;
  border:0;
  background:transparent;
  color:var(--ram-blue);
  font-weight:900;
  font-size:13px;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* .rq-seg__btn.is-active{
  background:var(--ram-blue) !important;
  color:#fff !important;
} */

.rq-seg__btn.is-active,
.rq-seg__btn.is-active:hover,
.rq-seg__btn.is-active:focus,
.rq-seg__btn.is-active:focus-visible,
.rq-seg__btn.is-active:active{
  background:var(--ram-blue) !important;
  color:#fff !important;
}
.rq-formwrap{ padding: 16px; margin: 0 0 18px; }
.rq-formtitle{ text-align:center; padding: 18px 10px 10px; }
.rq-formtitle h1{ margin:0; font-size:22px; font-weight:900; color:var(--ram-blue); }
.rq-underline{
  width:52px;height:3px;border-radius:3px;
  background:var(--ram-blue);
  margin:10px auto 0;
}

.rq-q{ padding: 18px 8px 8px; }
.rq-q__head{ margin:0 0 12px; font-weight:900; color:var(--ram-blue); font-size:14px; }

.rq-select{
  width:100%;
  height:46px;
  border-radius:10px;
  border:1px solid #d7dfec;
  padding:0 12px;
  font-weight:800;
  font-size:13px;
  outline:none;
  background:#fff;
}
.rq-select:focus{
  border-color: rgba(10,59,214,.55);
  box-shadow: 0 0 0 4px rgba(10,59,214,.10);
}

.rq-checkgrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
  margin-top: 12px;
}
.rq-checkgrid--small{ grid-template-columns: repeat(2, 1fr); }

/* custom checkbox card */
.rq-check{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 11px 12px;
  border: 1px solid #d7dfec;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  user-select:none;
}
.rq-check input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.rq-check__box{
  width:18px;height:18px;
  border-radius:5px;
  border:1.6px solid #cbd5e1;
  display:inline-block;
  flex:0 0 auto;
  background:#fff;
}
.rq-check__text{
  font-size:12px;
  color:#111;
  font-weight:700;
  line-height:1.35;
}
.rq-check input:checked + .rq-check__box{
  border-color: var(--ram-blue);
  background: var(--ram-blue);
  box-shadow: 0 10px 18px rgba(10,59,214,.16);
}
.rq-check input:checked + .rq-check__box::after{
  content:"";
  display:block;
  width:10px;height:10px;
  margin:3px auto 0;
  border-radius:3px;
  background:#fff;
}

/* bottom nav buttons */
.rq-navbtns{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  padding: 18px 8px 6px;
  margin-top: 10px;
}
.rq-navbtn{
  height:48px;
  border-radius:10px;
  font-weight:900;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  cursor:pointer;
}
.rq-navbtn--outline{
  background:#fff;
  color: var(--ram-blue);
  border: 1px solid rgba(10,59,214,.55);
}
.rq-navbtn--primary{
  background: var(--ram-blue);
  color:#fff;
  border: 1px solid var(--ram-blue);
  box-shadow: 0 14px 22px rgba(10,59,214,.18);
}

@media (max-width: 820px){
  .rq-checkgrid{ grid-template-columns: 1fr; }
  .rq-navbtns{ grid-template-columns: 1fr; }
}

/*----------------------------------------------------- */

/* ==========
   Container
   ========== */
:root{
  --gutter-x: 24px;      /* ระยะห่างซ้ายขวาระหว่างคอลัมน์ */
  --gutter-y: 0px;       /* ระยะห่างบนล่างระหว่างแถว (ถ้าจะใช้) */
  --container-pad: 16px; /* padding ขอบจอ */
}

/* container แบบ fixed width ตาม breakpoint */
.container{
  width:100%;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  margin-left:auto;
  margin-right:auto;
}

/* container แบบเต็มจอ */
.container-fluid{
  width:100%;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  margin-left:auto;
  margin-right:auto;
}

/* widths คล้าย bootstrap */
@media (min-width: 576px){ .container{ max-width: 540px; } }
@media (min-width: 768px){ .container{ max-width: 720px; } }
@media (min-width: 992px){ .container{ max-width: 960px; } }
@media (min-width: 1200px){ .container{ max-width: 1140px; } }
@media (min-width: 1400px){ .container{ max-width: 1320px; } }


/* =====
   Row
   ===== */
.row{
  display:flex;
  flex-wrap:wrap;
  margin-left: calc(var(--gutter-x) / -2);
  margin-right: calc(var(--gutter-x) / -2);
  margin-top: calc(var(--gutter-y) * -1);
}

/* =====
   Col
   ===== */
.col,
[class^="col-"],
[class*=" col-"]{
  padding-left: calc(var(--gutter-x) / 2);
  padding-right: calc(var(--gutter-x) / 2);
  margin-top: var(--gutter-y);
  box-sizing:border-box;
}

/* col = auto grow */
.col{
  flex: 1 0 0%;
}

/* col-auto = ตามขนาด content */
.col-auto{
  flex: 0 0 auto;
  width: auto;
}

/* 12-column widths (default = xs) */
.col-1{flex:0 0 auto;width:8.333333%}
.col-2{flex:0 0 auto;width:16.666667%}
.col-3{flex:0 0 auto;width:25%}
.col-4{flex:0 0 auto;width:33.333333%}
.col-5{flex:0 0 auto;width:41.666667%}
.col-6{flex:0 0 auto;width:50%}
.col-7{flex:0 0 auto;width:58.333333%}
.col-8{flex:0 0 auto;width:66.666667%}
.col-9{flex:0 0 auto;width:75%}
.col-10{flex:0 0 auto;width:83.333333%}
.col-11{flex:0 0 auto;width:91.666667%}
.col-12{flex:0 0 auto;width:100%}

/* ============
   Breakpoints
   ============ */

/* sm ≥ 576px */
@media (min-width: 576px){
  .col-sm{flex:1 0 0%}
  .col-sm-auto{flex:0 0 auto;width:auto}
  .col-sm-1{flex:0 0 auto;width:8.333333%}
  .col-sm-2{flex:0 0 auto;width:16.666667%}
  .col-sm-3{flex:0 0 auto;width:25%}
  .col-sm-4{flex:0 0 auto;width:33.333333%}
  .col-sm-5{flex:0 0 auto;width:41.666667%}
  .col-sm-6{flex:0 0 auto;width:50%}
  .col-sm-7{flex:0 0 auto;width:58.333333%}
  .col-sm-8{flex:0 0 auto;width:66.666667%}
  .col-sm-9{flex:0 0 auto;width:75%}
  .col-sm-10{flex:0 0 auto;width:83.333333%}
  .col-sm-11{flex:0 0 auto;width:91.666667%}
  .col-sm-12{flex:0 0 auto;width:100%}
}

/* md ≥ 768px */
@media (min-width: 768px){
  .col-md{flex:1 0 0%}
  .col-md-auto{flex:0 0 auto;width:auto}
  .col-md-1{flex:0 0 auto;width:8.333333%}
  .col-md-2{flex:0 0 auto;width:16.666667%}
  .col-md-3{flex:0 0 auto;width:25%}
  .col-md-4{flex:0 0 auto;width:33.333333%}
  .col-md-5{flex:0 0 auto;width:41.666667%}
  .col-md-6{flex:0 0 auto;width:50%}
  .col-md-7{flex:0 0 auto;width:58.333333%}
  .col-md-8{flex:0 0 auto;width:66.666667%}
  .col-md-9{flex:0 0 auto;width:75%}
  .col-md-10{flex:0 0 auto;width:83.333333%}
  .col-md-11{flex:0 0 auto;width:91.666667%}
  .col-md-12{flex:0 0 auto;width:100%}
}

/* lg ≥ 992px */
@media (min-width: 992px){
  .col-lg{flex:1 0 0%}
  .col-lg-auto{flex:0 0 auto;width:auto}
  .col-lg-1{flex:0 0 auto;width:8.333333%}
  .col-lg-2{flex:0 0 auto;width:16.666667%}
  .col-lg-3{flex:0 0 auto;width:25%}
  .col-lg-4{flex:0 0 auto;width:33.333333%}
  .col-lg-5{flex:0 0 auto;width:41.666667%}
  .col-lg-6{flex:0 0 auto;width:50%}
  .col-lg-7{flex:0 0 auto;width:58.333333%}
  .col-lg-8{flex:0 0 auto;width:66.666667%}
  .col-lg-9{flex:0 0 auto;width:75%}
  .col-lg-10{flex:0 0 auto;width:83.333333%}
  .col-lg-11{flex:0 0 auto;width:91.666667%}
  .col-lg-12{flex:0 0 auto;width:100%}
}

/* xl ≥ 1200px */
@media (min-width: 1200px){
  .col-xl{flex:1 0 0%}
  .col-xl-auto{flex:0 0 auto;width:auto}
  .col-xl-1{flex:0 0 auto;width:8.333333%}
  .col-xl-2{flex:0 0 auto;width:16.666667%}
  .col-xl-3{flex:0 0 auto;width:25%}
  .col-xl-4{flex:0 0 auto;width:33.333333%}
  .col-xl-5{flex:0 0 auto;width:41.666667%}
  .col-xl-6{flex:0 0 auto;width:50%}
  .col-xl-7{flex:0 0 auto;width:58.333333%}
  .col-xl-8{flex:0 0 auto;width:66.666667%}
  .col-xl-9{flex:0 0 auto;width:75%}
  .col-xl-10{flex:0 0 auto;width:83.333333%}
  .col-xl-11{flex:0 0 auto;width:91.666667%}
  .col-xl-12{flex:0 0 auto;width:100%}
}

    /* สไตล์เมื่อช่องอินพุตว่าง */
.rq-input.is-invalid,
.rq-textarea.is-invalid,
.rq-select.is-invalid {
    border-color: #dc3545 !important;
    background-color: #fff8f8;
}

/* ข้อความแจ้งเตือนใต้ Input */
.rq-error-msg {
    color: #dc3545;
    font-size: 0.85rem;
    margin-top: 5px;
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Animation ให้ข้อความค่อยๆ โผล่ */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* สั่นเล็กน้อยเวลาไม่ได้กรอก (เลือกใช้ได้) */
.shake {
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* ซ่อนตัวเดิม */
.rq-check-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* กล่องสีน้ำเงิน (พื้นหลัง) */
.rq-check__ui {
    width: 22px;
    height: 22px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    display: inline-flex; /* ใช้ inline-flex เพื่อจัดกลาง */
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

/* ตัวไอคอน SVG (ติ๊กถูก) */
.svg-check-icon {
    width: 14px;
    height: 14px;
    display: block; /* บังคับให้แสดงเป็น block ภายใน flex */
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}

/* --- จุดที่ทำให้ติ๊กถูกปรากฏ --- */

/* เมื่อคลิก: เปลี่ยนสีกล่องเป็นน้ำเงิน */
.rq-check-hidden:checked ~ .rq-check__ui {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

/* เมื่อคลิก: สั่งให้ SVG แสดงผลและขยายตัว */
.rq-check-hidden:checked ~ .rq-check__ui .svg-check-icon {
    opacity: 1 !important;
    transform: scale(1) !important;
}