:root {
  /* 1. bien toan cuc va bang mau */
  --jw-bg: #151821;
  --jw-surf: #20242f;
  --jw-deep: #0e1017;
  --jw-ink: #eceff4;
  --jw-mute: #b4bccb;
  --jw-line: #394055;
  --jw-ruby: #d8849c;
  --jw-mana: #4dabf7;
  --jw-ruby-ink: #151821;

  /* kieu chu va co chu */
  --jw-disp: "Coiny", "Kodchasan", sans-serif;
  --jw-body: "Kodchasan", "Noto Sans Thai", sans-serif;
  --jw-fz-base: 17px;
  --jw-lh-base: 1.8;
  --jw-fz-h1: clamp(28px, 5.4vw, 54px);
  --jw-lh-h1: 1.3;
  --jw-fz-h2: clamp(22px, 3vw, 34px);
  --jw-lh-h2: 1.35;

  /* nhip khoang cach va kich thuoc */
  --jw-space-sec: 56px;
  --jw-w-max: 1320px;
  --jw-pad-desk: 48px;
  --jw-pad-mob: 32px;

  /* vien bong cung va vat goc */
  --jw-b-w: 2px;
  --jw-border: 2px solid var(--jw-line);
  --jw-border-ruby: 2px solid var(--jw-ruby);
  --jw-border-mana: 2px solid var(--jw-mana);
  --jw-shadow: 4px 4px 0 var(--jw-deep);
  --jw-clip-btn: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  --jw-clip-card: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  --jw-clip-scroll: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);

  /* chuyen dong */
  --jw-trans: transform 180ms ease-out, background-color 180ms ease-out;
}

/* 2. reset co ban */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body.jw-body {
  margin: 0;
  padding: 0;
  background-color: var(--jw-bg);
  color: var(--jw-ink);
  font-family: var(--jw-body);
  font-size: var(--jw-fz-base);
  line-height: var(--jw-lh-base);
  min-height: 100vh;
}

body.jw-k-home,
body.jw-k-hub,
body.jw-k-child,
body.jw-k-support,
body.jw-k-404 {
  background-color: var(--jw-bg);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

a {
  color: inherit;
  text-decoration: none;
}

/* 3. bieu tuong va tro giup tiep can */
svg.jw-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

a.jw-skip {
  position: absolute;
  top: -9999px;
  left: 0;
  background-color: var(--jw-ruby);
  color: var(--jw-ruby-ink);
  padding: 12px 20px;
  font-weight: 700;
  font-size: 15px;
  z-index: 100;
  clip-path: var(--jw-clip-btn);
  text-decoration: none;
}

a.jw-skip:focus {
  top: 16px;
  left: 16px;
}

svg.jw-ic {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
  vertical-align: middle;
}

/* 4. thanh dau trang */
header.jw-hd {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--jw-deep);
  border-bottom: var(--jw-border);
  width: 100%;
}

div.jw-hd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  width: min(var(--jw-w-max), calc(100% - var(--jw-pad-desk)));
  margin-inline: auto;
}

a.jw-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

img.jw-logo-img {
  width: 150px;
  height: 40px;
  object-fit: contain;
}

nav.jw-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

a.jw-nav-a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  color: var(--jw-ink);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: var(--jw-trans);
}

a.jw-nav-a:hover {
  color: var(--jw-mana);
  transform: translateY(-2px);
}

div.jw-hd-act {
  display: flex;
  align-items: center;
  gap: 12px;
}

button.jw-burger {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background-color: transparent;
  border: var(--jw-border);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

button.jw-burger span.jw-bar {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--jw-ink);
}

/* 5. ngan keo di dong */
div.jw-drawer {
  display: none;
  background-color: var(--jw-deep);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}

header.jw-hd.jw-open div.jw-drawer {
  display: block;
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  border-bottom: var(--jw-border);
  padding: 20px 24px 32px;
}

div.jw-dr-grp {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
}

p.jw-dr-h {
  font-size: 13px;
  font-weight: 700;
  color: var(--jw-ruby);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px 0;
}

a.jw-dr-a {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 12px;
  color: var(--jw-ink);
  font-size: 15px;
  white-space: nowrap;
  transition: var(--jw-trans);
}

a.jw-dr-a:hover {
  background-color: var(--jw-surf);
  color: var(--jw-mana);
}

div.jw-dr-cta {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--jw-line);
}

div.jw-dr-cta a.jw-btn {
  width: 100%;
}

/* 6. nut bam */
a.jw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  clip-path: var(--jw-clip-btn);
  transition: var(--jw-trans);
  cursor: pointer;
  border: none;
}

a.jw-btn:hover {
  transform: translateY(-2px);
}

a.jw-btn-ruby {
  background-color: var(--jw-ruby);
  color: var(--jw-ruby-ink);
}

a.jw-btn-ruby:hover {
  background-color: var(--jw-ruby);
}

a.jw-btn-ghost {
  background-color: transparent;
  border: var(--jw-border-ruby);
  color: var(--jw-ink);
}

a.jw-btn-ghost:hover {
  background-color: var(--jw-surf);
}

a.jw-hd-cta {
  min-height: 40px;
  height: 40px;
  padding: 0 18px;
}

/* 7. duong dan dieu huong */
nav.jw-crumb {
  width: min(var(--jw-w-max), calc(100% - var(--jw-pad-desk)));
  margin-inline: auto;
  padding: 16px 0;
}

ol.jw-cr {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

li.jw-cr-i {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

li.jw-cr-i:not(:first-child)::before {
  content: "/";
  color: var(--jw-line);
  font-weight: 700;
}

a.jw-cr-a {
  color: var(--jw-mute);
  white-space: nowrap;
  transition: var(--jw-trans);
}

a.jw-cr-a:hover {
  color: var(--jw-mana);
}

span.jw-cr-now {
  color: var(--jw-ink);
  font-weight: 700;
  white-space: nowrap;
}

/* 8. khung noi dung chinh */
main.jw-main,
main.jw-main-home,
main.jw-main-hub,
main.jw-main-child,
main.jw-main-support,
main.jw-main-404 {
  display: block;
  padding: 32px 0;
}

main.jw-main > section,
main.jw-main > article {
  width: min(var(--jw-w-max), calc(100% - var(--jw-pad-desk)));
  margin-inline: auto;
  margin-bottom: var(--jw-space-sec);
}

/* 9. phan mo dau trang chu */
section.jw-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: center;
}

div.jw-hero-txt {
  min-width: 0;
}

p.jw-kicker {
  font-size: 14px;
  font-weight: 700;
  color: var(--jw-ruby);
  border-left: 4px solid var(--jw-ruby);
  padding-left: 12px;
  margin: 0 0 16px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

h1.jw-h1 {
  font-family: var(--jw-body);
  font-weight: 700;
  font-size: var(--jw-fz-h1);
  line-height: var(--jw-lh-h1);
  color: var(--jw-ink);
  margin: 0 0 16px 0;
  word-break: break-word;
}

p.jw-lead {
  font-size: 18px;
  color: var(--jw-mute);
  line-height: 1.7;
  margin: 0 0 24px 0;
}

div.jw-hero-act {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

ol.jw-scrolls {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

li.jw-scroll {
  display: flex;
  align-items: center;
  background-color: var(--jw-surf);
  border: var(--jw-border);
  clip-path: var(--jw-clip-scroll);
  padding: 12px 16px;
  gap: 16px;
  transition: var(--jw-trans);
}

li.jw-scroll:nth-child(odd) {
  transform: rotate(-1.2deg);
}

li.jw-scroll:nth-child(even) {
  transform: rotate(1.2deg);
}

li.jw-scroll:hover {
  transform: translateY(-2px);
}

div.jw-scroll-pic {
  width: 88px;
  flex-shrink: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

div.jw-scroll-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

div.jw-scroll-tx {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

b.jw-scroll-t {
  font-size: 16px;
  font-weight: 700;
  color: var(--jw-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

span.jw-scroll-s {
  font-size: 14px;
  color: var(--jw-mute);
  line-height: 1.5;
}

/* 10. phan dau trang con */
section.jw-phead {
  padding: 40px 24px 24px;
  background: linear-gradient(135deg, var(--jw-surf), var(--jw-bg));
  border-left: 4px solid var(--jw-ruby);
}

/* 11. bang nhiem vu */
section.jw-board {
  min-width: 0;
}

div.jw-sec-h {
  margin-bottom: 24px;
}

h2.jw-h2 {
  font-family: var(--jw-body);
  font-weight: 700;
  font-size: var(--jw-fz-h2);
  line-height: var(--jw-lh-h2);
  color: var(--jw-ink);
  margin: 0 0 20px 0;
}

div.jw-sec-h h2.jw-h2 {
  margin: 0;
}

ul.jw-quests {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

li.jw-quest {
  display: flex;
}

a.jw-quest-a {
  display: block;
  width: 100%;
  padding: 20px;
  background-color: var(--jw-surf);
  border: var(--jw-border);
  box-shadow: var(--jw-shadow);
  clip-path: var(--jw-clip-card);
  transition: var(--jw-trans);
}

a.jw-quest-a:hover {
  transform: translateY(-2px);
}

span.jw-quest-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--jw-mana);
  white-space: nowrap;
  margin-bottom: 8px;
}

b.jw-quest-t {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--jw-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

span.jw-quest-b {
  display: block;
  color: var(--jw-mute);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 8px;
}

/* 12. danh sach tro choi va the bai */
section.jw-games,
section.jw-live,
section.jw-gal {
  min-width: 0;
}

ul.jw-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

ul.jw-cards-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

ul.jw-cards-live {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

li.jw-card {
  background-color: var(--jw-surf);
  border: var(--jw-border);
  clip-path: var(--jw-clip-card);
  overflow: hidden;
  transition: var(--jw-trans);
}

li.jw-card:hover {
  transform: translateY(-2px);
}

li.jw-card-cover,
li.jw-card-live,
li.jw-card-logo {
  display: flex;
  flex-direction: column;
}

figure.jw-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

div.jw-pic {
  aspect-ratio: 3 / 4;
  width: 100%;
  overflow: hidden;
}

div.jw-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

figcaption.jw-cap {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background-color: var(--jw-surf);
}

b.jw-cap-n {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--jw-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

span.jw-cap-k {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--jw-mana);
  white-space: nowrap;
}

/* 13. chip bieu tuong nha cung cap */
ul.jw-chips {
  list-style: none;
  margin: 24px 0 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

li.jw-chip {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border: var(--jw-border);
  background-color: var(--jw-deep);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--jw-trans);
}

li.jw-chip:hover {
  transform: translateY(-2px);
}

li.jw-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 14. trinh bay van ban dai */
section.jw-long,
article.jw-art {
  min-width: 0;
}

div.jw-prose {
  color: var(--jw-ink);
  font-size: var(--jw-fz-base);
  line-height: var(--jw-lh-base);
}

div.jw-prose h2 {
  font-size: var(--jw-fz-h2);
  line-height: var(--jw-lh-h2);
  font-weight: 700;
  color: var(--jw-ink);
  border-bottom: var(--jw-border);
  padding-bottom: 12px;
  margin: 36px 0 18px 0;
  position: relative;
}

div.jw-prose h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 48px;
  height: 2px;
  background-color: var(--jw-ruby);
}

div.jw-prose h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--jw-mana);
  margin: 28px 0 12px 0;
}

div.jw-prose p {
  margin: 0 0 1.1em 0;
  max-width: 74ch;
  color: var(--jw-mute);
}

div.jw-prose ul,
div.jw-prose ol {
  max-width: 74ch;
  margin: 0 0 1.1em 0;
  padding-left: 24px;
  color: var(--jw-mute);
}

div.jw-prose li {
  margin-bottom: 8px;
}

div.jw-prose a {
  color: var(--jw-mana);
  text-decoration: underline;
  text-underline-offset: 3px;
}

div.jw-prose strong {
  color: var(--jw-ink);
  font-weight: 700;
}

div.jw-prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 24px 0;
  border: 1px solid var(--jw-line);
}

div.jw-prose th {
  background-color: var(--jw-surf);
  color: var(--jw-ink);
  font-weight: 700;
  padding: 12px 16px;
  border: 1px solid var(--jw-line);
  text-align: left;
  white-space: nowrap;
}

div.jw-prose td {
  padding: 12px 16px;
  border: 1px solid var(--jw-line);
  color: var(--jw-mute);
}

/* 15. hop keu goi giua bai */
aside.jw-mid {
  background-color: var(--jw-surf);
  border-left: 4px solid var(--jw-mana);
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin: 32px 0;
}

p.jw-mid-t {
  font-size: 18px;
  font-weight: 700;
  color: var(--jw-ink);
  margin: 0;
}

/* 16. cau hoi thuong gap */
section.jw-faq {
  min-width: 0;
}

div.jw-faq-l {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

details.jw-q {
  border: var(--jw-border);
  background-color: var(--jw-surf);
  clip-path: var(--jw-clip-card);
}

details.jw-q > summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  font-weight: 700;
  font-size: 16px;
  color: var(--jw-ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

details.jw-q > summary::-webkit-details-marker {
  display: none;
}

details.jw-q > summary::after {
  content: "+";
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  color: var(--jw-ruby);
  margin-left: 16px;
  flex-shrink: 0;
}

details.jw-q[open] > summary::after {
  content: "-";
}

div.jw-a {
  padding: 16px 20px;
  color: var(--jw-mute);
  font-size: 15px;
  line-height: 1.7;
  border-top: 1px solid var(--jw-line);
}

/* 17. keu goi hanh dong cuoi trang */
section.jw-cta {
  min-width: 0;
}

div.jw-cta-in {
  background-color: var(--jw-surf);
  border: var(--jw-border-ruby);
  padding: 32px;
  text-align: center;
  clip-path: var(--jw-clip-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

p.jw-cta-p {
  color: var(--jw-mute);
  font-size: 16px;
  margin: 0 0 24px 0;
  max-width: 60ch;
}

div.jw-cta-in div.jw-hero-act {
  justify-content: center;
}

/* 18. chan trang */
footer.jw-ft {
  background-color: var(--jw-deep);
  border-top: var(--jw-border);
  padding-top: 48px;
  padding-bottom: 48px;
  width: 100%;
}

div.jw-ft-in {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 40px;
  width: min(var(--jw-w-max), calc(100% - var(--jw-pad-desk)));
  margin-inline: auto;
  margin-bottom: 32px;
}

div.jw-ft-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

img.jw-ft-logo {
  width: 150px;
  height: 40px;
  object-fit: contain;
}

p.jw-ft-note {
  font-size: 14px;
  color: var(--jw-mute);
  line-height: 1.6;
  margin: 0;
}

div.jw-ft-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

div.jw-ft-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

p.jw-ft-h {
  color: var(--jw-ruby);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

a.jw-ft-a {
  display: block;
  color: var(--jw-mute);
  font-size: 14px;
  height: 36px;
  line-height: 36px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: var(--jw-trans);
}

a.jw-ft-a:hover {
  color: var(--jw-ink);
  transform: translateX(2px);
}

div.jw-ft-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--jw-line);
  padding-top: 24px;
  width: min(var(--jw-w-max), calc(100% - var(--jw-pad-desk)));
  margin-inline: auto;
}

span.jw-age {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: var(--jw-border-ruby);
  color: var(--jw-ruby);
  font-weight: 700;
  font-size: 13px;
}

p.jw-ft-legal {
  font-size: 13px;
  color: var(--jw-mute);
  margin: 0;
}

/* 19. thanh dieu huong duoi cung di dong */
nav.jw-bn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background-color: var(--jw-deep);
  border-top: var(--jw-border);
  height: 60px;
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

a.jw-bn-a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--jw-mute);
  gap: 4px;
}

a.jw-bn-a svg.jw-ic {
  width: 22px;
  height: 22px;
}

span.jw-bn-t {
  font-size: 12px;
  white-space: nowrap;
  line-height: 1;
}

a.jw-bn-join {
  background-color: var(--jw-ruby);
  color: var(--jw-ruby-ink);
}

a.jw-bn-join span.jw-bn-t {
  color: var(--jw-ruby-ink);
  font-weight: 700;
}

/* 20. man hinh duoi 960px */
@media (max-width: 959px) {
  nav.jw-nav {
    display: none;
  }

  button.jw-burger {
    display: inline-flex;
  }

  nav.jw-bn {
    display: grid;
  }

  footer.jw-ft {
    padding-bottom: 96px;
  }

  section.jw-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  ul.jw-quests {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  div.jw-ft-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* 21. man hinh duoi 700px */
@media (max-width: 699px) {
  ol.jw-scrolls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  li.jw-scroll {
    flex-direction: column;
    padding: 8px;
    clip-path: none;
    transform: none;
    gap: 8px;
  }

  li.jw-scroll:nth-child(odd),
  li.jw-scroll:nth-child(even) {
    transform: none;
  }

  div.jw-scroll-pic {
    width: 100%;
    aspect-ratio: 3 / 4;
  }

  div.jw-scroll-tx {
    align-items: center;
    text-align: center;
  }

  b.jw-scroll-t {
    font-size: 13px;
  }

  span.jw-scroll-s {
    font-size: 13px;
  }

  ul.jw-cards-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  ul.jw-cards-live {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  div.jw-ft-map {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

/* 22. man hinh duoi 520px */
@media (max-width: 519px) {
  body.jw-body {
    font-size: 16px;
  }

  main.jw-main > section,
  main.jw-main > article,
  nav.jw-crumb {
    width: min(var(--jw-w-max), calc(100% - var(--jw-pad-mob)));
    margin-bottom: 40px;
  }

  div.jw-hd-row,
  div.jw-ft-in,
  div.jw-ft-bot {
    width: min(var(--jw-w-max), calc(100% - var(--jw-pad-mob)));
  }

  a.jw-hd-cta {
    padding: 0 14px;
    min-height: 40px;
  }

  ul.jw-quests {
    grid-template-columns: minmax(0, 1fr);
  }

  li.jw-chip {
    width: 56px;
    height: 56px;
  }

  div.jw-ft-bot {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}
/* 23. tinh chinh sau ban dung thu */
a.jw-btn-ghost {
  clip-path: none;
  border: 0;
  box-shadow: inset 0 0 0 2px var(--jw-ruby);
}

@media (min-width: 700px) {
  ul.jw-cards-3 figure.jw-fig {
    flex-direction: row;
    align-items: stretch;
  }

  ul.jw-cards-3 div.jw-pic {
    flex: 0 0 42%;
    width: 42%;
  }

  ul.jw-cards-3 figcaption.jw-cap {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    padding: 14px 16px;
  }
}

@media (min-width: 700px) and (max-width: 959px) {
  ul.jw-cards-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

div.jw-drawer {
  padding-bottom: 76px;
}

svg.jw-logo-img,
svg.jw-ft-logo {
  display: block;
  width: 150px;
  height: 40px;
}

a.jw-cr-a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}