millions

mega-loto-mili-css/mega-loto/assets/icons/arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 16L6 12L10 8M6 12L18 12" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

mega-loto-mili-css/mega-loto/assets/icons/chevron-down-2.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.59955 7.5C3.98445 8.16667 4.9467 8.16667 5.3316 7.5L8.7957 1.5C9.1806 0.833334 8.69948 0 7.92968 0H1.00147C0.231674 0 -0.249451 0.833333 0.135449 1.5L3.59955 7.5Z" fill="#0062FF"/>
+</svg>

mega-loto-mili-css/mega-loto/assets/icons/search.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.95 13.95L16.75 16.75M15.95 8.35C15.95 4.15264 12.5474 0.75 8.35 0.75C4.15264 0.75 0.75 4.15264 0.75 8.35C0.75 12.5474 4.15264 15.95 8.35 15.95C12.5474 15.95 15.95 12.5474 15.95 8.35Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

mega-loto-mili-css/mega-loto/css/all.min.css

@@ -0,0 +1,1554 @@
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+/*
+! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
+*/
+
+html,
+:host {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-feature-settings: normal;
+  /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-feature-settings: inherit;
+  /* 1 */
+  font-variation-settings: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden]:where(:not([hidden="until-found"])) {
+  display: none;
+}
+
+.pointer-events-none {
+  pointer-events: none;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.inset-x-0 {
+  left: 0px;
+  right: 0px;
+}
+
+.inset-x-3 {
+  left: 0.75rem;
+  right: 0.75rem;
+}
+
+.-bottom-1 {
+  bottom: -0.25rem;
+}
+
+.-bottom-\[52px\] {
+  bottom: -52px;
+}
+
+.-right-1 {
+  right: -0.25rem;
+}
+
+.-right-2 {
+  right: -0.5rem;
+}
+
+.-top-2\.5 {
+  top: -0.625rem;
+}
+
+.-top-3 {
+  top: -0.75rem;
+}
+
+.-top-4 {
+  top: -1rem;
+}
+
+.-top-\[5px\] {
+  top: -5px;
+}
+
+.bottom-0 {
+  bottom: 0px;
+}
+
+.bottom-3 {
+  bottom: 0.75rem;
+}
+
+.bottom-\[88px\] {
+  bottom: 88px;
+}
+
+.left-5 {
+  left: 1.25rem;
+}
+
+.left-\[26px\] {
+  left: 26px;
+}
+
+.right-2 {
+  right: 0.5rem;
+}
+
+.right-5 {
+  right: 1.25rem;
+}
+
+.top-0 {
+  top: 0px;
+}
+
+.top-1\/2 {
+  top: 50%;
+}
+
+.top-\[56px\] {
+  top: 56px;
+}
+
+.z-0 {
+  z-index: 0;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.z-20 {
+  z-index: 20;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.-mt-1 {
+  margin-top: -0.25rem;
+}
+
+.-mt-5 {
+  margin-top: -1.25rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-20 {
+  margin-top: 5rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.h-1 {
+  height: 0.25rem;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
+.h-2 {
+  height: 0.5rem;
+}
+
+.h-20 {
+  height: 5rem;
+}
+
+.h-3 {
+  height: 0.75rem;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
+.h-5 {
+  height: 1.25rem;
+}
+
+.h-6 {
+  height: 1.5rem;
+}
+
+.h-7 {
+  height: 1.75rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
+.h-\[160px\] {
+  height: 160px;
+}
+
+.h-\[34px\] {
+  height: 34px;
+}
+
+.h-auto {
+  height: auto;
+}
+
+.h-dvh {
+  height: 100dvh;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.w-2 {
+  width: 0.5rem;
+}
+
+.w-20 {
+  width: 5rem;
+}
+
+.w-3 {
+  width: 0.75rem;
+}
+
+.w-4 {
+  width: 1rem;
+}
+
+.w-44 {
+  width: 11rem;
+}
+
+.w-5 {
+  width: 1.25rem;
+}
+
+.w-6 {
+  width: 1.5rem;
+}
+
+.w-7 {
+  width: 1.75rem;
+}
+
+.w-8 {
+  width: 2rem;
+}
+
+.w-\[12px\] {
+  width: 12px;
+}
+
+.w-\[17px\] {
+  width: 17px;
+}
+
+.w-\[5px\] {
+  width: 5px;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.w-px {
+  width: 1px;
+}
+
+.min-w-0 {
+  min-width: 0px;
+}
+
+.max-w-\[500px\] {
+  max-width: 500px;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.shrink-0 {
+  flex-shrink: 0;
+}
+
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.rotate-\[10deg\] {
+  --tw-rotate: 10deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.rotate-\[15deg\] {
+  --tw-rotate: 15deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-0\.5 {
+  gap: 0.125rem;
+}
+
+.gap-1 {
+  gap: 0.25rem;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-3 {
+  gap: 0.75rem;
+}
+
+.gap-5 {
+  gap: 1.25rem;
+}
+
+.gap-x-1 {
+  -moz-column-gap: 0.25rem;
+       column-gap: 0.25rem;
+}
+
+.gap-y-1 {
+  row-gap: 0.25rem;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-2xl {
+  border-radius: 1rem;
+}
+
+.rounded-\[12px\] {
+  border-radius: 12px;
+}
+
+.rounded-\[20px\] {
+  border-radius: 20px;
+}
+
+.rounded-\[32px\] {
+  border-radius: 32px;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.rounded-b-\[40px\] {
+  border-bottom-right-radius: 40px;
+  border-bottom-left-radius: 40px;
+}
+
+.rounded-t-\[32px\] {
+  border-top-left-radius: 32px;
+  border-top-right-radius: 32px;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.border-\[1\.8px\] {
+  border-width: 1.8px;
+}
+
+.border-\[\#b9b9b9\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(185 185 185 / var(--tw-border-opacity));
+}
+
+.border-\[\#c2c2c2\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(194 194 194 / var(--tw-border-opacity));
+}
+
+.border-\[\#ccc\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(204 204 204 / var(--tw-border-opacity));
+}
+
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
+.border-white\/70 {
+  border-color: rgb(255 255 255 / 0.7);
+}
+
+.bg-\[\#0062ff\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 98 255 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#e6f0ff\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(230 240 255 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#ececec\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 236 236 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#ecf3fd\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 243 253 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#ee0033\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(238 0 51 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#f5f7fb\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 247 251 / var(--tw-bg-opacity));
+}
+
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.bg-white\/15 {
+  background-color: rgb(255 255 255 / 0.15);
+}
+
+.bg-white\/20 {
+  background-color: rgb(255 255 255 / 0.2);
+}
+
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.px-1\.5 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+.py-0\.5 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
+
+.pl-4 {
+  padding-left: 1rem;
+}
+
+.pt-10 {
+  padding-top: 2.5rem;
+}
+
+.pt-3 {
+  padding-top: 0.75rem;
+}
+
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.align-top {
+  vertical-align: top;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.text-\[10\.32px\] {
+  font-size: 10.32px;
+}
+
+.text-\[10px\] {
+  font-size: 10px;
+}
+
+.text-\[22px\] {
+  font-size: 22px;
+}
+
+.text-\[28px\] {
+  font-size: 28px;
+}
+
+.text-\[32px\] {
+  font-size: 32px;
+}
+
+.text-\[40px\] {
+  font-size: 40px;
+}
+
+.text-\[6px\] {
+  font-size: 6px;
+}
+
+.text-\[8px\] {
+  font-size: 8px;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-extrabold {
+  font-weight: 800;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.leading-none {
+  line-height: 1;
+}
+
+.leading-tight {
+  line-height: 1.25;
+}
+
+.tracking-tight {
+  letter-spacing: -0.025em;
+}
+
+.text-\[\#002bff\] {
+  --tw-text-opacity: 1;
+  color: rgb(0 43 255 / var(--tw-text-opacity));
+}
+
+.text-\[\#0062ff\] {
+  --tw-text-opacity: 1;
+  color: rgb(0 98 255 / var(--tw-text-opacity));
+}
+
+.text-\[\#797979\] {
+  --tw-text-opacity: 1;
+  color: rgb(121 121 121 / var(--tw-text-opacity));
+}
+
+.text-\[\#8e8e93\] {
+  --tw-text-opacity: 1;
+  color: rgb(142 142 147 / var(--tw-text-opacity));
+}
+
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.text-white\/80 {
+  color: rgb(255 255 255 / 0.8);
+}
+
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+:root {
+  --main-color: #fff;
+  --color-primary: #0062ff;
+  --color-primary-dark: #001ec7;
+  --color-red: #ee0033;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #f5f7fb;
+  font-family: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.font-condensed {
+  font-family: 'DIN Condensed', 'Barlow Condensed', 'Bricolage Grotesque', sans-serif;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+}
+
+.font-futura {
+  font-family: 'UTM Futura Extra', 'Futura', 'Helvetica Neue', sans-serif;
+  font-weight: 800;
+}
+
+html {
+  font-size: 16px;
+}
+
+.main-content {
+  background: var(--main-color);
+}
+
+/* ===== Header ===== */
+
+.header-bg {
+  background: linear-gradient(180deg, #001ec7 0%, #0062ff 100%);
+}
+
+.header-bg::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image:
+        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0) 30%),
+        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.06) 0, rgba(255, 255, 255, 0) 35%);
+  pointer-events: none;
+}
+
+/* ===== Gold gradient text ===== */
+
+.text-gold-gradient {
+  background: linear-gradient(178deg, #fff6eb 16%, #ffbb32 96%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+
+/* ===== Number balls ===== */
+
+.ball {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 18px;
+  color: #fff;
+  flex-shrink: 0;
+  border: 1.5px solid rgba(0, 98, 255, 0.07);
+  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.45));
+  position: relative;
+}
+
+.ball::before {
+  content: "";
+  position: absolute;
+  top: 2.7px;
+  right: 2.7px;
+  width: 25.14px;
+  height: 25.14px;
+  border-radius: 50%;
+  background: linear-gradient(225deg,
+        rgba(255, 255, 255, 0.6) 0%,
+        rgba(255, 255, 255, 0) 100%);
+  pointer-events: none;
+}
+
+.ball-blue {
+  background:
+        radial-gradient(circle at 50% 50%,
+            #fbfbfb 0%,
+            #fbfbfb 50%,
+            #c6c7e3 72%,
+            #9293cb 90%);
+  box-shadow:
+        inset 0 0 0 1.5px rgba(30, 63, 232, 0.55),
+        inset 0 0 6px 3px rgba(146, 147, 203, 0.6);
+  color: #0062ff;
+}
+
+.ball-mini {
+  width: 28px;
+  height: 28px;
+  font-size: 12px;
+  border-width: 0.94px;
+  filter: drop-shadow(1.31px 1.31px 1.97px rgba(0, 0, 0, 0.45));
+}
+
+.ball-mini::before {
+  top: 1.7px;
+  right: 1.7px;
+  width: 16px;
+  height: 16px;
+}
+
+.result-card {
+  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
+}
+
+.ball-mb {
+  background: radial-gradient(circle at 50% 50%,
+        #0062ff 0%,
+        #0062ff 60%,
+        #0149f0 75%,
+        #0231e0 85%,
+        #0218d1 92%,
+        #0300c2 100%);
+  box-shadow: inset 0 0 8px 3px rgba(0, 24, 209, 0.5);
+  color: #fff;
+  border: 0;
+}
+
+/* ===== Result box ===== */
+
+.result-box {
+  background: rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  border: 1px solid #fff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* ===== Mega Jackpot banner ===== */
+
+.mega-banner {
+  background: linear-gradient(-1.8deg, #050068 3.87%, #0062ff 96.13%);
+}
+
+.mega-amount {
+  display: inline-block;
+  transform: scaleY(1.35);
+  transform-origin: top left;
+  font-weight: 700;
+}
+
+.mega-title {
+  font-family: 'UTM Futura Extra', 'Bricolage Grotesque', 'Futura', 'Helvetica Neue', sans-serif;
+  font-weight: 800;
+  font-style: italic;
+  letter-spacing: -0.5px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+  -webkit-text-stroke: 0.5px #fff;
+}
+
+.mega-banner::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image:
+        radial-gradient(circle at -5% -10%, rgba(255, 255, 255, 0.22) 0, rgba(255, 255, 255, 0) 30%),
+        radial-gradient(circle at 105% 0%, rgba(255, 255, 255, 0.20) 0, rgba(255, 255, 255, 0) 28%),
+        radial-gradient(circle at 105% 110%, rgba(255, 255, 255, 0.18) 0, rgba(255, 255, 255, 0) 35%),
+        radial-gradient(circle at 60% 40%, rgba(255, 255, 255, 0.10) 0, rgba(255, 255, 255, 0) 25%);
+  pointer-events: none;
+}
+
+.mega-glow {
+  position: absolute;
+  width: 193px;
+  height: 193px;
+  border-radius: 50%;
+  background: linear-gradient(270deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.mega-banner::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+        radial-gradient(circle at 62% 28%, #fff 0, #fff 5px, transparent 5.5px),
+        radial-gradient(circle at 56% 50%, #fff 0, #fff 7px, transparent 7.5px),
+        radial-gradient(circle at 68% 35%, #fff 0, #fff 3px, transparent 3.5px);
+}
+
+/* ===== Play now button ===== */
+
+.play-now-outer {
+  border: 1.8px solid rgba(255, 255, 255, 0.5);
+  box-shadow: 0 1.8px 8.1px rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+}
+
+.play-now-outer::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.61) 0%, rgba(246, 226, 130, 0.6) 100%);
+  mix-blend-mode: screen;
+  pointer-events: none;
+}
+
+.play-now-ring {
+  background: linear-gradient(180deg, #0400ff 0%, #0300b2 100%);
+  filter: drop-shadow(0 3.6px 3.6px rgba(0, 0, 0, 0.55));
+}
+
+.play-now-btn {
+  background:
+        radial-gradient(circle at 50% 50%,
+            #0059ff 0%,
+            #0443ee 25%,
+            #082dde 50%,
+            #0c16cd 75%,
+            #1000bd 100%);
+  box-shadow: inset 1.8px 1.8px 9px rgba(255, 255, 255, 0.55);
+  text-align: center;
+  font-style: italic;
+  font-family: 'Bricolage Grotesque', sans-serif;
+  text-shadow: 0 3.6px 3.6px rgba(0, 0, 0, 0.25);
+}
+
+/* ===== Bottom navigation ===== */
+
+.navigation {
+  background: linear-gradient(180deg, #ffffff 0%, #f4f6fb 100%);
+  box-shadow: 0 -6px 12px 0 rgba(0, 98, 255, 0.25);
+}
+
+.nav-item.active span {
+  color: var(--color-primary);
+}

mega-loto-mili-css/mega-loto/detail.html

@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Mega Loto - Detail</title>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="css/all.min.css"/>
+
+    <script src="lib/jquery/jquery.min.js"></script>
+    <script src="js/all.min.js"></script>
+</head>
+
+<body>
+
+<div class="main-content h-dvh max-w-[500px] mx-auto bg-[#ececec] relative overflow-hidden">
+
+    <!-- Header gradient -->
+    <div class="header-bg absolute inset-x-0 top-0 h-[160px] flex flex-col items-center pt-4 px-3 z-0">
+        <div class="w-full flex items-center justify-between">
+            <button class="js-back w-6 h-6 flex items-center justify-center">
+                <img src="assets/icons/arrow-left.svg" alt="Back" class="w-6 h-6"/>
+            </button>
+            <p class="text-white text-base font-bold">Kết quả Jackpot</p>
+            <span class="w-6 h-6"></span>
+        </div>
+        <p class="text-white/80 text-xs -mt-1">Draw #<span class="font-bold">0015</span></p>
+    </div>
+
+    <!-- White rounded body (overlaps header, scrollable) -->
+    <div class="absolute inset-x-0 top-[56px] bottom-0 bg-white rounded-t-[32px] flex flex-col gap-2 px-5 pt-4 pb-3 overflow-y-auto z-10">
+
+        <!-- Top: Draw info + MB ball + Jackpot prize -->
+        <div class="flex items-start justify-between shrink-0">
+            <div class="flex flex-col gap-1 items-start">
+                <span class="bg-[#0062ff] text-white text-base font-bold rounded-xl px-2 py-1">Draw #0015</span>
+                <div class="flex items-center gap-1">
+                    <img src="assets/icons/calendar.png" alt="" class="w-5 h-5"/>
+                    <span class="text-xs text-black">Friday, Mar 20, 2026</span>
+                </div>
+                <div class="flex items-center gap-1">
+                    <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="#0062ff" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2" stroke-linecap="round"/></svg>
+                    <span class="text-xs text-black">21:00</span>
+                </div>
+            </div>
+
+            <div class="flex items-center gap-2 relative">
+                <div class="relative">
+                    <img src="assets/icons/crown.png" alt="" class="absolute -top-3 -right-1 w-5 h-auto rotate-[15deg] z-0 pointer-events-none"/>
+                    <div class="ball ball-mb relative z-10" style="width:52px;height:52px;font-size:22px;">12</div>
+                    <span class="absolute -bottom-1 -right-1 bg-[#ee0033] text-white text-[10px] font-bold px-1 py-0.5 rounded z-20">MB</span>
+                </div>
+                <div class="flex flex-col">
+                    <span class="text-xs font-bold text-black">Jackpot Prize</span>
+                    <p class="leading-none mt-1">
+                        <span class="text-[28px] font-condensed font-bold text-[#002bff] tracking-tight">30,000,000</span><span class="text-xs font-bold text-black ml-1 align-top">HTG</span>
+                    </p>
+                    <span class="text-[8px] font-bold text-[#8e8e93] mt-1">Mega Jackpot</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Winning Numbers box -->
+        <div class="result-box rounded-[32px] py-3 flex flex-col gap-2 shrink-0">
+            <p class="text-xs font-bold text-black text-center">Winning Numbers</p>
+            <div class="flex items-center justify-center gap-3 px-4">
+                <div class="ball ball-blue">7</div>
+                <div class="ball ball-blue">16</div>
+                <div class="ball ball-blue">32</div>
+                <div class="ball ball-blue">35</div>
+                <div class="ball ball-blue">40</div>
+                <div class="relative">
+                    <img src="assets/icons/crown.png" alt="" class="absolute -top-4 -right-1 w-7 h-auto rotate-[15deg] z-0 pointer-events-none"/>
+                    <div class="ball ball-mb relative z-10">12</div>
+                    <span class="absolute -bottom-1 -right-2 bg-[#ee0033] text-white text-[8px] font-bold px-1.5 py-0.5 rounded z-20">MB</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Winning Subscribes -->
+        <div class="result-box rounded-xl py-3 flex flex-col gap-2 shrink-0">
+            <div class="flex flex-col px-5 gap-1">
+                <p class="text-xs font-bold text-black">Winning Subscribes (10)</p>
+                <p class="text-xs text-black">10 subscribers won the jackpot prize</p>
+            </div>
+            <div class="grid grid-cols-2 gap-1 px-5">
+                <div class="flex items-center gap-2 border border-[#ccc] rounded-lg px-2 py-1.5"><span class="bg-[#0062ff] text-white text-xs font-bold rounded-lg w-4 h-4 flex items-center justify-center">1</span><span class="text-xs font-bold text-black">+059 22***66</span></div>
+                <div class="flex items-center gap-2 border border-[#ccc] rounded-lg px-2 py-1.5"><span class="bg-[#0062ff] text-white text-xs font-bold rounded-lg w-4 h-4 flex items-center justify-center">1</span><span class="text-xs font-bold text-black">+059 22***66</span></div>
+                <div class="flex items-center gap-2 border border-[#ccc] rounded-lg px-2 py-1.5"><span class="bg-[#0062ff] text-white text-xs font-bold rounded-lg w-4 h-4 flex items-center justify-center">1</span><span class="text-xs font-bold text-black">+059 22***66</span></div>
+                <div class="flex items-center gap-2 border border-[#ccc] rounded-lg px-2 py-1.5"><span class="bg-[#0062ff] text-white text-xs font-bold rounded-lg w-4 h-4 flex items-center justify-center">1</span><span class="text-xs font-bold text-black">+059 22***66</span></div>
+                <div class="flex items-center gap-2 border border-[#ccc] rounded-lg px-2 py-1.5"><span class="bg-[#0062ff] text-white text-xs font-bold rounded-lg w-4 h-4 flex items-center justify-center">1</span><span class="text-xs font-bold text-black">+059 22***66</span></div>
+                <div class="flex items-center gap-2 border border-[#ccc] rounded-lg px-2 py-1.5"><span class="bg-[#0062ff] text-white text-xs font-bold rounded-lg w-4 h-4 flex items-center justify-center">1</span><span class="text-xs font-bold text-black">+059 22***66</span></div>
+                <div class="flex items-center gap-2 border border-[#ccc] rounded-lg px-2 py-1.5"><span class="bg-[#0062ff] text-white text-xs font-bold rounded-lg w-4 h-4 flex items-center justify-center">1</span><span class="text-xs font-bold text-black">+059 22***66</span></div>
+                <div class="flex items-center gap-2 border border-[#ccc] rounded-lg px-2 py-1.5"><span class="bg-[#0062ff] text-white text-xs font-bold rounded-lg w-4 h-4 flex items-center justify-center">1</span><span class="text-xs font-bold text-black">+059 22***66</span></div>
+                <div class="flex items-center gap-2 border border-[#ccc] rounded-lg px-2 py-1.5"><span class="bg-[#0062ff] text-white text-xs font-bold rounded-lg w-4 h-4 flex items-center justify-center">1</span><span class="text-xs font-bold text-black">+059 22***66</span></div>
+                <div class="flex items-center gap-2 border border-[#ccc] rounded-lg px-2 py-1.5"><span class="bg-[#0062ff] text-white text-xs font-bold rounded-lg w-4 h-4 flex items-center justify-center">1</span><span class="text-xs font-bold text-black">+059 22***66</span></div>
+            </div>
+        </div>
+
+        <!-- Draw information -->
+        <div class="result-box rounded-xl py-3 flex flex-col gap-2 px-5">
+            <p class="text-xs font-bold text-black">Draw information</p>
+            <div class="grid grid-cols-2 gap-x-1 gap-y-1 text-xs">
+                <p class="text-[#8e8e93]">Game Type</p>
+                <p class="font-bold text-black">Mega Jackpot</p>
+                <p class="text-[#8e8e93]">Total Participants</p>
+                <p class="font-bold text-black">125.689</p>
+                <p class="text-[#8e8e93]">Draw Date &amp; Time</p>
+                <p class="font-bold text-black">Mar 20, 2026 - 21:05</p>
+            </div>
+        </div>
+
+        <!-- Note -->
+        <div class="bg-[#ecf3fd] rounded-xl px-3 py-2 flex flex-col gap-1 shrink-0">
+            <div class="flex items-center gap-1">
+                <span class="bg-[#0062ff] text-white text-sm font-bold rounded-xl w-[17px] h-5 flex items-center justify-center leading-none">i</span>
+                <p class="text-[10px] font-bold text-[#0062ff]">Note</p>
+            </div>
+            <div class="text-xs text-[#8e8e93] leading-tight">
+                <p>The result is public announced and verified</p>
+                <p>Thank you for your trust and support</p>
+            </div>
+        </div>
+
+        <!-- Back button -->
+        <a href="kq.html" class="bg-[#0062ff] text-white text-sm font-bold text-center rounded-xl px-3 py-3 mt-2 mb-1 shrink-0">Back to Results list</a>
+
+    </div>
+
+</div>
+
+</body>
+
+</html>

mega-loto-mili-css/mega-loto/index.html

@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Mega Loto - Home</title>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="css/all.min.css"/>
+
+    <script src="lib/jquery/jquery.min.js"></script>
+    <script src="js/all.min.js"></script>
+</head>
+
+<body>
+
+<div class="main-content h-dvh max-w-[500px] mx-auto bg-[#f5f7fb] relative overflow-hidden">
+
+    <!-- Scrollable content area -->
+    <div class="absolute inset-x-0 top-0 bottom-[88px] overflow-y-auto flex flex-col">
+
+        <!-- Top section with header + cards -->
+        <div class="relative">
+
+            <!-- Header gradient background -->
+            <div class="header-bg relative h-[160px] rounded-b-[40px] overflow-hidden">
+                <!-- Top bar -->
+                <div class="flex items-center justify-between px-3 pt-3 relative z-10">
+                    <button class="js-back w-6 h-6 flex items-center justify-center">
+                        <img src="assets/icons/arrow-left.svg" alt="Back" class="w-6 h-6"/>
+                    </button>
+                    <button class="flex items-center gap-2 bg-white/15 rounded-full px-3 py-1 text-white text-sm">
+                        <span>🏴󠁧󠁢󠁥󠁮󠁧󠁿 English</span>
+                        <img src="assets/icons/chevron-down.svg" alt="" class="w-2 h-2"/>
+                    </button>
+                </div>
+
+                <!-- User profile -->
+                <div class="flex items-center gap-5 px-5 mt-2">
+                    <div class="w-20 h-20 rounded-full overflow-hidden bg-white/20 border-2 border-white shrink-0">
+                        <img src="assets/images/avatar.png" alt="Avatar" class="w-full h-full object-cover"/>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <p class="text-white text-base font-semibold leading-tight">Amit Sharma</p>
+                        <div class="flex items-center gap-1 mt-1">
+                            <span class="text-3xl font-condensed text-gold-gradient leading-none">1.000.000</span>
+                            <img src="assets/icons/coin.png" alt="" class="w-5 h-5"/>
+                            <span class="text-white text-sm">Coins</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Floating info card -->
+            <div class="absolute left-5 right-5 -bottom-[52px] bg-white rounded-2xl shadow-md flex items-center h-20 px-4">
+                <div class="flex items-center gap-2 flex-1">
+                    <img src="assets/icons/calendar.png" alt="" class="w-6 h-6"/>
+                    <div>
+                        <p class="text-xs text-[#797979]">Next draw</p>
+                        <p class="text-xs font-bold text-black">Friday, Mar 20, 2026</p>
+                    </div>
+                </div>
+                <div class="w-px h-12 bg-gray-200"></div>
+                <div class="flex items-center gap-2 flex-1 pl-4">
+                    <img src="assets/icons/money-bag.png" alt="" class="w-6 h-[34px] object-contain"/>
+                    <div>
+                        <p class="text-xs text-[#797979]">Next est Jackpot</p>
+                        <p class="leading-none">
+                            <span class="text-base font-extrabold text-[#002bff]">30,000,000</span><span class="text-[10.32px] font-extrabold text-black align-top">HTG</span>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Result section -->
+        <div class="px-5 mt-20">
+            <div class="result-box rounded-[32px] py-3 flex flex-col gap-2">
+                <div class="flex items-center justify-between px-4">
+                    <div class="flex items-center gap-2 text-xs">
+                        <span class="text-[#797979]">Result</span>
+                        <span class="font-bold text-black">Monday, Mar 20, 2026</span>
+                    </div>
+                    <a href="kq.html" class="flex items-center gap-1 text-[10px] font-bold text-black border border-[#c2c2c2] rounded-lg px-2 py-1">
+                        View all results
+                        <img src="assets/icons/chevron-right.svg" alt="" class="w-[5px] h-2"/>
+                    </a>
+                </div>
+
+                <!-- Result balls -->
+                <div class="flex items-center justify-between gap-1 px-4">
+                    <div class="ball ball-blue">7</div>
+                    <div class="ball ball-blue">16</div>
+                    <div class="ball ball-blue">32</div>
+                    <div class="ball ball-blue">35</div>
+                    <div class="ball ball-blue">40</div>
+                    <div class="relative">
+                        <img src="assets/icons/crown.png" alt="" class="absolute -top-4 -right-1 w-7 h-auto pointer-events-none rotate-[15deg] z-0"/>
+                        <div class="ball ball-mb relative z-10">
+                            <span>12</span>
+                            <span class="absolute -bottom-1 -right-2 bg-[#ee0033] text-white text-[8px] font-bold px-1.5 py-0.5 rounded z-20">MB</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Mega Jackpot banner -->
+        <div class="px-2 mt-6">
+            <div class="mega-banner relative rounded-[20px] overflow-hidden px-4 py-3 flex flex-col">
+                <span class="mega-glow" style="left:-79px; top:-101px;"></span>
+                <span class="mega-glow" style="right:-78px; top:9px;"></span>
+                <span class="mega-glow" style="right:-107px; top:20px;"></span>
+                <p class="mega-title relative inline-block text-white text-[22px] font-futura leading-none">
+                    <img src="assets/icons/crown.png" alt="" class="absolute -top-[5px] left-[26px] w-[12px] h-auto rotate-[10deg] pointer-events-none"/>
+                    Mega Jackpot
+                </p>
+                <p class="text-white text-xs mt-2">Estimate Jackpot Prize</p>
+                <p class="leading-none mt-1 flex items-start" style="margin-bottom:18px;">
+                    <span class="mega-amount text-[40px] font-condensed text-gold-gradient tracking-tight leading-none">27.000.000</span>
+                    <span class="text-gold-gradient text-sm font-bold uppercase ml-1">htg</span>
+                </p>
+                <p class="text-white text-[10px] mt-1">Be the next millionaire</p>
+
+                <!-- Decorative elements -->
+                <img src="assets/images/crown-balls.png" alt="" class="absolute right-2 top-1/2 -translate-y-1/2 w-44 h-auto pointer-events-none"/>
+            </div>
+        </div>
+
+        <!-- Play now button + decorative balls -->
+        <div class="relative shrink-0 -mt-5 z-10">
+            <img src="assets/images/play-decor.png" alt="" class="block w-full h-auto pointer-events-none"/>
+
+            <a href="play.html" class="play-now-outer rounded-full" style="position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:155px; height:155px; padding:11px;">
+                <div class="play-now-ring rounded-full" style="width:100%;height:100%;padding:4px;">
+                    <div class="play-now-btn rounded-full flex flex-col items-center justify-center text-white text-[32px] font-bold border-[1.8px] border-white" style="width:100%;height:100%;line-height:24px;">
+                        <span>Play</span>
+                        <span>now</span>
+                    </div>
+                </div>
+            </a>
+        </div>
+
+    </div><!-- /scrollable -->
+
+    <!-- Bottom navigation (fixed at bottom) -->
+    <nav class="navigation absolute inset-x-3 bottom-3 z-20 px-3 py-2 rounded-2xl">
+        <div class="flex items-center justify-between">
+            <a href="index.html" class="nav-item active flex flex-col items-center flex-1">
+                <img src="assets/icons/nav-home.png" alt="" class="w-7 h-7"/>
+                <span class="text-xs mt-1 text-[#0062ff] font-semibold">Home</span>
+                <span class="w-5 h-1 bg-[#0062ff] rounded-full mt-1"></span>
+            </a>
+            <a href="#" class="nav-item flex flex-col items-center flex-1">
+                <img src="assets/icons/nav-rule.png" alt="" class="w-7 h-7"/>
+                <span class="text-xs mt-1 text-gray-700">Rule</span>
+            </a>
+            <a href="#" class="nav-item flex flex-col items-center flex-1">
+                <img src="assets/icons/nav-history.png" alt="" class="w-7 h-7"/>
+                <span class="text-xs mt-1 text-gray-700">History</span>
+            </a>
+            <a href="#" class="nav-item flex flex-col items-center flex-1">
+                <img src="assets/icons/nav-faq.png" alt="" class="w-7 h-7"/>
+                <span class="text-xs mt-1 text-gray-700">FAQ</span>
+            </a>
+            <a href="#" class="nav-item flex flex-col items-center flex-1">
+                <img src="assets/icons/nav-more.png" alt="" class="w-7 h-7"/>
+                <span class="text-xs mt-1 text-gray-700">More</span>
+            </a>
+        </div>
+    </nav>
+
+</div>
+
+</body>
+
+</html>

mega-loto-mili-css/mega-loto/js/all.min.js

@@ -0,0 +1,13 @@
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll(".js-back").forEach(el => {
+    el.addEventListener("click", e => {
+      e.preventDefault();
+      if (document.referrer && history.length > 1) {
+        history.back();
+      } else {
+        window.location.href = "index.html";
+      }
+    });
+  });
+});
+

mega-loto-mili-css/mega-loto/kq.html

@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Mega Loto - Kết quả Jackpot</title>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="css/all.min.css"/>
+
+    <script src="lib/jquery/jquery.min.js"></script>
+    <script src="js/all.min.js"></script>
+</head>
+
+<body>
+
+<div class="main-content h-dvh max-w-[500px] mx-auto bg-[#ececec] relative overflow-hidden">
+
+    <!-- Header gradient -->
+    <div class="header-bg absolute inset-x-0 top-0 h-[160px] flex items-start justify-between px-3 pt-4 z-0">
+        <button class="js-back w-6 h-6 flex items-center justify-center">
+            <img src="assets/icons/arrow-left.svg" alt="Back" class="w-6 h-6"/>
+        </button>
+        <p class="text-white text-base font-bold">Kết quả Jackpot</p>
+        <span class="w-6 h-6"></span>
+    </div>
+
+    <!-- White rounded body (overlaps header, scrollable) -->
+    <div class="absolute inset-x-0 top-[56px] bottom-[88px] bg-white rounded-t-[32px] flex flex-col gap-3 px-2 pt-4 pb-2 overflow-y-auto z-10">
+
+        <!-- Date filter + search -->
+        <div class="flex items-center justify-between gap-3 shrink-0">
+            <div class="flex items-center gap-3 bg-white border border-[#b9b9b9] rounded-lg h-8 px-3">
+                <div class="flex items-center gap-1">
+                    <img src="assets/icons/calendar.png" alt="" class="w-5 h-5"/>
+                    <span class="text-xs font-bold text-black whitespace-nowrap">20/02/2026 - 20/03/2026</span>
+                </div>
+                <img src="assets/icons/chevron-down-2.svg" alt="" class="w-3 h-3"/>
+            </div>
+            <button class="bg-[#0062ff] rounded-lg w-8 h-8 flex items-center justify-center shrink-0">
+                <img src="assets/icons/search.svg" alt="" class="w-4 h-4"/>
+            </button>
+        </div>
+
+        <!-- Mega Jackpot banner -->
+        <div class="mega-banner relative rounded-[12px] overflow-hidden px-4 py-3 border-2 border-white/70 flex flex-col shrink-0">
+            <span class="mega-glow" style="left:-79px; top:-101px;"></span>
+            <span class="mega-glow" style="right:-78px; top:9px;"></span>
+            <span class="mega-glow" style="right:-107px; top:20px;"></span>
+            <p class="mega-title relative inline-block text-white text-[22px] font-futura leading-none">
+                <img src="assets/icons/crown.png" alt="" class="absolute -top-[5px] left-[26px] w-[12px] h-auto rotate-[10deg] pointer-events-none"/>
+                Mega Jackpot
+            </p>
+            <p class="text-white text-xs mt-2">Estimate Jackpot Prize</p>
+            <p class="leading-none mt-1 flex items-start" style="margin-bottom:18px;">
+                <span class="mega-amount text-[40px] font-condensed text-gold-gradient tracking-tight leading-none">27.000.000</span>
+                <span class="text-gold-gradient text-sm font-bold uppercase ml-1">htg</span>
+            </p>
+            <p class="text-white text-[10px] mt-1">Be the next millionaire</p>
+            <img src="assets/images/crown-balls.png" alt="" class="absolute right-2 top-1/2 -translate-y-1/2 w-44 h-auto pointer-events-none"/>
+        </div>
+
+        <!-- List heading -->
+        <div class="px-2 shrink-0">
+            <div class="flex items-center justify-between font-bold">
+                <p class="text-sm text-black">Danh sách kết quả Jackpot</p>
+                <p class="text-xs text-[#0062ff]">Tổng cộng 16 kỳ quay</p>
+            </div>
+
+            <!-- Results list -->
+            <div class="flex flex-col gap-2 pb-2">
+
+                <!-- Card -->
+                <a href="detail.html" class="result-card bg-white rounded-xl flex items-center justify-between px-3 py-2 gap-2">
+                    <div class="flex flex-col gap-0.5 items-start shrink-0">
+                        <span class="bg-[#0062ff] text-white text-[10px] font-bold rounded px-1 py-0.5">Kỳ #0015</span>
+                        <span class="text-xs text-[#8e8e93]">Thứ Sáu</span>
+                        <span class="text-[8px] font-bold text-[#8e8e93]">20/03/2026</span>
+                        <span class="text-[8px] font-bold text-[#8e8e93]">21:00</span>
+                    </div>
+                    <div class="grid grid-cols-3 gap-1">
+                        <div class="ball ball-blue ball-mini">7</div>
+                        <div class="ball ball-blue ball-mini">16</div>
+                        <div class="ball ball-blue ball-mini">40</div>
+                        <div class="ball ball-blue ball-mini">35</div>
+                        <div class="ball ball-blue ball-mini">32</div>
+                        <div class="relative">
+                            <img src="assets/icons/crown.png" alt="" class="absolute -top-2.5 -right-1 w-4 h-auto rotate-[15deg] pointer-events-none z-0"/>
+                            <div class="ball ball-mb ball-mini relative z-10">12</div>
+                            <span class="absolute -bottom-1 -right-1 bg-[#ee0033] text-white text-[6px] font-bold px-1 rounded z-20">MB</span>
+                        </div>
+                    </div>
+                    <div class="flex flex-col gap-0.5 items-start shrink-0">
+                        <span class="text-xs font-bold text-black">Jackpot</span>
+                        <p class="leading-none">
+                            <span class="text-base font-extrabold text-[#002bff]">30,000,000</span><span class="text-[10.32px] font-extrabold text-black align-top">HTG</span>
+                        </p>
+                        <span class="text-[8px] text-black">1 thuê bao trúng thưởng</span>
+                        <span class="text-[8px] font-medium text-black">+509 23****67</span>
+                    </div>
+                    <img src="assets/icons/chevron-right.svg" alt="" class="w-2 h-3 shrink-0"/>
+                </a>
+
+                <a href="detail.html" class="result-card bg-white rounded-xl flex items-center justify-between px-3 py-2 gap-2">
+                    <div class="flex flex-col gap-0.5 items-start shrink-0">
+                        <span class="bg-[#0062ff] text-white text-[10px] font-bold rounded px-1 py-0.5">Kỳ #0015</span>
+                        <span class="text-xs text-[#8e8e93]">Thứ Sáu</span>
+                        <span class="text-[8px] font-bold text-[#8e8e93]">20/03/2026</span>
+                        <span class="text-[8px] font-bold text-[#8e8e93]">21:00</span>
+                    </div>
+                    <div class="grid grid-cols-3 gap-1">
+                        <div class="ball ball-blue ball-mini">7</div>
+                        <div class="ball ball-blue ball-mini">16</div>
+                        <div class="ball ball-blue ball-mini">40</div>
+                        <div class="ball ball-blue ball-mini">35</div>
+                        <div class="ball ball-blue ball-mini">32</div>
+                        <div class="relative">
+                            <img src="assets/icons/crown.png" alt="" class="absolute -top-2.5 -right-1 w-4 h-auto rotate-[15deg] pointer-events-none z-0"/>
+                            <div class="ball ball-mb ball-mini relative z-10">12</div>
+                            <span class="absolute -bottom-1 -right-1 bg-[#ee0033] text-white text-[6px] font-bold px-1 rounded z-20">MB</span>
+                        </div>
+                    </div>
+                    <div class="flex flex-col gap-0.5 items-start shrink-0">
+                        <span class="text-xs font-bold text-black">Jackpot</span>
+                        <p class="leading-none">
+                            <span class="text-base font-extrabold text-[#002bff]">30,000,000</span><span class="text-[10.32px] font-extrabold text-black align-top">HTG</span>
+                        </p>
+                        <span class="text-[8px] text-black">1 thuê bao trúng thưởng</span>
+                        <span class="text-[8px] font-medium text-black">+509 23****67</span>
+                    </div>
+                    <img src="assets/icons/chevron-right.svg" alt="" class="w-2 h-3 shrink-0"/>
+                </a>
+
+                <a href="detail.html" class="result-card bg-white rounded-xl flex items-center justify-between px-3 py-2 gap-2">
+                    <div class="flex flex-col gap-0.5 items-start shrink-0">
+                        <span class="bg-[#0062ff] text-white text-[10px] font-bold rounded px-1 py-0.5">Kỳ #0015</span>
+                        <span class="text-xs text-[#8e8e93]">Thứ Sáu</span>
+                        <span class="text-[8px] font-bold text-[#8e8e93]">20/03/2026</span>
+                        <span class="text-[8px] font-bold text-[#8e8e93]">21:00</span>
+                    </div>
+                    <div class="grid grid-cols-3 gap-1">
+                        <div class="ball ball-blue ball-mini">7</div>
+                        <div class="ball ball-blue ball-mini">16</div>
+                        <div class="ball ball-blue ball-mini">40</div>
+                        <div class="ball ball-blue ball-mini">35</div>
+                        <div class="ball ball-blue ball-mini">32</div>
+                        <div class="relative">
+                            <img src="assets/icons/crown.png" alt="" class="absolute -top-2.5 -right-1 w-4 h-auto rotate-[15deg] pointer-events-none z-0"/>
+                            <div class="ball ball-mb ball-mini relative z-10">12</div>
+                            <span class="absolute -bottom-1 -right-1 bg-[#ee0033] text-white text-[6px] font-bold px-1 rounded z-20">MB</span>
+                        </div>
+                    </div>
+                    <div class="flex flex-col gap-0.5 items-start shrink-0">
+                        <span class="text-xs font-bold text-black">Jackpot</span>
+                        <p class="leading-none">
+                            <span class="text-base font-extrabold text-[#002bff]">30,000,000</span><span class="text-[10.32px] font-extrabold text-black align-top">HTG</span>
+                        </p>
+                        <span class="text-[8px] text-black">1 thuê bao trúng thưởng</span>
+                        <span class="text-[8px] font-medium text-black">+509 23****67</span>
+                    </div>
+                    <img src="assets/icons/chevron-right.svg" alt="" class="w-2 h-3 shrink-0"/>
+                </a>
+
+            </div>
+
+            <!-- Note -->
+            <div class="flex items-center gap-2 bg-[#e6f0ff] rounded-lg px-3 py-2 mb-2 shrink-0">
+                <svg class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="#0062ff"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 5a1.25 1.25 0 1 1 0 2.5A1.25 1.25 0 0 1 12 7Zm1 10h-2v-6h2v6Z"/></svg>
+                <p class="text-[10px] font-bold text-[#0062ff]">Lưu ý: Kết quả được cập nhật sau mỗi kỳ quay thưởng</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bottom navigation (fixed at bottom) -->
+    <nav class="navigation absolute inset-x-3 bottom-3 z-20 px-3 py-2 rounded-2xl">
+        <div class="flex items-center justify-between">
+            <a href="index.html" class="nav-item active flex flex-col items-center flex-1">
+                <img src="assets/icons/nav-home.png" alt="" class="w-7 h-7"/>
+                <span class="text-xs mt-1 text-[#0062ff] font-semibold">Home</span>
+                <span class="w-5 h-1 bg-[#0062ff] rounded-full mt-1"></span>
+            </a>
+            <a href="#" class="nav-item flex flex-col items-center flex-1">
+                <img src="assets/icons/nav-rule.png" alt="" class="w-7 h-7"/>
+                <span class="text-xs mt-1 text-gray-700">Rule</span>
+            </a>
+            <a href="#" class="nav-item flex flex-col items-center flex-1">
+                <img src="assets/icons/nav-history.png" alt="" class="w-7 h-7"/>
+                <span class="text-xs mt-1 text-gray-700">History</span>
+            </a>
+            <a href="#" class="nav-item flex flex-col items-center flex-1">
+                <img src="assets/icons/nav-faq.png" alt="" class="w-7 h-7"/>
+                <span class="text-xs mt-1 text-gray-700">FAQ</span>
+            </a>
+            <a href="#" class="nav-item flex flex-col items-center flex-1">
+                <img src="assets/icons/nav-more.png" alt="" class="w-7 h-7"/>
+                <span class="text-xs mt-1 text-gray-700">More</span>
+            </a>
+        </div>
+    </nav>
+
+</div>
+
+</body>
+
+</html>

website/Areas/Millions/Views/Home/FAQ.cshtml

@@ -11,7 +11,7 @@
 <div class="main-container animate__animated animate__fadeIn bg-[#F5F5F5] min-h-screen relative flex flex-col pb-24 shadow-xl overflow-x-hidden">
 
     <!-- Header Block (Red) - Fixed -->
-    <div class="fixed top-0 left-0 md:left-1/2 md:-translate-x-1/2 w-full md:max-w-[414px] bg-[#0062FF] h-[52px] flex items-center justify-between px-4 z-[100] shadow-sm">
+    <div class="fixed top-0 left-0 md:left-1/2 md:-translate-x-1/2 w-full md:max-w-[430px] bg-[#0062FF] h-[52px] flex items-center justify-between px-4 z-[100] shadow-sm">
         <!-- Back Button -->
         <button onclick="window.history.back()" class="w-10 h-10 flex items-center justify-center -ml-2 rounded-full active:bg-white/20 transition-colors z-10 text-white cursor-pointer">
             <i class="fa-solid fa-arrow-left text-[20px]"></i>

website/Areas/Millions/Views/Home/GameHome - Copy.cshtml

@@ -0,0 +1,320 @@
+@model LotteryWebApp.Models.HomeIndex_ViewModel
+@{
+    ViewData["Title"] = "Millions - Game Home";
+    Layout = "~/Areas/Millions/Views/Shared/_Layout.cshtml";
+}
+@using LotteryWebApp.Languages;
+@using LotteryWebApp.Controllers;
+@using LotteryWebApp.Common;
+
+
+@functions {
+    public string FormatMoney(string amount) {
+        if (string.IsNullOrEmpty(amount)) return "0";
+        var clean = new string(amount.Where(c => char.IsDigit(c)).ToArray());
+        if (long.TryParse(clean, out long val)) {
+            return val.ToString("#,##0", new System.Globalization.CultureInfo("vi-VN")).Replace(",", ".");
+        }
+        return amount;
+    }
+}
+
+<div class="main-container animate__animated animate__fadeIn bg-[#F5F5F5] min-h-screen">
+    <!-- Top Account Profile Bar / Backgound Red header -->
+    <div class="w-full bg-[#0062FF] p-4 text-white rounded-b-0xl shadow-md">
+        <!-- Row 1: Profile Info -->
+        <div class="flex items-center gap-4">
+            <a href="/LotteryV2/Home/Index" class="shrink-0 w-10 h-10 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center text-white border border-white/20 hover:bg-white/30 transition-all shadow-lg active:scale-90">
+                <i class="fas fa-chevron-left text-lg"></i>
+            </a>
+            <div class="flex items-center gap-4">
+                <div class="w-16 h-16 rounded-full border-2 border-white/60 overflow-hidden bg-[#FFE] shadow-sm">
+                    <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Ngan" alt="Avatar" class="w-full h-full object-cover">
+                </div>
+                <div>
+                    <div class="font-bold text-sm tracking-wide opacity-90">@(Model?.profile?.users ?? "User")</div>
+                    <div class="flex items-center gap-1 mt-0.5">
+                        <span class="text-3xl font-black text-[#FBF3A7]" style="text-shadow: 0 1px 2px rgba(0,0,0,0.2)">@FormatMoney(Model?.userStatus?.bet_coin)</span>
+                        <span class="text-xs font-bold text-[#FBF3A7] uppercase mt-1">@Lang.millions_htg</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Row 2: Pill Actions Full Width Split -->
+        <div class="grid grid-cols-2 gap-3 mt-4">
+             <a onclick="checkTerm('@Constants.PIC10_BASIC_CODE')" class="btn-pulse border border-white/50 rounded-xl py-2 px-3 flex items-center justify-center gap-1 text-xr font-extrabold bg-white/10 hover:bg-white/20 transition-all text-white no-underline">
+                 <span class="text-yellow-300 text-xl">⚡</span> @Lang.quick_pick
+             </a>
+             <a href="/Millions/Home/Results" class="btn-pulse border border-white/50 rounded-xl py-2 px-3 flex items-center justify-center gap-1 text-xr font-extrabold bg-white/10 hover:bg-white/20 transition-all text-white no-underline">
+                <span class="text-yellow-300 text-xl">🎫</span> @Lang.results
+             </a>
+        </div>
+
+        <!-- Row 3: Withdraw Button Full Width -->
+        <div class="w-full mt-3">
+             <button onclick="location.href='@Url.Action("TransferWinMoney", "Home")'" class="btn-pulse w-full text-black font-black py-3 rounded-2xl text-[18px] flex items-center justify-center gap-2 shadow-lg transition-all" style="background: linear-gradient(118deg, #19EF4B 0%, #C0FF4B 100%);">
+                 <span>@Lang.tranfer_win_money</span>
+                 <img src="/Millions/img/gold_wallet.png" alt="Wallet" class="w-6 h-6 object-contain">
+             </button>
+        </div>
+    </div>
+
+    <!-- Countdown Timer Bar with Scalloped bottom divider background -->
+    <div class="relative w-full overflow-hidden" style="background-image: url('/Millions/img/wavy_border.svg'); background-size: 102% 100%; background-position: center; background-repeat: no-repeat; height: 114px;">
+        <!-- Top border red line -->
+        <div class="absolute top-0 left-0 w-full h-[1.5px] bg-[#0062FF]"></div>
+        
+        <div class="flex items-center justify-between px-4 pt-7 relative z-10">
+             <!-- Left: Draw Date -->
+             <div class="flex items-center gap-1 flex-1 min-w-0">
+                 <div class="w-8 h-8 flex-shrink-0">
+                     <img src="/Millions/img/calendar_icon_3d.png" alt="Calendar" class="w-full h-full object-contain" onerror="this.src='/Millions/img/icon_calendar.svg'">
+                 </div>
+                 <div class="flex flex-col min-w-0">
+                     <span class="text-[11px] text-[#A1A1A1] font-bold leading-none mb-1">Next Pick 10 draw</span>
+                     <span class="text-[12px] font-[900] text-black tracking-tight leading-none" id="draw-date">Friday, Mar 20, 2026</span>
+                 </div>
+             </div>
+
+             <!-- Middle: Dashed Divider -->
+             <div class="h-10 w-px border-l border-dashed border-gray-300 mx-2"></div>
+             
+             <!-- Right: Timer -->
+             <div class="flex gap-4 shrink-0">
+                 <div class="flex flex-col items-center min-w-[42px]">
+                     <span class="text-[10px] text-[#A1A1A1] font-bold uppercase tracking-tighter mb-1">@Lang.hours</span>
+                     <span class="text-[28px] font-black text-black leading-none font-bricolage" id="countdown-hours">00</span>
+                 </div>
+                 <div class="flex flex-col items-center min-w-[42px]">
+                    <span class="text-[10px] text-[#A1A1A1] font-bold uppercase tracking-tighter mb-1">@Lang.Minutes</span>
+                     <span class="text-[28px] font-black text-black leading-none font-bricolage" id="countdown-minutes">00</span>
+                 </div>
+                 <div class="flex flex-col items-center min-w-[42px]">
+                    <span class="text-[10px] text-[#A1A1A1] font-bold uppercase tracking-tighter mb-1">@Lang.Secs</span>
+                     <span class="text-[28px] font-black text-black leading-none font-bricolage" id="countdown-seconds">00</span>
+                 </div>
+             </div>
+        </div>
+    </div>
+
+    <!-- Anti-forgery token for AJAX -->
+    @Html.AntiForgeryToken()
+
+    <!-- Card list items with accurate illustrations -->
+    <div class="px-3 flex flex-col gap-2 pb-40 relative z-10 mt-[14px]">
+        
+        <!-- Game item: Millions -->
+        <div class="relative w-full h-[120px] rounded-2xl overflow-hidden shadow-xl font-bricolage transition-all duration-300 active:scale-[0.98] cursor-pointer card-red" onclick="checkTerm('@Constants.Millions_CODE')">
+            <!-- 1. Premium Gradient Border -->
+            <div class="absolute inset-0 rounded-2xl border-[1.5px] border-white/40 pointer-events-none z-20"></div>
+            
+            <!-- 2. Decorative Highlights -->
+            <img src="/Millions/img/decorations/ellipse_1183.png" class="absolute -left-[80px] -top-[130px] w-[220px] h-[220px] pointer-events-none z-10 mix-blend-screen scale-y-[-1]" alt="highlight">
+            <img src="/Millions/img/decorations/ellipse_1181.png" class="absolute -right-[60px] -top-[20px] w-[200px] h-[200px] pointer-events-none z-10 mix-blend-screen" alt="highlight">
+
+            <div class="absolute inset-0 grid grid-cols-10 items-center px-3 z-20 gap-0">
+                <!-- Left: Millions + Ball (3 columns) -->
+                <div class="col-span-3 flex items-center h-full -ml-2 relative">
+                    <!-- Text Layout -->
+                    <div class="flex flex-col items-center leading-[0.85] relative z-10 font-UTM_Futura_Extra">
+                        <span class="text-white font-[900] text-[16px] drop-shadow-md">Millions</span>
+                        <span class="font-[900] text-[30px] drop-shadow-lg leading-[0.9]" style="background: linear-gradient(180deg, #FFFFFF 20%, #FFF307 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">6 số</span>
+                        
+                        <!-- Floating Bubbles -->
+                        <div class="absolute top-[-4px] right-[-4px] w-2.5 h-2.5 bg-white rounded-full shadow-sm"></div>
+                        <div class="absolute top-[18px] right-[-6px] w-2 h-2 bg-yellow-400 rounded-full shadow-sm"></div>
+                    </div>
+
+                    <!-- Single Ball (Yellow) -->
+                    <div class="relative w-[36px] h-[36px] flex-shrink-0 -ml-18 aspect-square z-20">
+                        <div class="w-full h-full bg-[#FFDE59] rounded-full border-[2.5px] border-white flex items-center justify-center shadow-lg">
+                            <span class="text-black font-[900] text-[18px] leading-none mb-0.5">6</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Center: Jackpot info (4 columns) -->
+                <div class="col-span-4 flex flex-col items-center justify-center text-center">
+                    <div class="text-[14px] font-bold text-white mb-0.5 whitespace-nowrap opacity-90">@Lang.jackpot_prize</div>
+                    <div class="flex items-start gap-0.5">
+                        <span class="text-[22px] font-black text-[#FBF3A7] leading-none" style="text-shadow: 0 4px 8px rgba(0,0,0,0.3)">30.000.000</span>
+                        <span class="text-[9px] font-bold text-white uppercase opacity-90 mt-1">@Lang.millions_htg</span>
+                    </div>
+                    <div class="text-[12px] text-white/90 font-medium whitespace-nowrap mt-1">@Lang.next_round <span class="font-black text-yellow-300 ml-1 countdown-timer">00:00:00</span></div>
+                </div>
+
+                <!-- Right: Action Section (3 columns) -->
+                <div class="col-span-3 flex flex-col items-center justify-end h-full pb-3.5 relative">
+                    <img src="/Millions/img/gold_chest.png" alt="Chest" class="absolute bottom-[38px] w-18 h-20 object-contain filter drop-shadow-lg z-10">
+                    <button class="text-black font-black px-3 w-full py-1.5 rounded-[12px] text-[13px] shadow-xl border border-white/50 hover:brightness-110 active:scale-95 transition-all relative z-0" style="background: linear-gradient(180deg, #FFF385 0%, #EFAD19 100%);">@Lang.rule_play_now</button>
+                </div>
+            </div>
+        </div>
+
+
+    </div>
+
+    <!-- Banner Info Section centered red text bar -->
+    <div class="fixed bottom-[82px] left-1/2 -translate-x-1/2 w-full min-[600px]:max-w-[414px] bg-[#0062FF] text-white py-2 text-center text-[13px] font-bold tracking-wide z-40 flex flex-col items-center justify-center overflow-hidden h-auto shadow-md">
+         <div class="flex flex-col items-center w-full animate-slide-up">
+             <!-- Row 1 -->
+             <div class="opacity-90">@Lang.have_chance_to_get</div>
+             <!-- Row 2 -->
+             <div class="text-[20px] font-black text-[#FBF3A7] mt-0.5">
+                @Lang.millions_jackpot_today_htg
+             </div>
+         </div>
+    </div>
+
+    <!-- Custom Notification Modal (Branded design from Profile) -->
+    <div id="notificationModal" class="fixed inset-0 z-[100] flex items-center justify-center hidden px-6 font-bricolage" style="background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.9) 100%);">
+        <div class="w-full max-w-[343px] min-h-[480px] bg-white rounded-[24px] overflow-hidden flex flex-col items-center p-8 animate__animated animate__zoomIn animate__faster shadow-2xl">
+            <!-- Alert Icon -->
+            <div class="w-full flex justify-center mb-8 mt-6">
+                <img src="/Millions/img/modal/fail_icon.png" class="w-[180px] h-auto object-contain" alt="Notificaton icon" />
+            </div>
+
+            <!-- Message Area -->
+            <div class="px-2 text-center mb-10 flex-1 flex items-center justify-center">
+                <p id="notificationMessage" class="text-black font-[800] text-[22px] leading-snug">
+                    <!-- Message content -->
+                </p>
+            </div>
+
+            <!-- Action Button -->
+            <div class="w-full">
+                <button onclick="closeNotificationModal()" class="w-full bg-[#0062FF] text-white font-[800] text-[20px] py-[12px] rounded-[14px] shadow-lg active:scale-95 transition-all">
+                    @Lang.try_again
+                </button> 
+            </div>
+        </div>
+    </div>
+
+    <!-- Bottom Navbar shared component -->
+    <partial name="_BottomNavbar" />
+</div>
+
+@section Scripts {
+    <script>
+        var systemUpgrading = false;
+        function showNotification(message, code) {
+            $("#notificationMessage").text(message);
+            const $btn = $("#notificationModal button");
+            if (code === "-2" || (message && message.includes("System is upgrading"))) {
+                systemUpgrading = true;
+                $btn.text("@Lang.login");
+            } else {
+                systemUpgrading = false;
+                $btn.text("@Lang.try_again");
+            }
+            $("#notificationModal").removeClass("hidden").addClass("flex");
+        }
+
+        function closeNotificationModal() {
+            $("#notificationModal").addClass("hidden").removeClass("flex");
+            if (systemUpgrading) {
+                window.location.href = subDomain + "/Account/Login";
+            }
+        }
+
+        let isCheckingTerm = false;
+
+        function checkTerm(termType) {
+            if (isCheckingTerm) return;
+            isCheckingTerm = true;
+
+            // Get anti-forgery token from the page
+            var token = $('input[name="__RequestVerificationToken"]').val();
+            
+            // Show loading or disable buttons if needed
+            $.ajax({
+                url: subDomain + '/Millions/Home/TermResult',
+                type: 'POST',
+                data: {
+                    __RequestVerificationToken: token,
+                    termType: termType
+                },
+                success: function (res) {
+                    if (res.responseCode === "0") {
+                        if (res.listTerm && res.listTerm.length > 0) {
+                            var status = res.listTerm[0].status;
+                            if (status === "0" || status === "1") {
+                                location.href = subDomain + '/Millions/Home/BuyTicket?termType=' + termType;
+                                return;
+                            } else if (status === "2") {
+                                showNotification("@Lang.millions_game_locked");
+                            } else if (status === "3") {
+                                showNotification("@Lang.millions_updating_results");
+                            } else {
+                                showNotification("@Lang.millions_game_locked");
+                            }
+                        } else {
+                            showNotification("@Lang.no_results_found");
+                        }
+                    } else if (res.responseCode === "401") {
+                        window.location.href = subDomain + "/Account/Login";
+                        return;
+                    } else {
+                        showNotification(res.responseMessage || "@Lang.error_happened", res.responseCode);
+                    }
+                    isCheckingTerm = false;
+                },
+                error: function (err) {
+                    showNotification("@Lang.error_happened");
+                    isCheckingTerm = false;
+                }
+            });
+        }
+
+        function startCountdown() {
+            const targetHour = 20; // 20:00 (8h tối)
+            const now = new Date();
+            let target = new Date();
+            target.setHours(targetHour, 0, 0, 0);
+
+            if (now >= target) {
+                target.setDate(target.getDate() + 1);
+            }
+
+            // Định dạng ngày hiển thị (VD: Friday, Mar 20, 2026)
+            const options = { weekday: 'long', month: 'short', day: 'numeric', year: 'numeric' };
+            const dateText = target.toLocaleDateString('en-US', options);
+            document.getElementById('draw-date').innerText = dateText;
+
+            function updateTime() {
+                const current = new Date();
+                const diff = target - current;
+
+                if (diff <= 0) {
+                    target.setDate(target.getDate() + 1);
+                    const updatedDateText = target.toLocaleDateString('en-US', options);
+                    document.getElementById('draw-date').innerText = updatedDateText;
+                    updateTime();
+                    return;
+                }
+
+                const hours = Math.floor((diff / (1000 * 60 * 60)));
+                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+                const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+
+                document.getElementById('countdown-hours').innerText = hours.toString().padStart(2, '0');
+                document.getElementById('countdown-minutes').innerText = minutes.toString().padStart(2, '0');
+                document.getElementById('countdown-seconds').innerText = seconds.toString().padStart(2, '0');
+
+                // Update all card timers
+                const timeStr = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+                document.querySelectorAll('.countdown-timer').forEach(t => t.innerText = timeStr);
+            }
+
+            updateTime();
+            setInterval(updateTime, 1000);
+        }
+
+        document.addEventListener('DOMContentLoaded', startCountdown);
+    </script>
+}
+
+
+
+

website/Areas/Millions/Views/Home/GameHome.cshtml

@@ -7,7 +7,6 @@
 @using LotteryWebApp.Controllers;
 @using LotteryWebApp.Common;
 
-
 @functions {
     public string FormatMoney(string amount) {
         if (string.IsNullOrEmpty(amount)) return "0";
@@ -19,215 +18,160 @@
     }
 }
 
-<div class="main-container animate__animated animate__fadeIn bg-[#F5F5F5] min-h-screen">
-    <!-- Top Account Profile Bar / Backgound Red header -->
-    <div class="w-full bg-[#0062FF] p-4 text-white rounded-b-0xl shadow-md">
-        <!-- Row 1: Profile Info -->
-        <div class="flex items-center gap-4">
-            <a href="/LotteryV2/Home/Index" class="shrink-0 w-10 h-10 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center text-white border border-white/20 hover:bg-white/30 transition-all shadow-lg active:scale-90">
-                <i class="fas fa-chevron-left text-lg"></i>
-            </a>
-            <div class="flex items-center gap-4">
-                <div class="w-16 h-16 rounded-full border-2 border-white/60 overflow-hidden bg-[#FFE] shadow-sm">
-                    <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Ngan" alt="Avatar" class="w-full h-full object-cover">
+@section Styles {
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/Millions/css/all.min.css"/>
+}
+
+<div class="main-content h-dvh w-full max-w-[430px] mx-auto bg-[#f5f7fb] relative overflow-hidden font-bricolage">
+
+    <!-- Scrollable content area -->
+    <div class="absolute inset-x-0 top-0 bottom-[88px] overflow-y-auto flex flex-col">
+
+        <!-- Top section with header + cards -->
+        <div class="relative">
+
+            <!-- Header gradient background -->
+            <div class="header-bg relative h-[160px] rounded-b-[40px] overflow-hidden">
+                <!-- Top bar -->
+                <div class="flex items-center justify-between px-3 pt-3 relative z-10">
+                    <button onclick="location.href='/LotteryV2/Home/Index'" class="js-back w-6 h-6 flex items-center justify-center">
+                        <img src="/Millions/assets/icons/arrow-left.svg" alt="Back" class="w-6 h-6"/>
+                    </button>
+                    <button class="flex items-center gap-2 bg-white/15 rounded-full px-3 py-1 text-white text-sm">
+                        <span>🏴󠁧󠁢󠁥󠁮󠁧󠁿 English</span>
+                        <img src="/Millions/assets/icons/chevron-down.svg" alt="" class="w-2 h-2"/>
+                    </button>
                 </div>
-                <div>
-                    <div class="font-bold text-sm tracking-wide opacity-90">@(Model?.profile?.users ?? "User")</div>
-                    <div class="flex items-center gap-1 mt-0.5">
-                        <span class="text-3xl font-black text-[#FBF3A7]" style="text-shadow: 0 1px 2px rgba(0,0,0,0.2)">@FormatMoney(Model?.userStatus?.bet_coin)</span>
-                        <span class="text-xs font-bold text-[#FBF3A7] uppercase mt-1">@Lang.millions_htg</span>
+
+                <!-- User profile -->
+                <div class="flex items-center gap-4 px-4 -mt-2">
+                    <div class="w-[84px] h-[84px] rounded-full overflow-hidden bg-white/20 border-[3px] border-white shrink-0">
+                        <img src="/Millions/assets/images/avatar.png" alt="Avatar" class="w-full h-full object-cover"/>
+                    </div>
+                    <div class="flex-1 min-w-0">
+                        <p class="text-white text-base font-semibold leading-tight">@(Model?.profile?.users ?? "User")</p>
+                        <div class="flex items-center gap-1 mt-1">
+                            <span class="text-3xl font-condensed text-gold-gradient leading-none">@FormatMoney(Model?.userStatus?.bet_coin)</span>
+                            <img src="/Millions/assets/icons/coin.png" alt="" class="w-5 h-5"/>
+                            <span class="text-white text-sm">@Lang.millions_htg</span>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
 
-        <!-- Row 2: Pill Actions Full Width Split -->
-        <div class="grid grid-cols-2 gap-3 mt-4">
-             <a onclick="checkTerm('@Constants.PIC10_BASIC_CODE')" class="btn-pulse border border-white/50 rounded-xl py-2 px-3 flex items-center justify-center gap-1 text-xr font-extrabold bg-white/10 hover:bg-white/20 transition-all text-white no-underline">
-                 <span class="text-yellow-300 text-xl">⚡</span> @Lang.quick_pick
-             </a>
-             <a href="/Millions/Home/Results" class="btn-pulse border border-white/50 rounded-xl py-2 px-3 flex items-center justify-center gap-1 text-xr font-extrabold bg-white/10 hover:bg-white/20 transition-all text-white no-underline">
-                <span class="text-yellow-300 text-xl">🎫</span> @Lang.results
-             </a>
-        </div>
-
-        <!-- Row 3: Withdraw Button Full Width -->
-        <div class="w-full mt-3">
-             <button onclick="location.href='@Url.Action("TransferWinMoney", "Home")'" class="btn-pulse w-full text-black font-black py-3 rounded-2xl text-[18px] flex items-center justify-center gap-2 shadow-lg transition-all" style="background: linear-gradient(118deg, #19EF4B 0%, #C0FF4B 100%);">
-                 <span>@Lang.tranfer_win_money</span>
-                 <img src="/Millions/img/gold_wallet.png" alt="Wallet" class="w-6 h-6 object-contain">
-             </button>
-        </div>
-    </div>
-
-    <!-- Countdown Timer Bar with Scalloped bottom divider background -->
-    <div class="relative w-full overflow-hidden" style="background-image: url('/Millions/img/wavy_border.svg'); background-size: 102% 100%; background-position: center; background-repeat: no-repeat; height: 114px;">
-        <!-- Top border red line -->
-        <div class="absolute top-0 left-0 w-full h-[1.5px] bg-[#0062FF]"></div>
-        
-        <div class="flex items-center justify-between px-4 pt-7 relative z-10">
-             <!-- Left: Draw Date -->
-             <div class="flex items-center gap-1 flex-1 min-w-0">
-                 <div class="w-8 h-8 flex-shrink-0">
-                     <img src="/Millions/img/calendar_icon_3d.png" alt="Calendar" class="w-full h-full object-contain" onerror="this.src='/Millions/img/icon_calendar.svg'">
-                 </div>
-                 <div class="flex flex-col min-w-0">
-                     <span class="text-[11px] text-[#A1A1A1] font-bold leading-none mb-1">Next Pick 10 draw</span>
-                     <span class="text-[12px] font-[900] text-black tracking-tight leading-none" id="draw-date">Friday, Mar 20, 2026</span>
-                 </div>
-             </div>
-
-             <!-- Middle: Dashed Divider -->
-             <div class="h-10 w-px border-l border-dashed border-gray-300 mx-2"></div>
-             
-             <!-- Right: Timer -->
-             <div class="flex gap-4 shrink-0">
-                 <div class="flex flex-col items-center min-w-[42px]">
-                     <span class="text-[10px] text-[#A1A1A1] font-bold uppercase tracking-tighter mb-1">@Lang.hours</span>
-                     <span class="text-[28px] font-black text-black leading-none font-bricolage" id="countdown-hours">00</span>
-                 </div>
-                 <div class="flex flex-col items-center min-w-[42px]">
-                    <span class="text-[10px] text-[#A1A1A1] font-bold uppercase tracking-tighter mb-1">@Lang.Minutes</span>
-                     <span class="text-[28px] font-black text-black leading-none font-bricolage" id="countdown-minutes">00</span>
-                 </div>
-                 <div class="flex flex-col items-center min-w-[42px]">
-                    <span class="text-[10px] text-[#A1A1A1] font-bold uppercase tracking-tighter mb-1">@Lang.Secs</span>
-                     <span class="text-[28px] font-black text-black leading-none font-bricolage" id="countdown-seconds">00</span>
-                 </div>
-             </div>
-        </div>
-    </div>
-
-    <!-- Anti-forgery token for AJAX -->
-    @Html.AntiForgeryToken()
-
-    <!-- Card list items with accurate illustrations -->
-    <div class="px-3 flex flex-col gap-2 pb-40 relative z-10 mt-[14px]">
-        
-        <!-- Game item: Millions -->
-        <div class="relative w-full h-[120px] rounded-2xl overflow-hidden shadow-xl font-bricolage transition-all duration-300 active:scale-[0.98] cursor-pointer card-red" onclick="checkTerm('@Constants.Millions_CODE')">
-            <!-- 1. Premium Gradient Border -->
-            <div class="absolute inset-0 rounded-2xl border-[1.5px] border-white/40 pointer-events-none z-20"></div>
-            
-            <!-- 2. Decorative Highlights -->
-            <img src="/Millions/img/decorations/ellipse_1183.png" class="absolute -left-[80px] -top-[130px] w-[220px] h-[220px] pointer-events-none z-10 mix-blend-screen scale-y-[-1]" alt="highlight">
-            <img src="/Millions/img/decorations/ellipse_1181.png" class="absolute -right-[60px] -top-[20px] w-[200px] h-[200px] pointer-events-none z-10 mix-blend-screen" alt="highlight">
-
-            <div class="absolute inset-0 grid grid-cols-10 items-center px-3 z-20 gap-0">
-                <!-- Left: Millions + Ball (3 columns) -->
-                <div class="col-span-3 flex items-center h-full -ml-2 relative">
-                    <!-- Text Layout -->
-                    <div class="flex flex-col items-center leading-[0.85] relative z-10 font-UTM_Futura_Extra">
-                        <span class="text-white font-[900] text-[16px] drop-shadow-md">Millions</span>
-                        <span class="font-[900] text-[30px] drop-shadow-lg leading-[0.9]" style="background: linear-gradient(180deg, #FFFFFF 20%, #FFF307 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">6 số</span>
-                        
-                        <!-- Floating Bubbles -->
-                        <div class="absolute top-[-4px] right-[-4px] w-2.5 h-2.5 bg-white rounded-full shadow-sm"></div>
-                        <div class="absolute top-[18px] right-[-6px] w-2 h-2 bg-yellow-400 rounded-full shadow-sm"></div>
+            <!-- Floating info card -->
+            <div class="absolute left-5 right-5 -bottom-[52px] bg-white rounded-2xl shadow-md flex items-center h-20 px-4">
+                <div class="flex items-center gap-2 flex-1">
+                    <img src="/Millions/assets/icons/calendar.png" alt="" class="w-6 h-6"/>
+                    <div>
+                        <p class="text-xs text-[#797979]">@Lang.next_round</p>
+                        <p class="text-xs font-bold text-black" id="draw-date">Friday, Mar 20, 2026</p>
                     </div>
-
-                    <!-- Single Ball (Yellow) -->
-                    <div class="relative w-[36px] h-[36px] flex-shrink-0 -ml-18 aspect-square z-20">
-                        <div class="w-full h-full bg-[#FFDE59] rounded-full border-[2.5px] border-white flex items-center justify-center shadow-lg">
-                            <span class="text-black font-[900] text-[18px] leading-none mb-0.5">6</span>
-                        </div>
+                </div>
+                <div class="w-px h-12 bg-gray-200"></div>
+                <div class="flex items-center gap-2 flex-1 pl-4">
+                    <img src="/Millions/assets/icons/money-bag.png" alt="" class="w-6 h-[34px] object-contain"/>
+                    <div>
+                        <p class="text-xs text-[#797979]">@Lang.jackpot_prize</p>
+                        <p class="leading-none ">
+                            <span class="text-base font-extrabold text-[#002bff]">30.000.000</span><span class="text-[10.32px] font-extrabold text-black align-top">@Lang.millions_htg</span>
+                        </p>
                     </div>
                 </div>
+            </div>
+        </div>
 
-                <!-- Center: Jackpot info (4 columns) -->
-                <div class="col-span-4 flex flex-col items-center justify-center text-center">
-                    <div class="text-[14px] font-bold text-white mb-0.5 whitespace-nowrap opacity-90">@Lang.jackpot_prize</div>
-                    <div class="flex items-start gap-0.5">
-                        <span class="text-[22px] font-black text-[#FBF3A7] leading-none" style="text-shadow: 0 4px 8px rgba(0,0,0,0.3)">30.000.000</span>
-                        <span class="text-[9px] font-bold text-white uppercase opacity-90 mt-1">@Lang.millions_htg</span>
+        <!-- Result section -->
+        <div class="px-4 mt-20">
+            <div class="result-box rounded-[32px] py-3 flex flex-col gap-2">
+                <div class="flex items-center justify-between px-4">
+                    <div class="flex items-center gap-2 text-xs">
+                        <span class="text-[#797979]">@Lang.results</span>
+                        <span class="font-bold text-black">Monday, Mar 20, 2026</span>
                     </div>
-                    <div class="text-[12px] text-white/90 font-medium whitespace-nowrap mt-1">@Lang.next_round <span class="font-black text-yellow-300 ml-1 countdown-timer">00:00:00</span></div>
+                    <a href="/Millions/Home/Results" class="flex items-center gap-1 text-[10px] font-bold text-black border border-[#c2c2c2] rounded-lg px-2 py-1">
+                        View all results
+                        <img src="/Millions/assets/icons/chevron-right.svg" alt="" class="w-[5px] h-2"/>
+                    </a>
                 </div>
 
-                <!-- Right: Action Section (3 columns) -->
-                <div class="col-span-3 flex flex-col items-center justify-end h-full pb-3.5 relative">
-                    <img src="/Millions/img/gold_chest.png" alt="Chest" class="absolute bottom-[38px] w-18 h-20 object-contain filter drop-shadow-lg z-10">
-                    <button class="text-black font-black px-3 w-full py-1.5 rounded-[12px] text-[13px] shadow-xl border border-white/50 hover:brightness-110 active:scale-95 transition-all relative z-0" style="background: linear-gradient(180deg, #FFF385 0%, #EFAD19 100%);">@Lang.rule_play_now</button>
+                <!-- Result balls -->
+                <div class="flex items-center justify-between gap-1 px-4">
+                    <div class="ball ball-blue">7</div>
+                    <div class="ball ball-blue">16</div>
+                    <div class="ball ball-blue">32</div>
+                    <div class="ball ball-blue">35</div>
+                    <div class="ball ball-blue">40</div>
+                    <div class="relative">
+                        <img src="/Millions/assets/icons/crown.png" alt="" class="absolute -top-4 -right-1 w-7 h-auto pointer-events-none rotate-[15deg] z-0"/>
+                        <div class="ball ball-mb relative z-10">
+                            <span>12</span>
+                            <span class="absolute -bottom-1 -right-2 bg-[#ee0033] text-white text-[8px] font-bold px-1.5 py-0.5 rounded z-20">MB</span>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
 
+        <!-- Mega Jackpot banner -->
+        <div class="px-2 mt-6">
+            <div class="mega-banner relative rounded-[20px] overflow-hidden px-4 py-3 flex flex-col">
+                <span class="mega-glow" style="left:-79px; top:-101px;"></span>
+                <span class="mega-glow" style="right:-78px; top:9px;"></span>
+                <span class="mega-glow" style="right:-107px; top:20px;"></span>
+                <p class="mega-title relative inline-block text-white text-[22px] font-futura leading-none">
+                    <img src="/Millions/assets/icons/crown.png" alt="" class="absolute -top-[5px] left-[26px] w-[12px] h-auto rotate-[10deg] pointer-events-none"/>
+                    Mega Jackpot
+                </p>
+                <p class="text-white text-xs mt-2">Estimate Jackpot Prize</p>
+                <p class="leading-none mt-1 flex items-start" style="margin-bottom:18px;">
+                    <span class="mega-amount text-[40px] font-condensed text-gold-gradient tracking-tight leading-none animate__animated animate-rotate-3s">30.000.000</span>
+                    <span class="text-gold-gradient text-sm font-bold uppercase ml-1 animate__animated animate-rotate-3s">@Lang.v2_htg</span>
+                </p>
+                <p class="text-white text-[10px] mt-1 ">Be the next millionaire</p>
 
-    </div>
-
-    <!-- Banner Info Section centered red text bar -->
-    <div class="fixed bottom-[82px] left-1/2 -translate-x-1/2 w-full min-[600px]:max-w-[414px] bg-[#0062FF] text-white py-2 text-center text-[13px] font-bold tracking-wide z-40 flex flex-col items-center justify-center overflow-hidden h-auto shadow-md">
-         <div class="flex flex-col items-center w-full animate-slide-up">
-             <!-- Row 1 -->
-             <div class="opacity-90">@Lang.have_chance_to_get</div>
-             <!-- Row 2 -->
-             <div class="text-[20px] font-black text-[#FBF3A7] mt-0.5">
-                @Lang.millions_jackpot_today_htg
-             </div>
-         </div>
-    </div>
-
-    <!-- Custom Notification Modal (Branded design from Profile) -->
-    <div id="notificationModal" class="fixed inset-0 z-[100] flex items-center justify-center hidden px-6 font-bricolage" style="background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.9) 100%);">
-        <div class="w-full max-w-[343px] min-h-[480px] bg-white rounded-[24px] overflow-hidden flex flex-col items-center p-8 animate__animated animate__zoomIn animate__faster shadow-2xl">
-            <!-- Alert Icon -->
-            <div class="w-full flex justify-center mb-8 mt-6">
-                <img src="/Millions/img/modal/fail_icon.png" class="w-[180px] h-auto object-contain" alt="Notificaton icon" />
+                <!-- Decorative elements -->
+                <img src="/Millions/assets/images/crown-balls.png" alt="" class="absolute right-2 top-1/2 -translate-y-1/2 w-44 h-auto pointer-events-none"/>
             </div>
+        </div>
 
-            <!-- Message Area -->
-            <div class="px-2 text-center mb-10 flex-1 flex items-center justify-center">
-                <p id="notificationMessage" class="text-black font-[800] text-[22px] leading-snug">
-                    <!-- Message content -->
-                </p>
-            </div>
+        <!-- Play now button + decorative balls -->
+        <div class="relative shrink-0 mt-8 z-10">
+            <img src="/Millions/assets/images/play-decor.png" alt="" class="block w-full h-auto pointer-events-none"/>
 
-            <!-- Action Button -->
-            <div class="w-full">
-                <button onclick="closeNotificationModal()" class="w-full bg-[#0062FF] text-white font-[800] text-[20px] py-[12px] rounded-[14px] shadow-lg active:scale-95 transition-all">
-                    @Lang.try_again
-                </button> 
-            </div>
+            <a onclick="checkTerm('@Constants.Millions_CODE')" class="play-now-outer rounded-full animate-pulse-play" style="position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:155px; height:155px; padding:11px; cursor:pointer;">
+                <div class="play-now-ring rounded-full" style="width:100%;height:100%;padding:4px;">
+                    <div class="play-now-btn rounded-full flex flex-col items-center justify-center text-white text-[32px] font-black border-[1.8px] border-white animate-pulse-play" style="width:100%;height:100%;line-height:24px;">
+                        <span class="uppercase">@Lang.millions_play</span>
+                        <span class="uppercase">@Lang.millions_now</span>
+                    </div>
+                </div>
+            </a>
         </div>
+
     </div>
 
-    <!-- Bottom Navbar shared component -->
-    <partial name="_BottomNavbar" />
+    @{
+        ViewData["ActiveTab"] = "Home";
+    }
+    @await Html.PartialAsync("~/Areas/Millions/Views/Shared/_BottomNavbar.cshtml")
+
 </div>
 
 @section Scripts {
+    <script src="/Millions/js/all.min.js"></script>
     <script>
-        var systemUpgrading = false;
-        function showNotification(message, code) {
-            $("#notificationMessage").text(message);
-            const $btn = $("#notificationModal button");
-            if (code === "-2" || (message && message.includes("System is upgrading"))) {
-                systemUpgrading = true;
-                $btn.text("@Lang.login");
-            } else {
-                systemUpgrading = false;
-                $btn.text("@Lang.try_again");
-            }
-            $("#notificationModal").removeClass("hidden").addClass("flex");
-        }
-
-        function closeNotificationModal() {
-            $("#notificationModal").addClass("hidden").removeClass("flex");
-            if (systemUpgrading) {
-                window.location.href = subDomain + "/Account/Login";
-            }
-        }
-
         let isCheckingTerm = false;
 
         function checkTerm(termType) {
             if (isCheckingTerm) return;
             isCheckingTerm = true;
 
-            // Get anti-forgery token from the page
             var token = $('input[name="__RequestVerificationToken"]').val();
             
-            // Show loading or disable buttons if needed
             $.ajax({
                 url: subDomain + '/Millions/Home/TermResult',
                 type: 'POST',
@@ -242,33 +186,29 @@
                             if (status === "0" || status === "1") {
                                 location.href = subDomain + '/Millions/Home/BuyTicket?termType=' + termType;
                                 return;
-                            } else if (status === "2") {
-                                showNotification("@Lang.millions_game_locked");
-                            } else if (status === "3") {
-                                showNotification("@Lang.millions_updating_results");
                             } else {
-                                showNotification("@Lang.millions_game_locked");
+                                alert("@Lang.millions_game_locked");
                             }
                         } else {
-                            showNotification("@Lang.no_results_found");
+                            alert("@Lang.no_results_found");
                         }
                     } else if (res.responseCode === "401") {
                         window.location.href = subDomain + "/Account/Login";
                         return;
                     } else {
-                        showNotification(res.responseMessage || "@Lang.error_happened", res.responseCode);
+                        alert(res.responseMessage || "@Lang.error_happened");
                     }
                     isCheckingTerm = false;
                 },
                 error: function (err) {
-                    showNotification("@Lang.error_happened");
+                    alert("@Lang.error_happened");
                     isCheckingTerm = false;
                 }
             });
         }
 
         function startCountdown() {
-            const targetHour = 20; // 20:00 (8h tối)
+            const targetHour = 20;
             const now = new Date();
             let target = new Date();
             target.setHours(targetHour, 0, 0, 0);
@@ -277,44 +217,17 @@
                 target.setDate(target.getDate() + 1);
             }
 
-            // Định dạng ngày hiển thị (VD: Friday, Mar 20, 2026)
             const options = { weekday: 'long', month: 'short', day: 'numeric', year: 'numeric' };
             const dateText = target.toLocaleDateString('en-US', options);
-            document.getElementById('draw-date').innerText = dateText;
-
-            function updateTime() {
-                const current = new Date();
-                const diff = target - current;
-
-                if (diff <= 0) {
-                    target.setDate(target.getDate() + 1);
-                    const updatedDateText = target.toLocaleDateString('en-US', options);
-                    document.getElementById('draw-date').innerText = updatedDateText;
-                    updateTime();
-                    return;
-                }
-
-                const hours = Math.floor((diff / (1000 * 60 * 60)));
-                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-                const seconds = Math.floor((diff % (1000 * 60)) / 1000);
-
-                document.getElementById('countdown-hours').innerText = hours.toString().padStart(2, '0');
-                document.getElementById('countdown-minutes').innerText = minutes.toString().padStart(2, '0');
-                document.getElementById('countdown-seconds').innerText = seconds.toString().padStart(2, '0');
+            const drawDateEl = document.getElementById('draw-date');
+            if(drawDateEl) drawDateEl.innerText = dateText;
+        }
 
-                // Update all card timers
-                const timeStr = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
-                document.querySelectorAll('.countdown-timer').forEach(t => t.innerText = timeStr);
+            // Withdraw money function
+            function transferWinMoney() {
+                location.href = '@Url.Action("TransferWinMoney", "Home")';
             }
 
-            updateTime();
-            setInterval(updateTime, 1000);
-        }
-
         document.addEventListener('DOMContentLoaded', startCountdown);
     </script>
 }
-
-
-
-

website/Areas/Millions/Views/Home/History.cshtml

@@ -17,7 +17,7 @@
 
 <div class="main-container results-container animate__animated animate__fadeIn pb-40 relative">
     <!-- Header Group: Static at Top -->
-    <div class="w-full z-[100] bg-[#F3F4F6] pb-2 shadow-md">
+    <div class="fixed top-0 left-0 md:left-1/2 md:-translate-x-1/2 w-full md:max-w-[430px] z-[100] bg-[#F3F4F6] pb-2 shadow-md">
         <!-- Header -->
         <div class="results-top-header">
             <a href="/Millions/Home/GameHome" class="back-btn">

website/Areas/Millions/Views/Home/More.cshtml

@@ -125,10 +125,11 @@
     <!-- Real scalloped edge using CSS mask trick below the white box -->
     <div class="w-full relative z-10 scalloped-bottom"></div>
 
+    <!-- Bottom Navbar shared component -->
+    <partial name="_BottomNavbar" />
 </div>
 
-<!-- Bottom Navbar shared component -->
-<partial name="_BottomNavbar" />
+
 
 <script>
 

website/Areas/Millions/Views/Home/Rule.cshtml

@@ -17,7 +17,7 @@
 <div class="main-container animate__animated animate__fadeIn h-screen relative flex flex-col font-bricolage overflow-hidden" style="background-color: #F5F5F5 !important;">
     
     <!-- Fixed Header & Tabs Group -->
-    <div class="fixed top-0 left-0 md:left-1/2 md:-translate-x-1/2 w-full md:max-w-[414px] z-[100] bg-white shadow-md">
+    <div class="fixed top-0 left-0 md:left-1/2 md:-translate-x-1/2 w-full md:max-w-[430px] z-[100] bg-white shadow-md">
         <!-- Header Block (Red) -->
         <div class="w-full bg-[#0062FF] h-[52px] flex items-center justify-between px-4 relative">
             <!-- Back Button -->
@@ -198,6 +198,8 @@
             <!-- Other tabs removed as per request -->
         </div> <!-- End max-width wrapper -->
     </div> <!-- End Scroll Container -->
+    <!-- Bottom Navbar shared component -->
+    <partial name="_BottomNavbar" />
 </div>
 
 <script>
@@ -256,7 +258,6 @@
     }
 </script>
 
-<!-- Bottom Navbar shared component -->
-<partial name="_BottomNavbar" />
+
 
 

website/Areas/Millions/Views/Shared/_BottomNavbar.cshtml

@@ -2,46 +2,44 @@
 @{
     var activePage = ViewData["ActiveTab"] as string ?? "Home";
 }
-<!-- Bottom Navbar pinned statically white background row -->
-<div class="fixed bottom-0 left-1/2 -translate-x-1/2 w-full min-[600px]:max-w-[414px] bg-white border-t border-gray-100 p-3 flex justify-around items-center z-50 shadow-[0_-2px_10px_rgba(0,0,0,0.05)] h-[82px]">
-    <a href="/Millions/Home/GameHome" class="flex flex-col items-center @(activePage == "Home" ? "text-[var(--primary)]" : "text-gray-400 hover:text-[var(--primary)]") cursor-pointer relative transition-colors no-underline">
-        @if(activePage == "Home") {
-            <div class="absolute -top-[14px] left-1/2 -translate-x-1/2 w-10 h-[2.5px] bg-[#0062FF] rounded-sm"></div>
-        }
-        <img src="/Millions/img/icon_home.svg" alt="Home" class="w-8 h-8">
-        <span class="text-[12px] mt-1 @(activePage == "Home" ? "font-extrabold" : "font-bold")" style="@(activePage == "Home" ? "color: #0062FF;" : "")">@Lang.home</span>
-    </a>
-    
-    <a href="/Millions/Home/Rule" class="flex flex-col items-center @(activePage == "Rule" ? "text-[var(--primary)]" : "text-gray-400 hover:text-[var(--primary)]") cursor-pointer relative transition-colors no-underline">
-        @if(activePage == "Rule") {
-            <div class="absolute -top-[14px] left-1/2 -translate-x-1/2 w-10 h-[2.5px] bg-[#0062FF] rounded-sm"></div>
-        }
-        <img src="/Millions/img/icon_rule.svg" alt="Rule" class="w-8 h-8">
-        <span class="text-[12px] mt-1 @(activePage == "Rule" ? "font-extrabold" : "font-bold")" style="@(activePage == "Rule" ? "color: #0062FF;" : "")">@Lang.rules</span>
-    </a>
-
-    <a href="/Millions/Home/History" class="flex flex-col items-center @(activePage == "History" ? "text-[var(--primary)]" : "text-gray-400 hover:text-[var(--primary)]") cursor-pointer relative transition-colors no-underline">
-        @if(activePage == "History") {
-            <div class="absolute -top-[14px] left-1/2 -translate-x-1/2 w-10 h-[2.5px] bg-[#0062FF] rounded-sm"></div>
-        }
-        <img src="/Millions/img/icon_history.svg" alt="History" class="w-8 h-8">
-        <span class="text-[12px] mt-1 @(activePage == "History" ? "font-extrabold" : "font-bold")" style="@(activePage == "History" ? "color: #0062FF;" : "")">@Lang.history</span>
-    </a>
-
-    <a href="/Millions/Home/FAQ" class="flex flex-col items-center @(activePage == "FAQ" ? "text-[var(--primary)]" : "text-gray-400 hover:text-[var(--primary)]") cursor-pointer relative transition-colors no-underline group">
-        @if(activePage == "FAQ") {
-            <div class="absolute -top-[14px] left-1/2 -translate-x-1/2 w-10 h-[2.5px] bg-[#0062FF] rounded-sm"></div>
-        }
-        <img src="/Millions/img/icon_faq.svg" alt="FAQ" class="w-8 h-8">
-        <span class="text-[12px] mt-1 @(activePage == "FAQ" ? "font-extrabold drop-shadow-sm" : "font-bold")" style="@(activePage == "FAQ" ? "color: #0062FF;" : "")">@Lang.faq</span>
-    </a>
-
-    <a href="/Millions/Home/More" class="flex flex-col items-center @(activePage == "More" ? "text-[var(--primary)]" : "text-gray-400 hover:text-[var(--primary)]") cursor-pointer relative transition-colors no-underline group">
-        @if(activePage == "More") {
-            <div class="absolute -top-[14px] left-1/2 -translate-x-1/2 w-10 h-[2.5px] bg-[#0062FF] rounded-sm"></div>
-        }
-        <img src="/Millions/img/icon_more.svg" alt="More" class="w-8 h-8">
-        <span class="text-[12px] mt-1 @(activePage == "More" ? "font-extrabold drop-shadow-sm" : "font-bold")" style="@(activePage == "More" ? "color: #0062FF;" : "")">@Lang.more</span>
-    </a>
-</div>
 
+<!-- Bottom navigation (fixed at bottom) -->
+<nav class="navigation absolute inset-x-3 bottom-3 z-20 px-3 py-2 rounded-2xl">
+    <div class="flex items-center justify-between">
+        <a href="/Millions/Home/GameHome" class="nav-item @(activePage == "Home" ? "active" : "") flex flex-col items-center flex-1 no-underline">
+            <img src="/Millions/assets/icons/nav-home.png" alt="" class="w-7 h-7"/>
+            <span class="text-xs mt-1 @(activePage == "Home" ? "text-[#0062ff] font-semibold" : "text-gray-700")">Home</span>
+            @if(activePage == "Home") {
+                <span class="w-5 h-1 bg-[#0062ff] rounded-full mt-1"></span>
+            }
+        </a>
+        <a href="/Millions/Home/Rule" class="nav-item @(activePage == "Rule" ? "active" : "") flex flex-col items-center flex-1 no-underline">
+            <img src="/Millions/assets/icons/nav-rule.png" alt="" class="w-7 h-7"/>
+            <span class="text-xs mt-1 @(activePage == "Rule" ? "text-[#0062ff] font-semibold" : "text-gray-700")">Rule</span>
+            @if(activePage == "Rule") {
+                <span class="w-5 h-1 bg-[#0062ff] rounded-full mt-1"></span>
+            }
+        </a>
+        <a href="/Millions/Home/History" class="nav-item @(activePage == "History" ? "active" : "") flex flex-col items-center flex-1 no-underline">
+            <img src="/Millions/assets/icons/nav-history.png" alt="" class="w-7 h-7"/>
+            <span class="text-xs mt-1 @(activePage == "History" ? "text-[#0062ff] font-semibold" : "text-gray-700")">History</span>
+            @if(activePage == "History") {
+                <span class="w-5 h-1 bg-[#0062ff] rounded-full mt-1"></span>
+            }
+        </a>
+        <a href="/Millions/Home/FAQ" class="nav-item @(activePage == "FAQ" ? "active" : "") flex flex-col items-center flex-1 no-underline">
+            <img src="/Millions/assets/icons/nav-faq.png" alt="" class="w-7 h-7"/>
+            <span class="text-xs mt-1 @(activePage == "FAQ" ? "text-[#0062ff] font-semibold" : "text-gray-700")">FAQ</span>
+            @if(activePage == "FAQ") {
+                <span class="w-5 h-1 bg-[#0062ff] rounded-full mt-1"></span>
+            }
+        </a>
+        <a href="/Millions/Home/More" class="nav-item @(activePage == "More" ? "active" : "") flex flex-col items-center flex-1 no-underline">
+            <img src="/Millions/assets/icons/nav-more.png" alt="" class="w-7 h-7"/>
+            <span class="text-xs mt-1 @(activePage == "More" ? "text-[#0062ff] font-semibold" : "text-gray-700")">More</span>
+            @if(activePage == "More") {
+                <span class="w-5 h-1 bg-[#0062ff] rounded-full mt-1"></span>
+            }
+        </a>
+    </div>
+</nav>

website/Areas/Millions/Views/Shared/_Layout.cshtml

@@ -11,6 +11,7 @@
     
     <!-- Isolated CSS just for Millions  -->
     <link rel="stylesheet" href="/Millions/css/site.css" />
+    <link rel="stylesheet" href="/Millions/css/all.min.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

website/Languages/Lang.Designer.cs

@@ -1846,6 +1846,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to now.
+        /// </summary>
+        public static string millions_now {
+            get {
+                return ResourceManager.GetString("millions_now", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Enpe Pe.
         /// </summary>
@@ -1909,6 +1918,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Play.
+        /// </summary>
+        public static string millions_play {
+            get {
+                return ResourceManager.GetString("millions_play", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Prim ou ka genyen.
         /// </summary>

website/Languages/Lang.fr.resx

@@ -830,9 +830,6 @@ We’ll help you create an account in a few easy steps.</value>
   <data name="faq_a2" xml:space="preserve">
     <value>Draws take place every day at 8:30 p.m. Ticket sales stop at 8:00 p.m.</value>
   </data>
-  <data name="faq_q3" xml:space="preserve">
-    <value>What are the chances of winning the top prize?</value>
-  </data>
   <data name="faq_a3" xml:space="preserve">
     <value>The odds of winning the top Pick 10 prize are 1 in 8,911,711.</value>
   </data>
@@ -1475,6 +1472,9 @@ We’ll help you create an account in a few easy steps.</value>
   <data name="v2_ticket_code" xml:space="preserve">
     <value>Ticket Code</value>
   </data>
+  <data name="faq_q3" xml:space="preserve">
+    <value>What are the chances of winning the top prize?</value>
+  </data>
   <data name="loto_des_millions" xml:space="preserve">
     <value> is a Bolet, Maryaj and Lotto3 games, results of NewYork and Florida lottery games. Pick your numbers and wait for the winning combination to be announced. You can convert the winning amount to Natcom mobile balance or Natcash. Good luck!</value>
   </data>
@@ -1721,4 +1721,10 @@ We’ll help you create an account in a few easy steps.</value>
   <data name="millions_jackpot_today_htg" xml:space="preserve">
     <value>30.000.000 HTG today !</value>
   </data>
+  <data name="millions_play" xml:space="preserve">
+    <value>Play</value>
+  </data>
+  <data name="millions_now" xml:space="preserve">
+    <value>now</value>
+  </data>
 </root>

website/Languages/Lang.resx

@@ -830,9 +830,6 @@ N ap ede w kreye yon kont byen fasil.</value>
   <data name="faq_a2" xml:space="preserve">
     <value>Tiraj yo fet chak jou a 8:30 p.m. Vann tike yo sispann a 8:00 p.m.</value>
   </data>
-  <data name="faq_q3" xml:space="preserve">
-    <value>Ki chans ki genyen pou genyen gwo pri a?</value>
-  </data>
   <data name="faq_a3" xml:space="preserve">
     <value>Chans pou genyen premye pri Pick 10 la se 1 sou 8,911,711.</value>
   </data>
@@ -1478,6 +1475,9 @@ Apre yo fin tire 20 nimewo, sistem nan konte konbyen nimewo ki enpe oswa pe: &lt
   <data name="v2_ticket_code" xml:space="preserve">
     <value>Kod tike</value>
   </data>
+  <data name="faq_q3" xml:space="preserve">
+    <value>Ki chans ki genyen pou genyen gwo pri a?</value>
+  </data>
   <data name="loto_des_millions" xml:space="preserve">
     <value>se yon jwet Bolet, Maryaj ak Lotto3, rezilta jwet lotri Nouyok ak Florid. Chwazi nimewo ou yo epi tann yo anonse ganyan an. Ou ka voye lajan ou genyen an sou balans prensipal ou oswa Natcash. Bon chans!</value>
   </data>
@@ -1725,4 +1725,10 @@ Apre yo fin tire 20 nimewo, sistem nan konte konbyen nimewo ki enpe oswa pe: &lt
   <data name="millions_jackpot_today_htg" xml:space="preserve">
     <value>30.000.000 HTG jodia  !</value>
   </data>
+  <data name="millions_play" xml:space="preserve">
+    <value>Play</value>
+  </data>
+  <data name="millions_now" xml:space="preserve">
+    <value>now</value>
+  </data>
 </root>

website/wwwroot/Millions/assets/icons/arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 16L6 12L10 8M6 12L18 12" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

website/wwwroot/Millions/assets/icons/chevron-down-2.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.59955 7.5C3.98445 8.16667 4.9467 8.16667 5.3316 7.5L8.7957 1.5C9.1806 0.833334 8.69948 0 7.92968 0H1.00147C0.231674 0 -0.249451 0.833333 0.135449 1.5L3.59955 7.5Z" fill="#0062FF"/>
+</svg>

website/wwwroot/Millions/assets/icons/search.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.95 13.95L16.75 16.75M15.95 8.35C15.95 4.15264 12.5474 0.75 8.35 0.75C4.15264 0.75 0.75 4.15264 0.75 8.35C0.75 12.5474 4.15264 15.95 8.35 15.95C12.5474 15.95 15.95 12.5474 15.95 8.35Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

website/wwwroot/Millions/css/all.min.css

@@ -0,0 +1,1554 @@
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+/*
+! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
+*/
+
+html,
+:host {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-feature-settings: normal;
+  /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-feature-settings: inherit;
+  /* 1 */
+  font-variation-settings: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden]:where(:not([hidden="until-found"])) {
+  display: none;
+}
+
+.pointer-events-none {
+  pointer-events: none;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.inset-x-0 {
+  left: 0px;
+  right: 0px;
+}
+
+.inset-x-3 {
+  left: 0.75rem;
+  right: 0.75rem;
+}
+
+.-bottom-1 {
+  bottom: -0.25rem;
+}
+
+.-bottom-\[52px\] {
+  bottom: -52px;
+}
+
+.-right-1 {
+  right: -0.25rem;
+}
+
+.-right-2 {
+  right: -0.5rem;
+}
+
+.-top-2\.5 {
+  top: -0.625rem;
+}
+
+.-top-3 {
+  top: -0.75rem;
+}
+
+.-top-4 {
+  top: -1rem;
+}
+
+.-top-\[5px\] {
+  top: -5px;
+}
+
+.bottom-0 {
+  bottom: 0px;
+}
+
+.bottom-3 {
+  bottom: 0.75rem;
+}
+
+.bottom-\[88px\] {
+  bottom: 88px;
+}
+
+.left-5 {
+  left: 1.25rem;
+}
+
+.left-\[26px\] {
+  left: 26px;
+}
+
+.right-2 {
+  right: 0.5rem;
+}
+
+.right-5 {
+  right: 1.25rem;
+}
+
+.top-0 {
+  top: 0px;
+}
+
+.top-1\/2 {
+  top: 50%;
+}
+
+.top-\[56px\] {
+  top: 56px;
+}
+
+.z-0 {
+  z-index: 0;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.z-20 {
+  z-index: 20;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.-mt-1 {
+  margin-top: -0.25rem;
+}
+
+.-mt-5 {
+  margin-top: -1.25rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-20 {
+  margin-top: 5rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.h-1 {
+  height: 0.25rem;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
+.h-2 {
+  height: 0.5rem;
+}
+
+.h-20 {
+  height: 5rem;
+}
+
+.h-3 {
+  height: 0.75rem;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
+.h-5 {
+  height: 1.25rem;
+}
+
+.h-6 {
+  height: 1.5rem;
+}
+
+.h-7 {
+  height: 1.75rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
+.h-\[160px\] {
+  height: 160px;
+}
+
+.h-\[34px\] {
+  height: 34px;
+}
+
+.h-auto {
+  height: auto;
+}
+
+.h-dvh {
+  height: 100dvh;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.w-2 {
+  width: 0.5rem;
+}
+
+.w-20 {
+  width: 5rem;
+}
+
+.w-3 {
+  width: 0.75rem;
+}
+
+.w-4 {
+  width: 1rem;
+}
+
+.w-44 {
+  width: 11rem;
+}
+
+.w-5 {
+  width: 1.25rem;
+}
+
+.w-6 {
+  width: 1.5rem;
+}
+
+.w-7 {
+  width: 1.75rem;
+}
+
+.w-8 {
+  width: 2rem;
+}
+
+.w-\[12px\] {
+  width: 12px;
+}
+
+.w-\[17px\] {
+  width: 17px;
+}
+
+.w-\[5px\] {
+  width: 5px;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.w-px {
+  width: 1px;
+}
+
+.min-w-0 {
+  min-width: 0px;
+}
+
+.max-w-\[500px\] {
+  max-width: 500px;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.shrink-0 {
+  flex-shrink: 0;
+}
+
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.rotate-\[10deg\] {
+  --tw-rotate: 10deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.rotate-\[15deg\] {
+  --tw-rotate: 15deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-0\.5 {
+  gap: 0.125rem;
+}
+
+.gap-1 {
+  gap: 0.25rem;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-3 {
+  gap: 0.75rem;
+}
+
+.gap-5 {
+  gap: 1.25rem;
+}
+
+.gap-x-1 {
+  -moz-column-gap: 0.25rem;
+       column-gap: 0.25rem;
+}
+
+.gap-y-1 {
+  row-gap: 0.25rem;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-2xl {
+  border-radius: 1rem;
+}
+
+.rounded-\[12px\] {
+  border-radius: 12px;
+}
+
+.rounded-\[20px\] {
+  border-radius: 20px;
+}
+
+.rounded-\[32px\] {
+  border-radius: 32px;
+}
+
+.rounded-full {
+  border-radius: 9999px;
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.rounded-b-\[40px\] {
+  border-bottom-right-radius: 40px;
+  border-bottom-left-radius: 40px;
+}
+
+.rounded-t-\[32px\] {
+  border-top-left-radius: 32px;
+  border-top-right-radius: 32px;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.border-\[1\.8px\] {
+  border-width: 1.8px;
+}
+
+.border-\[\#b9b9b9\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(185 185 185 / var(--tw-border-opacity));
+}
+
+.border-\[\#c2c2c2\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(194 194 194 / var(--tw-border-opacity));
+}
+
+.border-\[\#ccc\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(204 204 204 / var(--tw-border-opacity));
+}
+
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
+.border-white\/70 {
+  border-color: rgb(255 255 255 / 0.7);
+}
+
+.bg-\[\#0062ff\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 98 255 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#e6f0ff\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(230 240 255 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#ececec\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 236 236 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#ecf3fd\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 243 253 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#ee0033\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(238 0 51 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#f5f7fb\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 247 251 / var(--tw-bg-opacity));
+}
+
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.bg-white\/15 {
+  background-color: rgb(255 255 255 / 0.15);
+}
+
+.bg-white\/20 {
+  background-color: rgb(255 255 255 / 0.2);
+}
+
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.px-1\.5 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+.py-0\.5 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
+
+.pl-4 {
+  padding-left: 1rem;
+}
+
+.pt-10 {
+  padding-top: 2.5rem;
+}
+
+.pt-3 {
+  padding-top: 0.75rem;
+}
+
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.align-top {
+  vertical-align: top;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.text-\[10\.32px\] {
+  font-size: 10.32px;
+}
+
+.text-\[10px\] {
+  font-size: 10px;
+}
+
+.text-\[22px\] {
+  font-size: 22px;
+}
+
+.text-\[28px\] {
+  font-size: 28px;
+}
+
+.text-\[32px\] {
+  font-size: 32px;
+}
+
+.text-\[40px\] {
+  font-size: 40px;
+}
+
+.text-\[6px\] {
+  font-size: 6px;
+}
+
+.text-\[8px\] {
+  font-size: 8px;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-extrabold {
+  font-weight: 800;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.leading-none {
+  line-height: 1;
+}
+
+.leading-tight {
+  line-height: 1.25;
+}
+
+.tracking-tight {
+  letter-spacing: -0.025em;
+}
+
+.text-\[\#002bff\] {
+  --tw-text-opacity: 1;
+  color: rgb(0 43 255 / var(--tw-text-opacity));
+}
+
+.text-\[\#0062ff\] {
+  --tw-text-opacity: 1;
+  color: rgb(0 98 255 / var(--tw-text-opacity));
+}
+
+.text-\[\#797979\] {
+  --tw-text-opacity: 1;
+  color: rgb(121 121 121 / var(--tw-text-opacity));
+}
+
+.text-\[\#8e8e93\] {
+  --tw-text-opacity: 1;
+  color: rgb(142 142 147 / var(--tw-text-opacity));
+}
+
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.text-white\/80 {
+  color: rgb(255 255 255 / 0.8);
+}
+
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+:root {
+  --main-color: #fff;
+  --color-primary: #0062ff;
+  --color-primary-dark: #001ec7;
+  --color-red: #ee0033;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #f5f7fb;
+  font-family: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.font-condensed {
+  font-family: 'DIN Condensed', 'Barlow Condensed', 'Bricolage Grotesque', sans-serif;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+}
+
+.font-futura {
+  font-family: 'UTM Futura Extra', 'Futura', 'Helvetica Neue', sans-serif;
+  font-weight: 800;
+}
+
+html {
+  font-size: 16px;
+}
+
+.main-content {
+  background: var(--main-color);
+}
+
+/* ===== Header ===== */
+
+.header-bg {
+  background: linear-gradient(180deg, #001ec7 0%, #0062ff 100%);
+}
+
+.header-bg::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image:
+        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0) 30%),
+        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.06) 0, rgba(255, 255, 255, 0) 35%);
+  pointer-events: none;
+}
+
+/* ===== Gold gradient text ===== */
+
+.text-gold-gradient {
+  background: linear-gradient(178deg, #fff6eb 16%, #ffbb32 96%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+}
+
+/* ===== Number balls ===== */
+
+.ball {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 18px;
+  color: #fff;
+  flex-shrink: 0;
+  border: 1.5px solid rgba(0, 98, 255, 0.07);
+  filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.45));
+  position: relative;
+}
+
+.ball::before {
+  content: "";
+  position: absolute;
+  top: 2.7px;
+  right: 2.7px;
+  width: 25.14px;
+  height: 25.14px;
+  border-radius: 50%;
+  background: linear-gradient(225deg,
+        rgba(255, 255, 255, 0.6) 0%,
+        rgba(255, 255, 255, 0) 100%);
+  pointer-events: none;
+}
+
+.ball-blue {
+  background:
+        radial-gradient(circle at 50% 50%,
+            #fbfbfb 0%,
+            #fbfbfb 50%,
+            #c6c7e3 72%,
+            #9293cb 90%);
+  box-shadow:
+        inset 0 0 0 1.5px rgba(30, 63, 232, 0.55),
+        inset 0 0 6px 3px rgba(146, 147, 203, 0.6);
+  color: #0062ff;
+}
+
+.ball-mini {
+  width: 28px;
+  height: 28px;
+  font-size: 12px;
+  border-width: 0.94px;
+  filter: drop-shadow(1.31px 1.31px 1.97px rgba(0, 0, 0, 0.45));
+}
+
+.ball-mini::before {
+  top: 1.7px;
+  right: 1.7px;
+  width: 16px;
+  height: 16px;
+}
+
+.result-card {
+  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
+}
+
+.ball-mb {
+  background: radial-gradient(circle at 50% 50%,
+        #0062ff 0%,
+        #0062ff 60%,
+        #0149f0 75%,
+        #0231e0 85%,
+        #0218d1 92%,
+        #0300c2 100%);
+  box-shadow: inset 0 0 8px 3px rgba(0, 24, 209, 0.5);
+  color: #fff;
+  border: 0;
+}
+
+/* ===== Result box ===== */
+
+.result-box {
+  background: rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  border: 1px solid #fff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* ===== Mega Jackpot banner ===== */
+
+.mega-banner {
+  background: linear-gradient(-1.8deg, #050068 3.87%, #0062ff 96.13%);
+}
+
+.mega-amount {
+  display: inline-block;
+  transform: scaleY(1.35);
+  transform-origin: top left;
+  font-weight: 700;
+}
+
+.mega-title {
+  font-family: 'UTM Futura Extra', 'Bricolage Grotesque', 'Futura', 'Helvetica Neue', sans-serif;
+  font-weight: 800;
+  font-style: italic;
+  letter-spacing: -0.5px;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+  -webkit-text-stroke: 0.5px #fff;
+}
+
+.mega-banner::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image:
+        radial-gradient(circle at -5% -10%, rgba(255, 255, 255, 0.22) 0, rgba(255, 255, 255, 0) 30%),
+        radial-gradient(circle at 105% 0%, rgba(255, 255, 255, 0.20) 0, rgba(255, 255, 255, 0) 28%),
+        radial-gradient(circle at 105% 110%, rgba(255, 255, 255, 0.18) 0, rgba(255, 255, 255, 0) 35%),
+        radial-gradient(circle at 60% 40%, rgba(255, 255, 255, 0.10) 0, rgba(255, 255, 255, 0) 25%);
+  pointer-events: none;
+}
+
+.mega-glow {
+  position: absolute;
+  width: 193px;
+  height: 193px;
+  border-radius: 50%;
+  background: linear-gradient(270deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.mega-banner::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+        radial-gradient(circle at 62% 28%, #fff 0, #fff 5px, transparent 5.5px),
+        radial-gradient(circle at 56% 50%, #fff 0, #fff 7px, transparent 7.5px),
+        radial-gradient(circle at 68% 35%, #fff 0, #fff 3px, transparent 3.5px);
+}
+
+/* ===== Play now button ===== */
+
+.play-now-outer {
+  border: 1.8px solid rgba(255, 255, 255, 0.5);
+  box-shadow: 0 1.8px 8.1px rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+}
+
+.play-now-outer::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.61) 0%, rgba(246, 226, 130, 0.6) 100%);
+  mix-blend-mode: screen;
+  pointer-events: none;
+}
+
+.play-now-ring {
+  background: linear-gradient(180deg, #0400ff 0%, #0300b2 100%);
+  filter: drop-shadow(0 3.6px 3.6px rgba(0, 0, 0, 0.55));
+}
+
+.play-now-btn {
+  background:
+        radial-gradient(circle at 50% 50%,
+            #0059ff 0%,
+            #0443ee 25%,
+            #082dde 50%,
+            #0c16cd 75%,
+            #1000bd 100%);
+  box-shadow: inset 1.8px 1.8px 9px rgba(255, 255, 255, 0.55);
+  text-align: center;
+  font-style: italic;
+  font-family: 'Bricolage Grotesque', sans-serif;
+  text-shadow: 0 3.6px 3.6px rgba(0, 0, 0, 0.25);
+}
+
+/* ===== Bottom navigation ===== */
+
+.navigation {
+  background: linear-gradient(180deg, #ffffff 0%, #f4f6fb 100%);
+  box-shadow: 0 -6px 12px 0 rgba(0, 98, 255, 0.25);
+}
+
+.nav-item.active span {
+  color: var(--color-primary);
+}

website/wwwroot/Millions/css/site.css

@@ -193,6 +193,23 @@ body::-webkit-scrollbar,
     }
 }
 
+/* Animation for Play Now button pulse */
+.animate-pulse-play {
+    animation: pulsePlayInward 1.5s ease-in-out infinite;
+}
+
+@keyframes pulsePlayInward {
+    0% {
+        box-shadow: 0 1.8px 8.1px rgba(0, 0, 0, 0.55), inset 0 0 0 0 rgba(255, 255, 255, 0.6);
+    }
+    50% {
+        box-shadow: 0 1.8px 15px rgba(255, 255, 255, 0.4), inset 0 0 20px 2px rgba(255, 255, 255, 0.5);
+    }
+    100% {
+        box-shadow: 0 1.8px 8.1px rgba(0, 0, 0, 0.55), inset 0 0 0 0 rgba(255, 255, 255, 0.6);
+    }
+}
+
 /* Hide Spinners for input number */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
@@ -204,3 +221,22 @@ input[type=number] {
     appearance: textfield;
     -moz-appearance: textfield;
 }
+
+/* Animation for Jackpot rotation */
+.animate-rotate-3s {
+    animation: rotateCustom 3s linear infinite;
+    display: inline-block;
+}
+
+@keyframes rotateCustom {
+    0% {
+        transform: rotate(-5deg) scale(1);
+    }
+    50% {
+        transform: rotate(5deg) scale(1.1);
+    }
+    100% {
+        transform: rotate(-5deg) scale(1);
+    }
+}
+

website/wwwroot/Millions/js/all.min.js

@@ -0,0 +1,13 @@
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll(".js-back").forEach(el => {
+    el.addEventListener("click", e => {
+      e.preventDefault();
+      if (document.referrer && history.length > 1) {
+        history.back();
+      } else {
+        window.location.href = "index.html";
+      }
+    });
+  });
+});
+