/* หน้าแรกส่วนบนตามแบบ A3: hero, แถบกิจกรรม, แถวเวลาเข้าชม
   พื้นเรียบ ไม่ใช้เงา เส้นขอบ หรือพื้นโปร่ง เมนูเดิมเปลี่ยนแค่พื้นขาว */

.hero.a3,
.a3-bar,
.a3-info {
  font-family: "LINE Seed Sans TH", system-ui, sans-serif;
}

/* ===== เมนูพื้นขาว ===== */
.logo-v,
body.scrolled .logo-v {
  background: #fff;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.logo-v .f,
body.scrolled .logo-v .f {
  color: #7d4485;
}

body:not(.scrolled) .logo-v img,
body.scrolled .logo-v img {
  filter: none;
}

.menu .side {
  box-shadow: none;
}

.menu .side::before,
.menu .drop {
  background: #fff;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* จอที่ไม่กว้างพอให้เมนูแนวตั้งกับชื่อบรรทัดเดียวอยู่ร่วมกัน ให้หุบเมนูเข้าโลโก้ */
@media (max-width: 1100px) {
  .logo-v {
    transform: none;
    width: 52px;
    height: 182px;
  }

  .menu {
    left: 60px;
    right: 16px;
  }

  .menu .menu-toggle {
    display: block;
    top: 140px;
    left: calc(var(--g) - 60px);
    width: 52px;
    height: 36px;
  }

  .menu .menu-toggle::after {
    display: none;
  }

  .menu .menu-toggle::before {
    right: auto;
    bottom: auto;
    left: 11px;
    top: 2px;
    box-shadow: none;
  }

  .menu .side {
    display: none;
    width: min(340px, 100%);
    max-height: calc(100vh - 120px);
    overflow: auto;
    background: #fff;
  }

  .menu .side.expanded {
    display: block;
  }

  .menu .side::before {
    display: none;
  }

  .menu .drop {
    position: static;
    width: auto;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .menu .drop.open {
    display: block;
  }

  .menu .drop-in {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 4px 14px 12px;
  }

  .menu .drop-intro h3,
  .menu .drop-intro p,
  .menu .feat {
    display: none;
  }

  .menu .cols {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ===== hero เต็มจอแรก วิดีโอไปจบที่สารบัญ ===== */
/* hero + กิจกรรม + เวลาเปิดปิด รวมเป็นจอแรกเดียว ชื่อกินที่ว่างที่เหลือ */
.a3-stage {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

.hero.a3 {
  position: static;
  flex: 1 0 auto;
  height: auto;
  min-height: 0;
  display: flex;
  align-items: center;
  overflow: visible;
  background: transparent;
  color: #2b2430;
}

.hero.a3 .a3-hv,
.hero.a3 .a3-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  /* ขอบล่างจางหายเข้าพื้นหลังลายต้นไม้ ไม่เห็นเป็นเส้นตัดเหนือสารบัญ */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent);
}

.hero.a3 .a3-hv {
  object-fit: cover;
}

.hero.a3 .a3-veil {
  background: #fbf8fc;
  opacity: .86;
}

.a3-hin {
  position: relative;
  z-index: 2;
  width: min(100%, 1320px);
  margin: 0 auto;
  padding: 110px 32px 32px 300px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 40px;
  align-items: center;
}

/* ชื่ออังกฤษยาวกว่าไทย ถ้าไม่ตัดบรรทัดจะวิ่งไปทับโปสเตอร์ด้านขวา */
.a3-ht {
  min-width: 0;
}

.hero.a3 h1 {
  position: static !important;
  inset: auto !important;
  margin: 6px 0 14px;
  font-family: "LINE Seed Sans TH", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.6rem, 2.55vw, 2.5rem) !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-align: inherit !important;
  color: #2b2430;
  pointer-events: auto;
}

.a3-k {
  color: #9e5da5;
  font-weight: 700;
  letter-spacing: .06em;
  font-size: .95rem;
}

.a3-l1 {
  display: inline-block;
  white-space: nowrap;
}

.hero.a3 h1.a3-en .a3-l1 {
  display: block;
  white-space: normal;
}

.a3-l2 {
  display: block;
  margin-top: 4px;
  color: #7d4485;
  font-size: .72em;
  font-weight: 700;
}

.a3-d {
  max-width: 30em;
  color: #6b6070;
}

.a3-bt {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.a3-bt a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 24px;
  border-radius: 99px;
  background: #9e5da5;
  color: #fff;
  font-weight: 700;
  transition: transform .2s;
}

.a3-bt a .ic {
  width: 18px;
  height: 18px;
  flex: none;
}

.a3-bt a:hover {
  transform: translateY(-2px);
}

.a3-bt a.a3-tel {
  background: #fff;
  color: #7d4485;
}

.hero.a3.a3-nob .a3-hin {
  grid-template-columns: 1fr;
  max-width: 860px;
  padding-left: 32px;
  text-align: center;
}

.hero.a3.a3-nob .a3-d {
  margin-inline: auto;
}

.hero.a3.a3-nob .a3-bt {
  justify-content: center;
}

/* ปุ่มเลื่อนอยู่ใต้รูป รูปจึงได้ความกว้างเต็มโซน */
.a3-pz {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.a3-pz[hidden] {
  display: none;
}

/* 16:9 ตามขนาดรูปประกาศที่อัปโหลด (1920×1080) รูปจึงไม่ถูกตัดขอบ */
.a3-stack {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 9;
}

.a3-stack::before {
  content: "";
  position: absolute;
  inset: 10px -8px -10px 8px;
  border-radius: 8px;
  background: #9e5da5;
  opacity: .35;
  transform: rotate(3deg);
}

.a3-sl {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  opacity: 0;
  transform: rotate(-1.5deg) translateY(12px);
  transition: opacity .5s, transform .5s;
}

.a3-sl.on {
  opacity: 1;
  transform: rotate(-1.5deg);
}

.a3-sl img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* สไลด์ที่ซ่อนซ้อนอยู่ด้านบน ห้ามรับคลิกแทนใบที่เห็น */
.a3-sl:not(.on) {
  pointer-events: none;
}

.a3-zoom {
  display: block;
  padding: 0;
  border: 0;
  cursor: zoom-in;
}

.a3-zoom:focus-visible {
  outline: 2px solid #7d4485;
  outline-offset: 3px;
}

/* ===== ดูรูปเต็ม ===== */
.a3-lb-open {
  overflow: hidden;
}

.a3-lb {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 56px 24px 24px;
  border: 0;
  background: transparent;
}

.a3-lb::backdrop {
  background: rgb(43 36 48 / .88);
}

.a3-lb[open] {
  display: grid;
  place-items: center;
}

.a3-lb img {
  max-width: 100%;
  max-height: calc(100vh - 80px);
  border-radius: 8px;
  object-fit: contain;
}

.a3-lb-x {
  position: fixed;
  top: 16px;
  right: 16px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 99px;
  background: #fff;
  color: #2b2430;
  font: 700 .95rem "LINE Seed Sans TH", system-ui, sans-serif;
  cursor: pointer;
}

.a3-lb-x:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.a3-rail {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 14px;
  border-radius: 8px;
  background: #fff;
  color: #7d4485;
  font-size: .75rem;
  font-weight: 700;
}

.a3-z {
  flex: 1;
  font-size: .85rem;
  white-space: nowrap;
}

.a3-n {
  margin-right: 4px;
  white-space: nowrap;
}

.a3-n small {
  margin-left: 3px;
  color: #6b6070;
}

.a3-rail button,
.a3-ar button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f4ecf5;
  color: #7d4485;
  font: 700 .8rem/1 "LINE Seed Sans TH", system-ui, sans-serif;
  cursor: pointer;
}

.hero.a3 a:focus-visible,
.a3-bar a:focus-visible,
.a3-bar button:focus-visible,
.a3-rail button:focus-visible {
  outline: 2px solid #7d4485;
  outline-offset: 2px;
}

/* ===== แถบกิจกรรม ===== */
.a3-bar {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  max-width: 1320px;
  width: calc(100% - 64px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 8px;
  background: rgb(235 220 238 / .55);
  color: #2b2430;
}

.a3-lead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: rgb(125 68 133 / .88);
  color: #fff;
}

.a3-cal {
  flex: 0 0 62px;
  width: 62px;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  color: #2b2430;
  text-align: center;
}

.a3-cal span {
  display: block;
  padding: 1px 0;
  background: #9e5da5;
  color: #fff;
  font-size: .75rem;
}

.a3-cal b {
  display: block;
  color: #7d4485;
  font-size: 1.3rem;
  line-height: 1.3;
}

.a3-cal small {
  display: block;
  padding-bottom: 3px;
  font-size: .75rem;
}

.a3-lead h2 {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
}

.a3-lead p {
  margin-top: 4px;
  font-size: .75rem;
}

.a3-ar {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px 30px;
  gap: 8px;
  align-items: center;
  padding: 14px 16px;
}

.a3-ar button {
  background: #fff;
}

/* ไม่มีข่าวกิจกรรม รางถูกซ่อนไว้รอการ์ดการจอง display:grid ทับ hidden เลยต้องบอกเอง */
.a3-ar[hidden] {
  display: none;
}

/* ไม่มีข่าวกิจกรรม รางถูกซ่อนไว้รอการ์ดการจอง display:grid ทับ hidden เลยต้องบอกเอง */
.a3-ar[hidden] {
  display: none;
}

/* ขอบรางจางเฉพาะฝั่งที่ยังมีการ์ดซ่อนอยู่ home-strip.js สลับ class ตามตำแหน่ง */
.a3-vp {
  --fade-l: 0px;
  --fade-r: 0px;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l),
    #000 calc(100% - var(--fade-r)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fade-l),
    #000 calc(100% - var(--fade-r)), transparent);
}

.a3-vp.fade-l {
  --fade-l: 48px;
}

.a3-vp.fade-r {
  --fade-r: 48px;
}

.a3-tk {
  display: flex;
  gap: 10px;
  transition: transform 1.1s cubic-bezier(.45, 0, .2, 1);
}

/* การ์ดแนวนอน รูปเล็กซ้าย ข้อความขวา ให้แถบเตี้ยลงแต่ยังเห็นได้หลายงาน */
.a3-ec {
  display: flex;
  flex: 0 0 360px;
  flex-direction: row;
  align-items: center;
  width: 360px;
  overflow: hidden;
  border-radius: 8px;
  background: rgb(255 255 255 / .72);
}

/* รูปแนวนอนชิดขอบการ์ด ยืดเต็มความสูงการ์ด ส่วนเกินตัดด้วย object-fit */
/* ตัวครอบรูปที่ home-strip.js ใส่ ใช้ contents ให้รูปยังเป็นลูกของ flex ขนาดทุกจอจึงไม่เปลี่ยน */
.a3-pic {
  display: contents;
}

.a3-pic img {
  cursor: pointer;
}

.a3-pic.a3-zoom img {
  cursor: zoom-in;
}

.a3-ec img,
.a3-thumb {
  display: block;
  flex: 0 0 160px;
  align-self: stretch;
  width: 160px;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #f4ecf5;
}

.a3-eb {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-self: stretch;
  gap: 2px;
  min-width: 0;
  padding: 8px 12px;
}

.a3-dt {
  color: #9e5da5;
  font-size: .75rem;
}

.a3-dt b {
  font-size: .85rem;
}

/* ชื่อยาวตัดที่สองบรรทัด การ์ดทุกใบจะได้สูงเท่ากัน */
.a3-ec h3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.45;
}

.a3-ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}

.a3-due {
  padding: 0 7px;
  border-radius: 99px;
  background: #f4ecf5;
  color: #7d4485;
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}

.a3-due.now {
  background: #9e5da5;
  color: #fff;
}

.a3-due.past {
  background: #eee;
  color: #888;
}

.a3-ft a {
  color: #7d4485;
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}

/* กล่องจองเข้าชม แคบกว่าการ์ดกิจกรรม จัดกลางแบบป้ายรอบ ป้ายสีเขียวแยกจากข่าวกิจกรรม */
.a3-ec.a3-bk {
  flex: 0 0 190px;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  width: 190px;
  padding: 8px 12px;
  text-align: center;
}

.a3-bk-tag {
  padding: 0 8px;
  border-radius: 99px;
  background: #2f7a5b;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
}

.a3-bk h3 {
  max-width: 100%;
  -webkit-line-clamp: 1;
  color: #7d4485;
}

.a3-bk-time {
  font-size: .8rem;
  font-weight: 700;
}

.a3-bk-org {
  max-width: 100%;
  overflow: hidden;
  color: #555;
  font-size: .72rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.a3-bk-ft {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-size: .72rem;
}

.a3-bk-ft a {
  color: #7d4485;
  font-weight: 700;
  white-space: nowrap;
}

.a3-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
}

.a3-empty[hidden] {
  display: none;
}

.a3-empty p {
  font-size: .92rem;
}

.a3-empty b {
  color: #7d4485;
  font-size: 1.05rem;
}

.a3-empty .a3-bt {
  margin-top: 0;
}

.a3-empty .a3-book {
  background: #7d4485;
  color: #fff;
}

.a3-empty .a3-tel {
  background: #fff;
  color: #7d4485;
}

/* ===== แถวเวลาเข้าชม ===== */
/* เว้นล่าง 56px ให้พ้นป้าย Scroll กับปุ่มวิดีโอที่ตรึงมุมล่างจอ */
.a3-info {
  background: transparent;
  padding: 12px 0 56px;
}

#fz-line1 {
  display: none;
}

.a3-info-in {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: calc(100% - 64px);
  max-width: 1320px;
  margin: 0 auto;
}

/* พื้นขาวโปร่งพอเห็นลายพื้นหลัง แต่ยังกันวิดีโอไม่ให้กลืนตัวหนังสือ */
.a3-it {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  background: rgb(255 255 255 / .6);
}

.a3-it i {
  display: grid;
  flex: 0 0 38px;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #9e5da5;
}

/* หัวข้อเล็ก → ข้อมูลหลักตัวใหญ่ → หมายเหตุ ให้กวาดตาเจอคำตอบก่อน */
.a3-it p {
  color: #3d3442;
  font-size: .9rem;
}

.a3-it-t {
  color: #7d4485;
  font-size: .85rem;
  font-weight: 700;
}

.a3-it .a3-big {
  color: #2b2430;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
}

.a3-it .a3-note {
  color: #6b6070;
  font-size: .85rem;
}

.a3-note b {
  color: #7d4485;
}

/* ตารางราคา เทียบไทย/ต่างชาติได้ทันทีแทนข้อความยาวคั่นจุด */
.a3-fee {
  margin: 0 0 2px;
  border-collapse: collapse;
  font-size: .9rem;
}

.a3-fee th,
.a3-fee td {
  padding: 0 14px 0 0;
  line-height: 1.4;
  text-align: left;
}

.a3-fee thead th {
  color: #6b6070;
  font-size: .8rem;
  font-weight: 400;
}

.a3-fee tbody th {
  color: #3d3442;
  font-weight: 400;
}

.a3-fee tbody td {
  color: #2b2430;
  font-size: 1.05rem;
  font-weight: 700;
}

@media (max-width: 1240px) {
  .a3-hin,
  .hero.a3.a3-nob .a3-hin {
    grid-template-columns: 1fr;
  }

  .a3-pz {
    max-width: 520px;
  }

  .hero.a3.a3-nob .a3-pz {
    margin-inline: auto;
  }
}

@media (max-width: 1100px) {
  .a3-hin,
  .hero.a3.a3-nob .a3-hin {
    padding: 200px 32px 32px;
  }
}

/* จอโน้ตบุ๊กเตี้ย บีบระยะให้แถวเวลาเปิดปิดยังอยู่ในจอแรก */
@media (max-height: 820px) and (min-width: 761px) {
  .a3-hin,
  .hero.a3.a3-nob .a3-hin {
    padding-top: 92px;
    padding-bottom: 20px;
  }

  .a3-ec {
    flex-basis: 320px;
    width: 320px;
  }

  .a3-ec img,
  .a3-thumb {
    flex-basis: 136px;
    width: 136px;
  }

  .a3-info {
    padding: 10px 0 52px;
  }
}

@media (max-height: 820px) and (min-width: 761px) and (max-width: 1100px) {
  .a3-hin,
  .hero.a3.a3-nob .a3-hin {
    padding-top: 190px;
  }
}

@media (max-width: 760px) {
  .scrollhint { display: none; }
  /* 6.2vw ทำให้ชื่อบรรทัดเดียวล้นจอ 360–500 จึงใช้ 4vw ที่ยังไม่ตัดคำ */
  .hero.a3 h1 {
    font-size: 4vw !important;
  }

  .a3-l2 {
    font-size: .8em;
  }

  .a3-hin,
  .hero.a3.a3-nob .a3-hin {
    max-width: none;
    padding: 210px 18px 28px;
    text-align: left;
  }

  .hero.a3.a3-nob .a3-d,
  .hero.a3.a3-nob .a3-bt {
    margin-inline: 0;
    justify-content: flex-start;
  }

  .a3-pz {
    grid-template-columns: 1fr;
    max-width: none;
  }

  /* minmax(0, 1fr) กันคอลัมน์ยืดตามรางการ์ดทั้งแถว จนปุ่มเลื่อนหลุดจอ */
  .a3-bar {
    grid-template-columns: minmax(0, 1fr);
    width: auto;
    margin: 0 14px;
    border-radius: 8px;
  }

  .a3-ar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: 12px;
  }

  .a3-vp {
    flex: 1 0 100%;
    order: -1;
  }

  .a3-info {
    padding: 20px 0 28px;
  }

  .a3-info-in {
    grid-template-columns: 1fr;
    width: auto;
    margin: 0 14px;
    padding: 0;
  }

  .a3-ec {
    flex-basis: 300px;
    width: 300px;
  }

  .a3-ec img,
  .a3-thumb {
    flex-basis: 120px;
    width: 120px;
  }
}

/* ===== มือถือ: hero แบบ 1 (MH1) ===== */
/* วิดีโอคลุมเต็มเป็นพื้นหลัง เนื้อหาเรียงตรงไม่เอียง เป้าแตะ 44px ป้าย/เมตาอย่างน้อย 14px */
@media (max-width: 768px) {
  .hero.a3 .a3-veil {
    opacity: .78;
  }

  /* home-video.js ย้ายวิดีโอมาไว้หลังหัวข้อ ยืดเต็มความกว้างจอ ไม่เป็นกรอบ
     จางมากพอให้ตัวหนังสือเข้มอ่านชัด ขอบบนล่างค่อยๆ หายแทนเส้นตัด */
  .hero.a3 .a3-ht:has(> .a3-hv) {
    position: relative;
    isolation: isolate;
  }

  .hero.a3 .a3-ht > .a3-hv {
    top: -16px;
    bottom: -24px;
    left: -18px;
    width: 100vw;
    height: auto;
    opacity: .16;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 70%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 70%, transparent);
  }

  .hero.a3 h1 {
    margin: 6px 0 4px;
    font-size: 22px !important;
    line-height: 1.35 !important;
  }

  .a3-l1 {
    white-space: normal;
  }

  .a3-l2 {
    margin-top: 2px;
    font-size: 16px;
  }

  .a3-k,
  .a3-d {
    font-size: 14px;
  }

  .a3-hin,
  .hero.a3.a3-nob .a3-hin {
    gap: 14px;
    padding-bottom: 16px;
  }

  .a3-ht .a3-bt {
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 14px;
  }

  .a3-ht .a3-bt a {
    flex: 1;
    justify-content: center;
    padding: 0 12px;
    background: #7d4485;
  }

  .a3-ht .a3-bt a.a3-tel {
    background: #ebdcee;
    white-space: nowrap;
  }

  /* ไอคอนรูปโทรอยู่แล้ว คำนำหน้าทำให้เบอร์ตกบรรทัดบนจอแคบ */
  .a3-tel-label {
    display: none;
  }

  /* การ์ดประกาศวางตรง ไม่มีแผ่นสีซ้อนด้านหลัง */
  .a3-pz {
    gap: 10px;
  }

  .a3-stack::before {
    display: none;
  }

  .a3-sl,
  .a3-sl.on {
    border-radius: 18px;
    transform: none;
  }

  .a3-rail {
    border-radius: 14px;
    font-size: 14px;
  }

  .a3-z {
    font-size: 14px;
  }

  /* ปุ่มใหญ่ 44px แล้ว ไอคอน ‹ › II ต้องโตตามให้มองเห็นบนจอเล็ก */
  .a3-rail button,
  .a3-ar button {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  /* แถบกิจกรรมพื้นทึบสีแบรนด์ การ์ดขาวด้านใน */
  .a3-bar {
    gap: 10px;
    padding: 12px;
    border-radius: 20px;
    background: #7d4485;
  }

  .a3-lead {
    padding: 0;
    background: transparent;
  }

  .a3-lead p,
  .a3-lead a,
  .a3-dt,
  .a3-due,
  .a3-ft a {
    font-size: 14px;
  }

  .a3-ar {
    padding: 0;
  }

  .a3-ec {
    border-radius: 14px;
    background: #fff;
  }

  /* ไม่มีกิจกรรม: ข้อความอยู่บนพื้นม่วงโดยตรง ต้องเป็นสีอ่อนให้อ่านออก */
  .a3-empty {
    padding: 4px 0 0;
    color: #fff;
  }

  .a3-empty b {
    color: #fff;
  }

  .a3-empty .a3-book {
    background: #fff;
    color: #7d4485;
  }

  .a3-empty .a3-tel {
    background: #ebdcee;
  }

  /* H6: แถวเวลาทำการเลื่อนขึ้นพ้นแถบเมนูล่างได้ครบ */
  .a3-info {
    padding-bottom: 24px;
    scroll-margin-bottom: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .a3-sl,
  .a3-tk,
  .a3-bt a {
    transition: none;
  }
}