/* Contest frame follows the HTML reference while reading the shared CMS settings. */
body.contest-site { font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 1.09375rem; line-height: 1.7; -webkit-font-smoothing: antialiased; }
.contest-site .contest-header { position: fixed; inset: 0 0 auto; z-index: 50; color: #fff; transition: background .35s, color .35s, box-shadow .35s; }
.contest-site .contest-header.is-scrolled { background: #fff; color: #14233B; box-shadow: 0 1px 0 #DDD5C6; }
.contest-site .contest-header-inner { width: min(1320px, 94%); margin: auto; height: 80px; display: flex; align-items: center; gap: 32px; }
.contest-site .contest-header a { color: inherit; text-decoration: none; }
.contest-site .contest-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.contest-site .contest-brand-mark { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; }
.contest-site .contest-brand b { font-weight: 600; font-size: 1.1875rem; }
.contest-site .contest-brand small { display: block; font-size: .625rem; letter-spacing: .26em; opacity: .75; }
.contest-site .contest-nav { display: flex; flex: 1; justify-content: space-evenly; gap: 20px; margin: 0 2vw; font-size: .96875rem; font-weight: 500; white-space: nowrap; }
.contest-site .contest-nav a { position: relative; padding: 8px 0; }
.contest-site .contest-nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; background: currentColor; transition: right .3s; }
.contest-site .contest-nav a:hover::after, .contest-site .contest-nav a[aria-current="page"]::after { right: 0; }
.contest-site .contest-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.contest-site .contest-font-toggle { font: inherit; font-size: .8125rem; font-weight: 600; color: inherit; background: transparent; border: 1.5px solid currentColor; border-radius: 40px; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
.contest-site .contest-tools .btn { background: #B3261E; color: #fff; border-radius: 40px; padding: 8px 16px; min-height: 40px; font-size: .875rem; font-weight: 600; white-space: nowrap; }
.contest-site .contest-tools .btn:hover { background: #8E1D16; }
.contest-site .contest-tools .btn { gap: 8px; }
.contest-site .contest-tools .ic { width: 16px; height: 16px; flex-shrink: 0; }
.contest-site .contest-menu-toggle { display: none; width: 44px; height: 44px; border: 0; padding: 10px; background: transparent; color: inherit; cursor: pointer; }
.contest-site .contest-announcement { background: #0B1424; color: #E9D7AE; font-size: .875rem; border-bottom: 1px solid #ffffff1f; }
.contest-site .contest-announcement-inner { width: min(1320px, 94%); margin: auto; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 14px; position: relative; padding: 0 40px; }
.contest-site .contest-announcement-dot { width: 8px; height: 8px; border-radius: 50%; background: #E3C88F; flex-shrink: 0; }
.contest-site .contest-announcement b { color: #fff; font-weight: 600; }
.contest-site .contest-announcement a { color: #fff; font-weight: 600; border-bottom: 1.5px solid #E3C88F; white-space: nowrap; }
.contest-site .contest-banner-close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; color: #C9D2E0; font: inherit; font-size: 1.25rem; line-height: 1; border: 0; background: transparent; cursor: pointer; }
.contest-site .contest-header.no-bar .contest-announcement { display: none; }
.contest-site .contest-fab { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 62px; height: 62px; border-radius: 50%; background: #B3261E; color: #fff; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; line-height: 1.1; gap: 4px; box-shadow: 0 8px 24px #b3261e55; }
@media (max-width: 1240px) { .contest-site .contest-nav { font-size: .9375rem; gap: 14px; margin: 0 1vw; } .contest-site .contest-header-inner { gap: 18px; } }
@media (max-width: 1100px) {
  .contest-site .contest-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 10px 14px; background: #0E1A2E; color: #fff; box-shadow: 0 12px 24px #0003; }
  .contest-site .contest-nav.open { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 0px; }
  .contest-site .contest-nav a { width: 100% }
  .contest-site .contest-nav a + a { border-top: 1px solid #ffffff26; }
  .contest-site .contest-nav a::after { display: none; }
  .contest-site .contest-menu-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; }
}
@media (max-width: 700px) {
  .contest-site .contest-announcement-details { display: none; }
  .contest-site .contest-announcement-inner { justify-content: flex-start; padding: 0 36px 0 0; font-size: .84375rem; gap: 8px; }
}
@media (max-width: 479px) {
  .contest-site .contest-header-inner { gap: 8px; }
  .contest-site .contest-brand { gap: 8px; }
  .contest-site .contest-brand-mark { width: 32px; height: 32px; }
  .contest-site .contest-brand b { font-size: 1rem; }
  .contest-site .contest-brand small { font-size: .625rem; }
  .contest-site .contest-tools { gap: 4px; }
  .contest-site .contest-tools .btn { padding: 6px 10px; font-size: .84375rem; }
  .contest-site .contest-font-toggle { font-size: .8125rem; padding: 6px 8px; }
  .contest-site .contest-tools .ic { display: none; }
  .contest-site .contest-menu-toggle { width: 32px; padding: 4px; }
}

/* Typography at the reference's mobile breakpoint; sizes remain scalable with A+. */
@media (max-width: 600px) {
  .contest-site .contest-brand b { font-size: 1rem; }
  .contest-site .contest-tools .btn { font-size: .84375rem; padding: 7px 13px; }
  .contest-site .contest-tools .ic { display: none; }
  .contest-site .contest-brand small { display: none; }
}

/* Its fixed transparent header overlays the hero; shared header spacing must not apply. */
body.contest-site #noi-dung { padding-top: 0; }

.contest-site .contest-font-toggle[aria-pressed="true"]{background:#fff;color:#14233B;border-color:#fff}
.contest-site .contest-header.is-scrolled .contest-font-toggle[aria-pressed="true"]{background:#14233B;color:#fff;border-color:#14233B}
.contest-site .contest-font-toggle:focus-visible{outline:3px solid #B78A3A;outline-offset:4px}
@media(max-width:1023px){.contest-site .contest-font-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:6px 8px}}

/* Header dien thoai: menu, thuong hieu va hai nut cung mot hang. */
@media(max-width:600px){
 .contest-site .contest-header-inner{display:flex;flex-wrap:nowrap;height:64px;min-height:64px;padding:0;gap:6px}
 .contest-site .contest-menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;height:44px;padding:6px;flex:none;line-height:1}
 .contest-site .contest-brand{flex:1 1 auto;gap:5px;min-width:0}
 .contest-site .contest-brand-mark{width:26px;height:26px;flex:none}
 .contest-site .contest-brand-mark svg{width:16px;height:16px}
 .contest-site .contest-brand>span:last-child{min-width:0}
 .contest-site .contest-brand b{display:block;font-size:.8125rem;line-height:1.3;white-space:nowrap}
 .contest-site .contest-brand img{max-width:100%;height:auto;max-height:28px;object-fit:contain}
 .contest-site .contest-tools{flex:none;gap:4px;margin-left:0}
 .contest-site .contest-font-toggle{min-width:36px;height:36px;min-height:36px;padding:4px;font-size:.6875rem;line-height:1}
 .contest-site .contest-tools .btn{height:36px;min-height:36px;padding:6px 8px;font-size:.6875rem;line-height:1;gap:0}
}

.contest-site .contest-menu-toggle svg{display:block;width:20px;height:20px;flex:none}
.contest-site .contest-menu-toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:6px}
/* Same compact bar and vertical menu as the shared website header. */
@media(max-width:1100px) {
 .contest-site .contest-header,.contest-site .contest-header.is-scrolled {
  color:#fff; background-color:#1c3456;
  background-image:linear-gradient(100deg,#1c3456f5,#1c3456df),url('/assets/images/trong-dong.svg');
  background-size:auto,400px; background-position:center,right -110px top -130px; background-repeat:no-repeat;
  box-shadow:0 1px 0 #ffffff0a;
 }
 .contest-site .contest-header-inner { width:calc(100% - 24px); height:66px; min-height:66px; padding:0; gap:8px; flex-wrap:nowrap; }
 .contest-site .contest-menu-toggle { width:28px; height:44px; padding:4px; flex-shrink:0; }
 .contest-site .contest-menu-toggle svg { width:18px; height:18px; }
 .contest-site .contest-brand { flex:0 1 auto; min-width:0; gap:6px; }
 .contest-site .contest-brand-mark { width:26px; height:26px; border-width:1px; flex-shrink:0; }
 .contest-site .contest-brand-mark svg { width:15px; height:15px; }
 .contest-site .contest-brand b { font-size:13px; line-height:1.3; letter-spacing:-.025em; white-space:nowrap; }
 .contest-site .contest-brand small { display:none; }
 .contest-site .contest-brand img { height:26px; max-width:48px; object-fit:contain; }
 .contest-site .contest-tools { flex:0 0 auto; margin-left:auto; gap:6px; }
 .contest-site .contest-font-toggle { display:inline-flex; justify-content:center; align-items:center; width:36px; height:36px; min-width:36px; min-height:36px; padding:0; border-width:1px; border-radius:50%; font-size:.75rem; }
 .contest-site .contest-font-toggle[aria-pressed="true"],.contest-site .contest-header.is-scrolled .contest-font-toggle[aria-pressed="true"] { background:#ffffff20; color:#fff; border-color:#fff; }
 .contest-site .contest-tools .btn { height:auto; min-height:36px; padding:7px 10px; font-size:12px; line-height:1.4; }
 .contest-site .contest-tools .ic { display:none; }
 .contest-site .contest-nav { padding:8px 14px 16px; max-height:calc(100dvh - 106px); overflow-y:auto; overscroll-behavior:contain; font-size:.875rem; font-weight:600; }
 .contest-site .contest-nav a { padding:11px 0; line-height:1.5; }
 .contest-site .contest-nav a:hover { color:#e3c88f; }
 .contest-site .contest-header:not([data-menu-ready]) .contest-header-inner { height:auto; flex-wrap:wrap; }
 .contest-site .contest-header:not([data-menu-ready]) { position:relative; }
 .contest-site .contest-header:not([data-menu-ready]) .contest-menu-toggle { display:none; }
 .contest-site .contest-header:not([data-menu-ready]) .contest-nav { display:flex; position:static; order:4; flex:0 0 100%; flex-direction:column; gap:0; }
}
@media(max-width:359px) {
 .contest-site .contest-header-inner { width:calc(100% - 16px); gap:5px; }
 .contest-site .contest-menu-toggle { width:24px; }
 .contest-site .contest-brand b { font-size:12px; }
 .contest-site .contest-brand { gap:5px; }
 .contest-site .contest-tools { gap:5px; }
 .contest-site .contest-tools .btn { padding-inline:8px; font-size:11px; }
}
