/* congtyketviettiep.vn in season (Giáng sinh / Tết from the ERP, css/season.js). The shared rules are derived from
   ketsatviettiep.com's web/app/season.css (ui/scripts/season/README.md); the congty block is at the end. Everything
   here sits under html[data-season] or the .ss- classes season.js adds, so an everyday page is untouched. */
html { --ss-gold: #f3c54b; --ss-deep: #8e0e1b; }

/* Campaign ribbon above the header. */
.ss-ribbon { position: relative; overflow: hidden; color: #fff; font-size: 14px; }
.ss-ribbon-inner { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; }
.ss-ribbon-mark { flex: none; width: 22px; height: 22px; }
.ss-ribbon p { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin: 0; overflow: hidden; white-space: nowrap; }
.ss-ribbon strong { flex: none; font-weight: 800; letter-spacing: .02em; }
.ss-ribbon p span { overflow: hidden; text-overflow: ellipsis; opacity: .92; }
.ss-ribbon p span::before { content: '·'; margin-right: 8px; }
.ss-ribbon-cta { position: relative; z-index: 1; display: inline-flex; flex: none; align-items: center; gap: 4px; padding: 4px 12px 4px 14px; border-radius: 999px; font-size: 13px; font-weight: 800; transition: transform .2s; }
.ss-ribbon-cta:hover { transform: translateX(3px); }
.ss-ribbon::after { content: ''; position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .2), transparent); animation: ss-shine 6s ease-in-out infinite; pointer-events: none; }
@keyframes ss-shine { 0%, 50% { transform: translateX(0); } 100% { transform: translateX(460%); } }
.ss-ribbon.is-noel { border-bottom: 4px solid transparent; border-image: repeating-linear-gradient(-45deg, #d7261e 0 7px, #fff 7px 14px) 4; background: linear-gradient(90deg, #0c4128, #14703f 50%, #0c4128); }
.ss-ribbon.is-noel strong { color: #ffd84d; }
.ss-ribbon.is-noel .ss-ribbon-cta { background: #fff; color: #b3121b; }
.ss-ribbon.is-tet { border-bottom: 2px solid #f3c54b; background: url('season/may.svg') 0 0 / 80px 40px, linear-gradient(90deg, #8e0e1b, #c8102e 50%, #8e0e1b); }
.ss-ribbon.is-tet strong { color: #ffd66b; }
.ss-ribbon.is-tet .ss-ribbon-cta { background: linear-gradient(#ffe38a, #f3c54b); color: #7a0a10; }
@media (max-width: 767.98px) {
  .ss-ribbon { font-size: 13px; }
  .ss-ribbon-inner { justify-content: space-between; gap: 8px; min-height: 36px; }
  .ss-ribbon p span { display: none; }
  .ss-ribbon-cta { padding: 3px 10px; font-size: 12.5px; }
}

/* Snow or blossoms falling over the page, never in the way of a click. */
.ss-fx { position: fixed; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; }
.ss-flake { position: absolute; top: -28px; display: block; animation: ss-fall linear infinite; will-change: transform; }
.ss-fx.is-noel .ss-flake { border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgb(255 255 255 / .9), 0 0 1px rgb(0 0 0 / .25); opacity: .85; }
.ss-flake svg { display: block; width: 100%; height: 100%; }
@keyframes ss-fall { from { transform: translate3d(0, -4vh, 0) rotate(0deg); } to { transform: translate3d(var(--drift, 0px), 106vh, 0) rotate(320deg); } }
/* Tết: two lanterns hanging from the top corners of the page. */
.ss-lanterns { position: absolute; top: 0; left: 0; right: 0; z-index: 1300; height: 0; pointer-events: none; }
.ss-lantern { position: absolute; top: 0; width: 44px; height: auto; transform-origin: 50% 0; animation: ss-swing 3.2s ease-in-out infinite alternate; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .25)); }
.ss-lantern.is-left { left: 10px; }
.ss-lantern.is-right { right: 10px; animation-delay: -1.6s; }
@keyframes ss-swing { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes ss-twinkle { 50% { opacity: .5; } }
@media (max-width: 1279.98px) { .ss-lanterns { display: none; } }

/* Santa's sleigh / the lion dance crossing the menu bar, things hanging under the header. The header is the box. */
/* The menu bar (sticky) is the box of the sleigh / lion and the things hanging under it. */
.ss-header-fx { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; height: 0; pointer-events: none; }
.ss-lane { position: absolute; left: 0; right: 0; bottom: 4px; height: 64px; overflow: hidden; }
.ss-sleigh { position: absolute; bottom: 0; left: 100%; width: 230px; height: auto; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .18)); animation: ss-sleigh 18s linear infinite; }
@keyframes ss-sleigh {
  0% { transform: translate(0, 4px); }
  15% { transform: translate(calc(-25vw - 60px), -8px); }
  30% { transform: translate(calc(-50vw - 120px), 4px); }
  45% { transform: translate(calc(-75vw - 180px), -8px); }
  60%, 100% { transform: translate(calc(-100vw - 260px), 4px); }
}
.ss-hangs { position: absolute; top: 0; left: 0; right: 0; height: 0; }
.ss-hang { position: absolute; top: 0; width: 20px; height: 50px; transform-origin: 50% 0; animation: ss-swing 3s ease-in-out infinite alternate; }
.ss-hang.is-1 { animation-duration: 3.6s; animation-delay: -1s; }
.ss-hang.is-2 { animation-duration: 4.2s; animation-delay: -2s; }
.ss-header-fx.is-tet .ss-lane { height: 92px; }
.ss-header-fx.is-tet .ss-hang { width: 22px; height: 77px; }
.ss-lion { position: absolute; bottom: 0; left: 100%; width: 200px; height: auto; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .18)); animation: ss-lion 24s linear infinite; }
@keyframes ss-lion {
  0% { transform: translate(0, 2px); }
  6% { transform: translate(calc(-12vw - 26px), -10px); }
  12% { transform: translate(calc(-24vw - 52px), 2px); }
  18% { transform: translate(calc(-36vw - 78px), -10px); }
  24% { transform: translate(calc(-48vw - 104px), 2px); }
  30% { transform: translate(calc(-60vw - 130px), -10px); }
  36% { transform: translate(calc(-72vw - 156px), 2px); }
  42% { transform: translate(calc(-84vw - 182px), -10px); }
  50%, 100% { transform: translate(calc(-100vw - 240px), 2px); }
}
.ss-lion-head { transform-box: fill-box; transform-origin: 85% 85%; animation: ss-lion-nod .6s ease-in-out infinite alternate; }
@keyframes ss-lion-nod { from { transform: rotate(-6deg); } to { transform: translateY(-2px) rotate(5deg); } }
.ss-lion-legs { animation: ss-step .3s ease-in-out infinite alternate; }
.ss-lion-legs.is-alt { animation-delay: -.3s; }
@keyframes ss-step { to { transform: translateY(-4px); } }
@media (max-width: 767.98px) {
  .ss-sleigh { width: 160px; animation-duration: 13s; }
  .ss-lane { height: 46px; }
  .ss-hangs { display: none; }
  .ss-lion { width: 112px; animation-duration: 17s; }
  .ss-header-fx.is-tet .ss-lane { height: 50px; }
}

/* Scenes in the side margins, where the screen is wide enough to leave them empty: drawn as the page's own background
   (fixed to the window), so every band with a background of its own (header, footer, coloured bands) covers them.
   The page is 1200px wide. The template styles the body by its id (#bd), so the scenes do too. */
@media (min-width: 1460px) { html { --ss-side: min(calc((100vw - 1200px) / 2 - 22px), 240px); } }
@media (min-width: 1460px) {
  html[data-season='noel'] body#bd { background-image: url('season/noel-left.svg'), url('season/noel-right.svg'); background-position: left 6px bottom 0, right 6px bottom 0; background-size: var(--ss-side) auto, var(--ss-side) auto; background-repeat: no-repeat; background-attachment: fixed; }
  html[data-season='tet'] body#bd { --ss-scroll: min(var(--ss-side), 128px); background-image: url('season/tet-left.svg'), url('season/tet-right.svg'); background-position: left calc((var(--ss-side) - var(--ss-scroll)) / 2 + 6px) bottom 140px, right calc((var(--ss-side) - var(--ss-scroll)) / 2 + 6px) bottom 140px; background-size: var(--ss-scroll) auto, var(--ss-scroll) auto; background-repeat: no-repeat; background-attachment: fixed; }
}

/* "Bé Két", the mascot: bottom left on a computer, bobbing, with the season's greeting now and then. */
.ss-mascot { position: fixed; left: 12px; bottom: 18px; z-index: 84; width: 70px; }
.ss-mascot-link { display: block; animation: ss-bob 2.8s ease-in-out infinite; }
.ss-mascot-art { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 14px rgb(0 0 0 / .22)); transition: transform .25s; }
.ss-mascot-link:hover .ss-mascot-art { transform: scale(1.06) rotate(-3deg); }
.ss-mascot-say { position: absolute; bottom: 100%; left: 46px; margin-bottom: -18px; padding: 6px 12px; border: 2px solid var(--ss-gold, #e8b84a); border-radius: 14px 14px 14px 4px; background: #fff; color: var(--ss-deep, #7a0a10); font-size: 13px; font-weight: 800; white-space: nowrap; box-shadow: 0 10px 20px -10px rgb(0 0 0 / .4); transform-origin: 0 100%; animation: ss-say 10s ease-in-out infinite; }
@keyframes ss-say { 0%, 6% { opacity: 0; transform: scale(.6); } 12%, 58% { opacity: 1; transform: scale(1); } 64%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes ss-bob { 50% { transform: translateY(-6px); } }
.ss-mascot-wave { transform-box: fill-box; transform-origin: 0 100%; animation: ss-hand 1s ease-in-out infinite alternate; }
@keyframes ss-hand { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.ss-mascot-close { position: absolute; top: 34px; left: -8px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgb(0 0 0 / .6); color: #fff; cursor: pointer; opacity: 0; transition: opacity .2s; }
.ss-mascot:hover .ss-mascot-close, .ss-mascot-close:focus-visible { opacity: 1; }
/* Where the side margins are wide enough (as for the side scenes) it stands taller in the margin. */
@media (min-width: 1460px) { .ss-mascot { left: 18px; bottom: 70px; width: 92px; } }
@media (max-width: 991.98px) { .ss-mascot { display: none; } }

/* Its red envelope / present: a tap opens a card with a wish and a tip for keeping valuables safe; gold coins (snow for
   Giáng sinh) burst out. */
.ss-mascot-link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.ss-mascot.is-open .ss-mascot-say { display: none; }
.ss-wish { position: absolute; left: 0; bottom: calc(100% + 22px); width: 292px; padding: 16px 18px; border: 2px solid #f3c54b; border-radius: 18px; background: linear-gradient(#c8102e 0 66px, #fff8e8 66px); color: #4a2a1a; box-shadow: 0 26px 50px -18px rgb(0 0 0 / .45); text-align: center; animation: ss-wish-in .35s cubic-bezier(.2, .9, .3, 1.25) both; }
.ss-wish::before { content: ''; position: absolute; top: 44px; left: 50%; width: 36px; height: 36px; margin-left: -18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff4c2, #f3c54b 58%, #c8962a); box-shadow: 0 0 0 3px #c8102e; }
.ss-mascot.is-noel .ss-wish { border-color: #e8b84a; background: linear-gradient(#14703f 0 66px, #fff 66px); }
.ss-mascot.is-noel .ss-wish::before { background: radial-gradient(circle at 35% 35%, #ff8a7a, #d7261e 60%, #a5140f); box-shadow: 0 0 0 3px #14703f; }
.ss-wish-kicker { margin: 0 0 46px; color: #ffd66b; line-height: 20px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ss-mascot.is-noel .ss-wish-kicker { color: #fff; }
.ss-wish-text { margin: 0 0 10px; color: #8e0e1b; font-size: 18px; font-weight: 800; line-height: 1.35; }
.ss-mascot.is-noel .ss-wish-text { color: #14703f; }
.ss-wish-tip { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; text-align: left; }
.ss-wish-tip strong { color: #8e0e1b; }
.ss-wish-cta { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; border-radius: 999px; background: #c8102e; color: #fff; font-size: 14px; font-weight: 800; transition: transform .2s; }
.ss-wish-cta:hover { transform: translateY(-1px); color: #fff; }
.ss-mascot.is-noel .ss-wish-cta { background: #14703f; }
.ss-wish-close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .2); color: #fff; cursor: pointer; }
.ss-wish-close:focus-visible, .ss-wish-cta:focus-visible, .ss-mascot-link:focus-visible { outline: 3px solid #ffd66b; outline-offset: 2px; }
@keyframes ss-wish-in { from { opacity: 0; transform: translateY(16px) scale(.9); } }
.ss-wish-coins { position: absolute; left: 50%; bottom: -16px; width: 0; height: 0; pointer-events: none; }
.ss-wish-coins i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff4c2, #f3c54b 55%, #c8962a); box-shadow: inset 0 0 0 2px #c8962a; opacity: 0; animation: ss-coin 1.1s cubic-bezier(.2, .7, .3, 1) forwards; }
.ss-mascot.is-noel .ss-wish-coins i { width: 12px; height: 12px; background: #fff; box-shadow: 0 0 8px #fff, 0 0 2px #8fc2ff; }
@keyframes ss-coin { 0% { opacity: 1; transform: translate(0, 0) scale(.4) rotate(0deg); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1) rotate(320deg); } }


/* The ribbon with a line staff wrote (Tết delivery days…): on a phone the line itself shows, on two lines at most. */
@media (max-width: 767.98px) {
  .ss-ribbon.has-notice strong { display: none; }
  .ss-ribbon.has-notice p { white-space: normal; }
  .ss-ribbon.has-notice p span { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12.5px; line-height: 1.3; }
  .ss-ribbon.has-notice p span::before { content: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-fx, .ss-lantern, .ss-wish-coins { display: none; }
  .ss-wish, .ss-star, .ss-bulb, .ss-hero-swing, .w-hero-slide.is-active .w-hero-photo.is-art .ss-hero-art { animation: none; }
  .ss-ribbon::after, .ss-mascot-link, .ss-mascot-wave, .ss-mascot-say, .ss-sleigh, .ss-hang, .ss-lion, .ss-lion-head, .ss-lion-legs { animation: none; }
  .ss-mascot-say { opacity: 1; }
  :is(.ss-sleigh, .ss-lion) { left: auto; right: 4%; }
}
@media print { .ss-ribbon, .ss-mascot, .ss-header-fx, .ss-fx, .ss-lanterns { display: none; } }

/* ---------- congtyketviettiep.vn only ---------- */
.ss-wrap { box-sizing: border-box; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 12px; }
.ss-ribbon, .ss-mascot, .ss-wish { font-family: inherit; line-height: 1.4; }
.ss-ribbon p, .ss-wish p { margin-top: 0; }
.ss-ribbon p { color: #fff; font-size: 14px; }
.ss-ribbon a.ss-ribbon-cta, .ss-ribbon a.ss-ribbon-cta:hover, .ss-wish a.ss-wish-cta, .ss-wish a.ss-wish-cta:hover { text-decoration: none; }
.ss-ribbon.is-noel a.ss-ribbon-cta { color: #b3121b; }
.ss-ribbon.is-tet a.ss-ribbon-cta { color: #7a0a10; }
.ss-wish a.ss-wish-cta { color: #fff; }
.ss-mascot button, .ss-wish button { font-family: inherit; }
/* The sticky menu bar is the box of the sleigh / lion; what hangs under it must not be cut off. */
html:is([data-season='noel'], [data-season='tet']) #ja-menungang { overflow: visible; }

/* Giáng sinh: bulbs under the yellow top bar, a Santa hat on the logo, a snowman on the footer. */
html[data-season='noel'] .header2 { position: relative; }
html[data-season='noel'] .header2::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; z-index: 5; height: 12px; background: radial-gradient(circle at 50% 55%, #c8102e 0 3px, transparent 4px) 0 0 / 42px 12px, radial-gradient(circle at 50% 55%, #14703f 0 3px, transparent 4px) 14px 0 / 42px 12px, radial-gradient(circle at 50% 55%, #fff 0 3px, transparent 4px) 28px 0 / 42px 12px; animation: ss-twinkle 1.6s steps(2) infinite; pointer-events: none; }
html:is([data-season='noel'], [data-season='tet']) .header3_1 .custom a { position: relative; display: inline-block; }
html[data-season='noel'] .header3_1 .custom a::before { content: ''; position: absolute; top: -12px; left: -6px; z-index: 1; width: 46px; height: 34px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath d='M8 36C14 14 34 2 52 9l7 22-14-6-9 11z' fill='%23d7261e'/%3E%3Ccircle cx='58' cy='31' r='6' fill='%23fff'/%3E%3Crect x='2' y='32' width='44' height='12' rx='6' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain; transform: rotate(-16deg); pointer-events: none; }
html[data-season='tet'] .header3_1 .custom a::before { content: ''; position: absolute; top: -12px; left: -14px; z-index: 1; width: 50px; height: 37px; background: url('season/mai-sprig.svg') no-repeat center / contain; transform: rotate(-10deg); pointer-events: none; }
/* Tết: the top bar in red and gold. */
html[data-season='tet'] .header2 { background: linear-gradient(90deg, #8e0e1b, #c8102e 50%, #8e0e1b) !important; box-shadow: inset 0 -2px 0 #f3c54b; }
html[data-season='tet'] .header2 :is(.topbar-title, .header2_3 li, .header2_3 a, .header2_2 a) { color: #ffe7a3 !important; }
/* The footer. */
html:is([data-season='noel'], [data-season='tet']) #ja-chantrang { position: relative; }
html[data-season='noel'] #ja-chantrang::before { content: ''; position: absolute; top: -78px; left: 4%; z-index: 2; width: 66px; height: 84px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 100'%3E%3Cellipse cx='40' cy='96' rx='30' ry='4' fill='%23000' opacity='.15'/%3E%3Ccircle cx='40' cy='72' r='24' fill='%23fff'/%3E%3Ccircle cx='40' cy='36' r='17' fill='%23fff'/%3E%3Cpath d='M22 50c8 6 28 6 36 0l2 6c-10 6-30 6-40 0z' fill='%23d7261e'/%3E%3Cpath d='M50 52l8 16-6 2-6-14z' fill='%23d7261e'/%3E%3Crect x='26' y='14' width='28' height='5' rx='2' fill='%233a0d11'/%3E%3Crect x='31' y='0' width='18' height='16' rx='2' fill='%233a0d11'/%3E%3Ccircle cx='34' cy='32' r='2.2' fill='%233a0d11'/%3E%3Ccircle cx='46' cy='32' r='2.2' fill='%233a0d11'/%3E%3Cpath d='M40 37l14 3-14 3z' fill='%23f28c28'/%3E%3Ccircle cx='40' cy='64' r='2.4' fill='%233a0d11'/%3E%3Ccircle cx='40' cy='74' r='2.4' fill='%233a0d11'/%3E%3Cpath d='M18 64 4 54M62 64l14-10' stroke='%238a5a2b' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat bottom / contain; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .15)); pointer-events: none; }
html[data-season='tet'] #ja-chantrang::before, html[data-season='tet'] #ja-chantrang::after { content: ''; position: absolute; top: -64px; z-index: 2; width: 110px; height: 100px; background: url('season/tet-footer.svg') no-repeat bottom / contain; pointer-events: none; }
html[data-season='tet'] #ja-chantrang::before { left: 3%; }
html[data-season='tet'] #ja-chantrang::after { right: 3%; transform: scaleX(-1); }
@media (max-width: 767.98px) {
  html[data-season='noel'] #ja-chantrang::before { top: -56px; width: 46px; height: 60px; }
  html[data-season='tet'] #ja-chantrang::before, html[data-season='tet'] #ja-chantrang::after { top: -40px; width: 64px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) { html[data-season='noel'] .header2::after { animation: none; } }