:root{
  font-family:Arial,Helvetica,sans-serif;
  color:#18212f;
  background:#f4f7fb;
  --blue:#195ca8;
  --blue2:#0f4d91;
  --line:#d7dee8;
  --soft:#f7f9fc;
  --text:#18212f;
  --muted:#667085;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f4f7fb;color:var(--text);font-size:16px;line-height:1.58}
a{color:#1558a6}
a:hover{text-decoration-thickness:2px}
.phone-shell{
  width:min(100%,460px);
  min-height:100vh;
  margin:0 auto;
  background:#fff;
  box-shadow:0 0 24px rgba(20,41,74,.08);
}
.site-header{background:#fff;border-bottom:1px solid var(--line)}
.site-header-full{
  display:grid;
  grid-template-columns:minmax(115px,1fr) minmax(105px,.8fr) auto;
  grid-template-areas:"brand member tools" "slogan slogan slogan";
  gap:6px 8px;
  align-items:center;
  padding:10px 12px 8px;
}
.brand-block{grid-area:brand;display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;min-width:0}
.hohy-logo{width:48px;height:46px;object-fit:contain;flex:0 0 auto}
.brand-copy{display:block;min-width:0}
.brand-title{display:block;font-size:1.12rem;line-height:1.1;color:#111}
.brand-subtitle{display:block;margin-top:5px;font-size:.92rem;color:#2d3748}
.member-panel{grid-area:member;text-align:right}
.member-name{font-weight:700;font-size:.88rem}
.member-id{margin-top:3px;color:#3d4a5d}
.header-tools{grid-area:tools;display:flex;align-items:center;gap:12px;justify-content:flex-end}
.qr-link img{display:block;width:48px;height:48px;border:1px solid #d0d5dd;padding:3px;background:#fff}
.header-buttons{display:flex;align-items:center;gap:10px}
.join-image-button{display:inline-flex;width:66px;height:42px;align-items:center;justify-content:center;overflow:hidden}
.join-image-button img{max-width:100%;max-height:100%;object-fit:contain}
.login-button{display:inline-flex;min-width:58px;height:32px;align-items:center;justify-content:center;border:2px solid #f1b300;border-radius:22px;background:linear-gradient(180deg,#fff4a4,#ffd44f);font-weight:800;color:#1b355a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.disabled{opacity:.58;cursor:default}
.header-slogan{grid-area:slogan;text-align:center;font-size:1.05rem;font-weight:800;letter-spacing:.025em;padding-top:4px;color:#101828}
.site-header-compact{padding:12px 24px;background:#fff}
.compact-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.compact-logo{width:54px;height:50px;object-fit:contain}
.compact-brand strong{display:block;font-size:1.2rem;line-height:1.1}
.compact-brand small{display:block;color:#596579;margin-top:3px;font-size:.9rem}
.page-content{padding:20px 18px 32px;max-width:460px;margin:0 auto}
.page-content h1{font-size:2rem;line-height:1.18;margin:4px 0 20px;color:#101828}
.page-content h2{font-size:1.35rem;line-height:1.3;margin:30px 0 10px;color:#153a68}
.page-content h3{font-size:1.08rem;margin:22px 0 7px;color:#243b55}
.page-content p{margin:8px 0 13px}
.page-content ul,.page-content ol{padding-left:24px;margin:8px 0 16px}
.page-content li{margin:5px 0}
.breadcrumb{display:none!important}
.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0 28px}
.menu-link{display:flex;flex-direction:column;justify-content:center;min-height:74px;padding:14px 16px;border:1px solid #d6dce6;border-radius:14px;background:#fff;text-decoration:none;color:#133b69;font-weight:700;box-shadow:0 3px 10px rgba(16,24,40,.05);transition:.15s ease}
a.menu-link:hover{transform:translateY(-1px);border-color:#9bb8d9;box-shadow:0 5px 14px rgba(16,24,40,.09)}
.menu-link small{display:block;margin-top:4px;color:#697586;font-size:.86rem;font-weight:400;line-height:1.35}
.home-hero{text-align:center;padding:18px 0 6px}
.home-hero h1{font-size:2.45rem;margin-bottom:6px}
.home-hero .lead{font-size:1.1rem;color:#475467;margin-bottom:18px}
.home-join-card{max-width:640px;margin:14px auto 22px;padding:18px 22px;border:1px solid #d7dee8;border-radius:18px;background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:0 5px 18px rgba(16,24,40,.06)}
.home-join-card strong{display:block;font-size:1.65rem;color:#111}
.home-join-card span{display:block;margin-top:3px}
.language-links{display:flex;justify-content:center;gap:16px;margin:14px 0 24px;font-size:1.04rem}
.language-chip{display:inline-flex;padding:7px 12px;border-radius:999px;border:1px solid #d0d7e2;background:#fafcff;color:#334155}
.home-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:430px;margin:0 auto 30px}
.home-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:142px;border:1px solid #d9e0ea;border-radius:18px;background:#fff;text-decoration:none;color:#111;box-shadow:0 5px 16px rgba(16,24,40,.06);transition:.15s ease}
.home-tile:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(16,24,40,.1)}
.home-tile .tile-icon{font-size:2.65rem;line-height:1}
.home-tile strong{margin-top:10px;font-size:1.03rem}
.page-close{text-align:center;margin:34px 0 4px}
.close-icon-link{display:inline-block;border-radius:50%;line-height:0;box-shadow:0 3px 8px rgba(0,0,0,.16)}
.close-icon-link img{display:block;width:74px;height:74px;border-radius:50%}
.action-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:1px solid #758195;border-radius:9px;background:#fff;text-decoration:none;color:#172b4d;font-weight:700}
table{width:100%;border-collapse:collapse;margin:16px 0 22px;font-size:.96rem}
th,td{border:1px solid #d9dee8;padding:9px 10px;text-align:left;vertical-align:top}
th{background:#eef4fb;color:#173d6d}
.term-table{max-width:720px}
.source-heading{margin-top:28px!important}
.source-bullet{margin-left:16px}
.source-label{margin-top:14px;margin-bottom:4px}
.source-table-line{white-space:pre-wrap;overflow-wrap:anywhere;font-family:Consolas,'Courier New',monospace;font-size:.78rem;line-height:1.45;margin:3px 0;background:#fbfcfe;padding:7px 9px;border-radius:7px;border:1px solid #edf0f4;white-space:pre;overflow-x:auto}
.site-footer{display:flex;gap:8px;justify-content:center;align-items:center;padding:20px;border-top:1px solid var(--line);font-size:.84rem;color:#667085;background:#fcfdff}
.site-footer a{font-weight:600}
@media (max-width:800px){
  .phone-shell{box-shadow:none}
  .site-header-full{grid-template-columns:1fr auto;grid-template-areas:"brand tools" "member member" "slogan slogan";padding:14px 16px;gap:10px}
  .member-panel{text-align:left}
  .brand-subtitle{font-size:.82rem}
  .header-tools{gap:8px}
  .qr-link img{width:68px;height:68px}
  .join-image-button{width:86px;height:52px}
  .login-button{min-width:72px;height:40px}
  .page-content{padding:22px 18px 34px}
  .home-menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (max-width:540px){
  body{font-size:15px}
  .site-header-full{display:flex;flex-direction:column;align-items:stretch}
  .brand-block{justify-content:flex-start}
  .hohy-logo{width:62px;height:58px}
  .brand-title{font-size:1.45rem}
  .member-panel{text-align:left}
  .header-tools{justify-content:flex-start}
  .header-slogan{text-align:left;font-size:1.08rem}
  .menu-grid{grid-template-columns:1fr}
  .home-menu{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-tile{min-height:118px}
  .home-tile .tile-icon{font-size:2.2rem}
  .page-content h1{font-size:1.65rem}
  .source-table-line{font-size:.82rem}
}
/* All approved Close controls use the red Close icon. */
.page-close .action-button{
  width:74px!important;height:74px!important;min-width:74px!important;min-height:74px!important;
  padding:0!important;border:0!important;border-radius:50%!important;
  background:url('../images/close-button.jpg') center/cover no-repeat!important;
  color:transparent!important;font-size:0!important;line-height:0!important;
  box-shadow:0 3px 8px rgba(0,0,0,.16)!important;
}

.owner-photo{display:block;width:110px;height:auto;margin:0 auto 14px;border-radius:8px}
.tile-logo{width:58px;height:58px;object-fit:contain}
.exit-message{text-align:center;padding:80px 10px 120px}.exit-message h1{font-size:1.55rem}.exit-message p{font-size:1.1rem;font-weight:700}
.pdf-selector{border:1px solid #d7dee8;border-radius:12px;padding:14px;margin:14px 0}.pdf-selector fieldset{border:0;padding:0;margin:0 0 14px}.pdf-selector label{display:block;margin:6px 0}.pdf-actions{display:flex;gap:8px;flex-wrap:wrap}.pdf-actions button{padding:8px 10px;border:1px solid #758195;border-radius:8px;background:#fff;font-weight:700;cursor:pointer}
.contact-form label{display:block;font-weight:700;margin:10px 0 4px}.contact-form input,.contact-form textarea{width:100%;padding:9px;border:1px solid #aeb7c4;border-radius:7px;font:inherit}.contact-form textarea{min-height:120px}.form-message{padding:10px;border-radius:8px;background:#f2f7fd;margin:12px 0}.form-error{color:#9b1c1c}
@media (min-width:541px){.home-menu{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:540px){.phone-shell{width:100%}.site-header-full{display:grid;grid-template-columns:minmax(100px,1fr) auto auto;grid-template-areas:"brand member tools" "slogan slogan slogan";align-items:center}.brand-block{gap:5px}.hohy-logo{width:44px;height:42px}.brand-title{font-size:1rem}.member-panel{text-align:center;font-size:.82rem}.header-tools{gap:4px}.qr-link img{width:44px;height:44px}.join-image-button{width:58px;height:38px}.login-button{min-width:50px;height:30px;font-size:.75rem}.header-slogan{text-align:center;font-size:.96rem}.home-menu{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Version 3 B-F fine-tune helpers */
.tag-anchor{display:block;position:relative;top:-8px;visibility:hidden;height:0}
.source-small{font-size:.9rem;font-weight:400;margin:5px 0 5px 16px}
.source-normal{font-weight:400!important}
.inline-program-link{font-weight:700;text-decoration:underline}
.testimonial-view-links{display:flex;gap:12px;flex-wrap:wrap;margin:4px 0 18px}.testimonial-view-links a{font-weight:400;text-decoration:underline}
.program-prize-table th,.program-prize-table td{text-align:left}.program-prize-table td:last-child{text-align:right}.program-prize-table .normal-row td{font-weight:400}

/* Version 3.4 table alignment: fit tables within the page without horizontal scroll bars. */
.responsive-table-wrap{width:100%;max-width:100%;margin:12px 0 20px;overflow:visible}
.source-data-table{width:100%;max-width:100%;table-layout:fixed;border-collapse:collapse;margin:0;font-size:.86rem}
.source-data-table th,.source-data-table td{white-space:normal;overflow-wrap:anywhere;word-break:normal;padding:7px 6px;vertical-align:top}
.source-data-table th{font-weight:700;text-align:center}
.source-data-table td{text-align:left}
.source-data-table.program-prize-table td:first-child{font-weight:700}
.source-data-table.program-prize-table .normal-row td:first-child{font-weight:400}
.source-data-table.compact-table .normal-row td:first-child{font-weight:400}
.source-data-table.voting-prize-table th:nth-child(1){width:16%}
.source-data-table.voting-prize-table th:nth-child(2){width:64%}
.source-data-table.voting-prize-table th:nth-child(3){width:20%}
@media (max-width:540px){.source-data-table{font-size:.73rem}.source-data-table th,.source-data-table td{padding:5px 4px}.program-schedule-table{font-size:.69rem}}


/* Version 3.4 final header correction — follow the approved user arrangement.
   Left: logo with HOHY Club below it. Right row 1: Full Name and MB ID.
   Right row 2: QR Code, JOIN NOW, Login. Slogan remains across the bottom. */
.site-header-full{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  grid-template-areas:
    "brand member"
    "brand tools"
    "slogan slogan";
  column-gap:10px;
  row-gap:3px;
  align-items:center;
  padding:8px 10px 7px;
}
.brand-block{
  grid-area:brand;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  min-width:0;
  text-align:center;
}
.hohy-logo{width:46px;height:44px;object-fit:contain;flex:0 0 auto}
.brand-copy{display:block;min-width:0}
.brand-title{display:block;font-size:.73rem;line-height:1.05;color:#111;white-space:nowrap}
.member-panel{grid-area:member;text-align:left;min-width:0;line-height:1.2}
.member-name{
  display:block;
  max-width:100%;
  font-weight:700;
  font-size:.88rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.member-id{
  display:block;
  margin-top:2px;
  color:#3d4a5d;
  font-size:.84rem;
  white-space:nowrap;
}
.header-tools{grid-area:tools;display:flex;align-items:center;justify-content:flex-start;gap:8px;min-width:0}
.qr-link{display:inline-flex;flex:0 0 auto}
.qr-link img{display:block;width:44px;height:44px;border:1px solid #d0d5dd;padding:2px;background:#fff}
.header-buttons{display:flex;align-items:center;gap:8px;min-width:0}
.join-image-button{display:inline-flex;width:62px;height:39px;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
.login-button{display:inline-flex;min-width:54px;height:30px;align-items:center;justify-content:center;font-size:.78rem;flex:0 0 auto}
.header-slogan{grid-area:slogan;text-align:center;font-size:.96rem;font-weight:800;letter-spacing:.02em;padding-top:4px;color:#101828;white-space:nowrap}

@media (max-width:360px){
  .site-header-full{grid-template-columns:58px minmax(0,1fr);column-gap:7px;padding-left:7px;padding-right:7px}
  .hohy-logo{width:42px;height:40px}
  .brand-title{font-size:.67rem}
  .member-name{font-size:.81rem}
  .member-id{font-size:.78rem}
  .header-tools{gap:5px}
  .header-buttons{gap:5px}
  .qr-link img{width:40px;height:40px}
  .join-image-button{width:55px;height:35px}
  .login-button{min-width:48px;height:28px;font-size:.72rem}
  .header-slogan{font-size:.82rem;letter-spacing:.01em}
}

/* v3.4.2 QR scan reliability: keep QR large enough for phone cameras. */
.site-header-full .qr-link img{width:72px;height:72px;padding:3px;image-rendering:auto}
@media (max-width:540px){.site-header-full .qr-link img{width:64px;height:64px}}

/* Production header alignment: match finalized CHT/CHS. */
.site-header-full{position:relative}
.site-header-full .header-slogan{text-align:center;width:100%}
@media (min-width:361px){.site-header-full{grid-template-columns:64px 250px;justify-content:center;}}