full website

website/Areas/LotteryV2/Controllers/HomeController.cs

@@ -409,7 +409,7 @@ namespace LotteryWebApp.Areas.LotteryV2.Controllers
                 Profile profile = HttpContext.Session.GetComplexData<Profile>("profile");
                 UserStatus userStatus = HttpContext.Session.GetComplexData<UserStatus>("userStatus");
                 
-                model.termType = termType != null ? termType : (HttpContext.Session.GetString("termType") ?? Constants.MEGA_LOTO);
+                model.termType = termType != null ? termType : (HttpContext.Session.GetString("termType") ?? Constants.PIC10_BASIC_CODE);
                 
                 // Set default dates if not provided (same as root implementation)
                 string fromFormatted = fromDate != null ? fromDate : DateTime.Now.AddDays(-7).ToString("yyyy-MM-dd");
@@ -437,7 +437,8 @@ namespace LotteryWebApp.Areas.LotteryV2.Controllers
                 {
                     model.listTerm = result.listTerm ?? new List<Term>();
                 }
-                else {
+                else
+                {
                     model.listTerm = new List<Term>();
                 }
             }
@@ -482,7 +483,8 @@ namespace LotteryWebApp.Areas.LotteryV2.Controllers
                 {
                     model.listTerm = result.listTerm ?? new List<Term>();
                 }
-                else {
+                else
+                {
                     model.listTerm = new List<Term>();
                 }
             }

website/Areas/LotteryV2/Views/Home/BuyTicket.cshtml

@@ -157,7 +157,7 @@
 }
 else
 {
-<!-- ==================== CLASSIC PICK 10 / ODD-EVEN GAME UI ==================== -->
+<!-- ==================== Basic Pick 10 / Odd-Even GAME UI ==================== -->
 <div class="main-container animate__animated animate__fadeIn bg-[#F5F5F5] h-screen flex flex-col font-bricolage overflow-hidden max-w-[414px] mx-auto relative">
     <!-- Header -->
     <div class="w-full bg-[#EE0033] py-3 px-4 text-white flex items-center justify-between sticky top-0 z-[60]">
@@ -165,7 +165,7 @@ else
             <i class="fa-solid fa-arrow-left text-[20px]"></i>
         </button>
         <span class="font-[800] text-[18px] absolute left-1/2 -translate-x-1/2 whitespace-nowrap">
-            @if (Model.termType == Constants.PIC10_BASIC_CODE) { @Lang.v2_buy_classic_pick_10 }
+            @if (Model.termType == Constants.PIC10_BASIC_CODE) { <text>Basic Pick 10</text> }
             else { @Lang.v2_odd_even }
         </span>
         <div class="w-8"></div>
@@ -184,11 +184,11 @@ else
     </div>
 
     <!-- Ticket Scrollable List Area -->
-    <div id="ticketContainer" class="p-4 flex flex-col gap-6 flex-1 overflow-y-auto bg-[#F5F5F5]">
+    <div id="ticketContainer" class="p-4 flex flex-col gap-6 flex-1 overflow-y-auto bg-[#F5F5F5] pb-[50vh]">
         @for (int i = 1; i <= 2; i++)
         {
             <div class="ticket-card relative group active:bg-gray-50 transition-colors cursor-pointer animate__animated animate__fadeIn">
-                <button onclick="removeEntry(this)" class="absolute -right-2 top-2 w-7 h-7 bg-[#999] text-white rounded-full flex items-center justify-center text-[11px] shadow-sm z-[10] hover:bg-red-500 transition-all border-2 border-white">
+                <button onclick="removeEntry(this)" class="absolute -right-2 top-2 w-7 h-7 bg-[#EE0033] text-white rounded-full flex items-center justify-center text-[11px] shadow-sm z-[10] hover:bg-red-600 transition-all border-2 border-white">
                     <i class="fa-solid fa-xmark"></i>
                 </button>
                 <div class="absolute left-2 top-4 w-9 h-9 rounded-full bg-[#EE0033] border-[3px] border-white flex items-center justify-center text-white font-black text-sm shadow-md ticket-index">@i</div>
@@ -202,7 +202,7 @@ else
                             }
                         </div>
                         <div class="w-20 action-area flex flex-col gap-2">
-                             <button onclick="randomizeTicket(this)" class="rand-btn bg-green-main text-white flex items-center justify-center gap-2 w-20 py-2 rounded-xl font-extrabold text-[11px] shadow-sm active:scale-95 transition-all">
+                             <button onclick="randomizeTicket(this)" class="rand-btn bg-[#0A9800] text-white flex items-center justify-center gap-2 w-20 py-2 rounded-xl font-extrabold text-[11px] shadow-sm active:scale-95 transition-all">
                                 <i class="fa-solid fa-arrows-rotate text-[10px]"></i> @Lang.Random
                              </button>
                              <div class="edit-delete-group hidden flex flex-col gap-2">
@@ -254,7 +254,7 @@ else
                 <i class="fa-solid fa-arrow-left text-[20px]"></i>
             </button>
             <span class="font-[800] text-[18px] absolute left-1/2 -translate-x-1/2 whitespace-nowrap">
-                @if (Model.termType == Constants.PIC10_BASIC_CODE) { @Lang.v2_buy_classic_pick_10 }
+                @if (Model.termType == Constants.PIC10_BASIC_CODE) { <text>Basic Pick 10</text> }
                 else if (Model.termType == Constants.PIC10_BIGSMALL_CODE) { @Lang.v2_big_small }
                 else { @Lang.v2_odd_even }
             </span>
@@ -263,12 +263,6 @@ else
 
         <!-- Content Area -->
         <div class="flex-1 overflow-y-auto p-5 space-y-5 bg-gray-50 pb-72">
-            <!-- Phần Round Info từ Model -->
-            <div class="flex items-center justify-end gap-1 mb-2 px-1">
-                <span class="text-[12px] font-bold text-gray-400">@Lang.v2_round</span>
-                <span class="text-[16px] font-black text-brown-main">#@(currentTerm?.id ?? "12459")</span>
-            </div>
-
             <div class="flex justify-between items-center px-1">
                  <span class="text-[14px] font-bold text-gray-800">Selected Tickets</span>
                  <span class="text-[14px] font-bold text-gray-800">@Lang.price</span>
@@ -292,7 +286,7 @@ else
                      <div class="bg-white border border-gray-100 rounded-xl py-2.5 px-2 text-center font-black text-[11px] text-gray-700 shadow-sm" id="summaryResultDate">
                          @{
                              DateTime drawDate;
-                             bool isValidDate = DateTime.TryParse(currentTerm?.date_start, out drawDate);
+                             bool isValidDate = DateTime.TryParse(currentTerm?.date_end, out drawDate);
                              if (isValidDate) {
                                 @drawDate.ToString("dddd MMM dd, yyyy", System.Globalization.CultureInfo.InvariantCulture)
                              } else {
@@ -412,7 +406,7 @@ else
                     <!-- Action Buttons: Cancel / Confirm -->
                     <div class="grid grid-cols-2 gap-3 w-full mt-2">
                         <button onclick="hideOtpModal()" class="bg-[#FF0000] text-white py-[12px] rounded-[16px] font-[900] text-[17px] shadow-[0_8px_15px_rgba(255,0,0,0.2)] active:scale-95 transition-all tracking-wide">@Lang.v2_cancel</button>
-                        <button onclick="finalizePurchase(this)" class="bg-[#0A9800] text-white py-[12px] rounded-[16px] font-[900] text-[17px] shadow-[0_8px_15px_rgba(10,152,0,0.2)] active:scale-95 transition-all tracking-wide">@Lang.v2_confirm</button>
+                        <button id="otpConfirmBtn" disabled onclick="finalizePurchase(this)" class="bg-[#0A9800] text-white py-[12px] rounded-[16px] font-[900] text-[17px] shadow-[0_8px_15px_rgba(10,152,0,0.2)] active:scale-95 transition-all tracking-wide disabled:opacity-50 disabled:grayscale disabled:cursor-not-allowed">@Lang.v2_confirm</button>
                     </div>
                 </div>
             </div>
@@ -492,16 +486,25 @@ else
         // Open Number Picker Modal
         var activeBall = null;
         var activeTicketCard = null;
-        var selectedNumbers = [];
+        var selectedNumbers = []; // For Edit mode, this will be an array of fixed size with nulls
 
         function editFullTicket(btn) {
             activeTicketCard = $(btn).closest('.ticket-card');
             activeBall = null;
-            selectedNumbers = [];
+            
+            // Initialize fixed slots for slot-based editing
+            selectedNumbers = new Array(maxBalls).fill(null);
+            let existing = [];
             activeTicketCard.find('.ball-filled').each(function() {
                 var num = $(this).text().trim();
-                if(num) selectedNumbers.push(num);
+                if(num) existing.push(num);
             });
+            
+            // Initial fill from left to right
+            existing.forEach((num, idx) => {
+                if(idx < maxBalls) selectedNumbers[idx] = num;
+            });
+
             openNumberPicker(true);
         }
 
@@ -517,53 +520,71 @@ else
                 title.text("Edit Ticket");
                 countArea.removeClass('hidden');
                 confirmBtn.removeClass('hidden').text("@Lang.confirm");
-                updateSelectionCount();
             } else {
                 title.text("Pick Number");
                 countArea.addClass('hidden');
                 confirmBtn.removeClass('hidden').text("@Lang.confirm");
-                selectedNumbers = [activeBall.text().trim()];
-                updateSelectionCount(); 
+                // Single mode logic is handled by setting selectedNumbers previously or here
+            }
+            
+            updateSelectionCount(); 
+            liveUpdateTicket();
+
+            // Focus card
+            if (activeTicketCard && activeTicketCard.length) {
+                var container = $("#ticketContainer");
+                var scrollPos = activeTicketCard.offset().top - container.offset().top + container.scrollTop();
+                container.stop().animate({ scrollTop: scrollPos - 15 }, 500);
             }
 
+            // Populate Grid
             for (var i = 1; i <= 80; i++) {
                 var formatted = i.toString().padStart(2, '0');
                 var isSelected = selectedNumbers.includes(formatted);
                 
                 var btnClass = isSelected 
-                    ? 'bg-[#EE0033] text-white shadow-md scale-105' 
+                    ? 'bg-[#EE0033] text-white shadow-md scale-105 active-num' 
                     : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-100';
                 
-                var btn = $(`<button class="num-btn h-10 rounded-lg font-black text-sm transition-all focus:outline-none ${btnClass}">${formatted}</button>`);
+                grid.append(`<button type="button" class="num-btn w-8 h-8 rounded-full font-black text-[11px] transition-all focus:outline-none flex items-center justify-center ${btnClass}">${formatted}</button>`);
+            }
+
+            // Cleanup old listeners and add new one to the grid (event delegation)
+            grid.off('click', '.num-btn').on('click', '.num-btn', function(e) {
+                e.preventDefault();
+                var $btn = $(this);
+                var picked = $btn.text().trim();
                 
-                btn.click(function(e) {
-                    e.preventDefault();
-                    var picked = $(this).text().trim();
-                    if (isMulti) {
-                        if (selectedNumbers.includes(picked)) {
-                            selectedNumbers = selectedNumbers.filter(n => n !== picked);
-                            $(this).removeClass('bg-[#EE0033] text-white shadow-md scale-105').addClass('bg-white text-gray-700 border border-gray-100');
-                        } else if (selectedNumbers.length < maxBalls) {
-                            selectedNumbers.push(picked);
-                            $(this).addClass('bg-[#EE0033] text-white shadow-md scale-105').removeClass('bg-white text-gray-700 border border-gray-100');
-                        }
+                if (isMulti) {
+                    if (selectedNumbers.includes(picked)) {
+                        // Remove
+                        let idx = selectedNumbers.indexOf(picked);
+                        if (idx !== -1) selectedNumbers[idx] = null;
+                        $btn.removeClass('bg-[#EE0033] text-white shadow-md scale-105 active-num').addClass('bg-white text-gray-700 border border-gray-100');
                     } else {
-                        grid.find('.num-btn').removeClass('bg-[#EE0033] text-white shadow-md scale-105').addClass('bg-white text-gray-700 border border-gray-100');
-                        selectedNumbers = [picked];
-                        $(this).addClass('bg-[#EE0033] text-white shadow-md scale-105').removeClass('bg-white text-gray-700 border border-gray-100');
+                        // Add
+                        let firstEmpty = selectedNumbers.indexOf(null);
+                        if (firstEmpty !== -1) {
+                            selectedNumbers[firstEmpty] = picked;
+                            $btn.addClass('bg-[#EE0033] text-white shadow-md scale-105 active-num').removeClass('bg-white text-gray-700 border border-gray-100');
+                        }
                     }
-                    updateSelectionCount();
-                });
-                
-                grid.append(btn);
-            }
+                    liveUpdateTicket();
+                } else {
+                    // Single Select mode
+                    grid.find('.num-btn').removeClass('bg-[#EE0033] text-white shadow-md scale-105 active-num').addClass('bg-white text-gray-700 border border-gray-100');
+                    selectedNumbers = [picked];
+                    $btn.addClass('bg-[#EE0033] text-white shadow-md scale-105 active-num').removeClass('bg-white text-gray-700 border border-gray-100');
+                }
+                updateSelectionCount();
+            });
 
             modal.removeClass('hidden').addClass('flex');
             modal.find('.modal-content').removeClass('animate__zoomOut').addClass('animate__zoomIn');
         }
 
         function updateSelectionCount() {
-            var count = selectedNumbers.length;
+            var count = selectedNumbers.filter(n => n !== null && n !== "").length;
             $("#selectionCount").text(count);
             $("#maxSelectionCount").text(maxBalls);
             var isValid = activeTicketCard ? (count === maxBalls) : (count === 1);
@@ -574,31 +595,79 @@ else
             }
         }
 
+        function liveUpdateTicket() {
+            if (!activeTicketCard) return;
+            var balls = activeTicketCard.find('.ball-circle');
+            var modalPreview = $("#modalSelectionPreview");
+            
+            // No more clearing all and sorting in fixed-position mode
+            // Just update based on index
+            modalPreview.empty();
+            
+            // Update Modal Preview Bar & Ticket Card balls
+            for(var i=0; i < maxBalls; i++){
+                var val = selectedNumbers[i];
+                
+                // Update Ticket Card Ball
+                if (i < balls.length) {
+                    var tBall = $(balls[i]);
+                    if (val) {
+                        tBall.removeClass('ball-empty').addClass('ball-filled').text(val);
+                    } else {
+                        tBall.removeClass('ball-filled').addClass('ball-empty').text('');
+                    }
+                }
+            }
+            
+            // Toggle Rand/Edit button visibility
+            if (selectedNumbers.length > 0) {
+                 activeTicketCard.find('.rand-btn').hide();
+                 activeTicketCard.find('.edit-delete-group').removeClass('hidden').show();
+            } else {
+                 activeTicketCard.find('.rand-btn').show();
+                 activeTicketCard.find('.edit-delete-group').addClass('hidden');
+            }
+            
+            updateTotalPrice();
+        }
+
         // All immediate jQuery event bindings must wait for DOM + jQuery to be ready
         document.addEventListener("DOMContentLoaded", function() {
-            // Click on a filled ball to edit single number
-            $(document).on('click', '.ball-filled', function() {
-                activeBall = $(this);
-                activeTicketCard = null;
-                openNumberPicker(false);
+            // Click on a ball (filled or empty) to pick numbers
+            $(document).on('click', '.ball-filled, .ball-empty', function() {
+                activeTicketCard = $(this).closest('.ticket-card');
+                
+                // Read current numbers from balls into the array
+                selectedNumbers = new Array(maxBalls).fill(null);
+                activeTicketCard.find('.ball-circle').each(function(idx) {
+                    var val = $(this).text().trim();
+                    if (val && idx < maxBalls) selectedNumbers[idx] = val;
+                });
+                
+                openNumberPicker(true);
             });
 
+            updateTotalPrice();
+
             // Confirm button handler
             $(document).off('click', '#confirmBtn').on('click', '#confirmBtn', function(e) {
                 e.preventDefault();
-                if (selectedNumbers.length === 0) return;
+                // Check non-null count
+                var count = selectedNumbers.filter(n => n !== null && n !== "").length;
+                if (count === 0) return;
 
                 if (activeTicketCard && activeTicketCard.length > 0) {
-                    // Multi mode: Update the entire ticket card
-                    selectedNumbers.sort((a, b) => parseInt(a) - parseInt(b));
-                    
-                    var balls = activeTicketCard.find('.ball-circle, .ball-empty, .ball-filled');
+                    // Collect and sort for final storage/display (lottery numbers are usually sorted)
+                    var finalSorted = selectedNumbers.filter(n => n !== null && n !== "").sort((a, b) => parseInt(a) - parseInt(b));
                     
-                    balls.each(function(index) {
-                        if (index < selectedNumbers.length) {
-                            $(this).removeClass('ball-empty').addClass('ball-filled').text(selectedNumbers[index]);
-                            $(this).addClass('animate__animated animate__pulse');
-                            setTimeout(() => $(this).removeClass('animate__animated animate__pulse'), 500);
+                    var balls = activeTicketCard.find('.ball-circle');
+                    balls.removeClass('ball-filled').addClass('ball-empty').text('');
+
+                    finalSorted.forEach((num, index) => {
+                        if (index < balls.length) {
+                            $(balls[index]).removeClass('ball-empty').addClass('ball-filled').text(num);
+                            $(balls[index]).addClass('animate__animated animate__pulse');
+                            setTimeout(() => $(balls[index]).removeClass('animate__animated animate__pulse'), 500);
                         }
                     });
 
@@ -651,7 +720,7 @@ else
 
             var ticketHtml = `
                 <div class="ticket-card relative group active:bg-gray-50 transition-colors cursor-pointer animate__animated animate__fadeInUp animate__faster">
-                    <button onclick="removeEntry(this)" class="absolute -right-2 top-1 w-7 h-7 bg-[#999] text-white rounded-full flex items-center justify-center text-[11px] shadow-sm z-[10] hover:bg-red-500 transition-all border-2 border-white">
+                    <button onclick="removeEntry(this)" class="absolute -right-2 top-1 w-7 h-7 bg-[#EE0033] text-white rounded-full flex items-center justify-center text-[11px] shadow-sm z-[10] hover:bg-red-600 transition-all border-2 border-white">
                         <i class="fa-solid fa-xmark"></i>
                     </button>
                     <div class="absolute left-2 top-4 w-9 h-9 rounded-full bg-[#EE0033] border-[3px] border-white flex items-center justify-center text-white font-black text-sm shadow-md ticket-index">${currentIndex}</div>
@@ -662,7 +731,7 @@ else
                                 ${ballsHtml}
                             </div>
                             <div class="w-20 action-area flex flex-col gap-2">
-                                 <button onclick="randomizeTicket(this)" class="rand-btn bg-green-main text-white flex items-center justify-center gap-2 w-20 py-2 rounded-xl font-extrabold text-[11px] shadow-sm active:scale-95 transition-all">
+                                 <button onclick="randomizeTicket(this)" class="rand-btn bg-[#0A9800] text-white flex items-center justify-center gap-2 w-20 py-2 rounded-xl font-extrabold text-[11px] shadow-sm active:scale-95 transition-all">
                                      <i class="fa-solid fa-arrows-rotate text-[10px]"></i> @Lang.Random
                                  </button>
                                  <div class="edit-delete-group hidden flex flex-col gap-2">
@@ -789,7 +858,7 @@ else
                 if (numbers.length > 1) {
                     let numbersBalls = '';
                     numbers.forEach(n => {
-                        numbersBalls += `<div class="w-7 h-7 rounded-full flex items-center justify-center text-white text-[11px] font-black shadow-lg" style="background: radial-gradient(circle at 30% 30%, #444, #000);">${n.trim()}</div>`;
+                        numbersBalls += `<div class="w-7 h-7 rounded-full flex items-center justify-center text-white text-[11px] font-black shadow-lg" style="background: radial-gradient(circle at 30% 30%, #ffffff 0%, #ff0f43 15%, #d1002c 100%); border: 1px solid #ffffff;">${n.trim()}</div>`;
                     });
                     contentHtml = `<div class="grid grid-cols-5 gap-y-2 relative z-10 px-2 justify-items-center">${numbersBalls}</div>`;
                 } else {
@@ -802,8 +871,8 @@ else
 
                 const itemHtml = `
                     <div class="flex items-center gap-3">
-                        <div class="flex-1 rounded-2xl p-3 relative overflow-hidden flex flex-col gap-2 min-h-[80px] justify-center" 
-                             style="background: linear-gradient(90deg, #EE0033 0%, rgba(238, 0, 51, 0.4) 70%, rgba(238, 0, 51, 0.05) 100%); border: 1px solid rgba(238, 0, 51, 0.1);">
+                        <div class="flex-1 rounded-2xl p-3 relative overflow-hidden flex flex-col gap-2 min-h-[80px] justify-center shadow-sm" 
+                             style="background: white; border: 1.5px solid #EE0033;">
                             ${contentHtml}
                         </div>
                         <div class="w-24 shrink-0 bg-white border border-gray-200 rounded-2xl p-2.5 flex items-center justify-between shadow-sm">
@@ -857,42 +926,54 @@ else
             hideOrderSummary();
             $("#otpModal").removeClass("hidden").addClass("flex");
             $("#otpInputs input").val("");
+            $("#otpConfirmBtn").prop('disabled', true);
             $("#otpError").addClass("hidden").text("");
             $("#otp1").focus();
             
             // Map game type to readable name & image
             let gameTypeStr = "@Model.termType";
-            let displayName = "Classic Pick 10";
+            let displayName = "Basic Pick 10";
             let imgSrc = "";
             
             if (gameTypeStr === "@Constants.PIC10_BIGSMALL_CODE") {
-                displayName = "Big / Small";
-                // Detect if current selection is Big or Small from summary
-                let firstTicket = $("#summaryTicketList .flex.items-center span.font-black").first().text().trim();
-                if (firstTicket.toLowerCase().includes("big")) imgSrc = "/LotteryV2/img/big_text.png";
-                else if (firstTicket.toLowerCase().includes("small")) imgSrc = "/LotteryV2/img/small_text.png";
+                // Get the specific choice from summary
+                let firstTicketText = $("#summaryTicketList").find("span.font-black").first().text().trim();
+                if (firstTicketText) {
+                    displayName = firstTicketText.charAt(0).toUpperCase() + firstTicketText.slice(1).toLowerCase(); // Normalize to "Big" or "Small"
+                } else {
+                    displayName = "Big / Small";
+                }
             } else if (gameTypeStr === "@Constants.PIC10_ODDEVEN_CODE") {
-                displayName = "Odd / Even";
-                let firstTicket = $("#summaryTicketList .flex.items-center span.font-black").first().text().trim();
-                if (firstTicket.toLowerCase().includes("odd")) imgSrc = "/LotteryV2/img/odd_text.png";
-                else if (firstTicket.toLowerCase().includes("even")) imgSrc = "/LotteryV2/img/even_text.png";
+                let firstTicketText = $("#summaryTicketList").find("span.font-black").first().text().trim();
+                if (firstTicketText) {
+                    displayName = firstTicketText.charAt(0).toUpperCase() + firstTicketText.slice(1).toLowerCase(); // Normalize to "Odd" or "Even"
+                } else {
+                    displayName = "Odd / Even";
+                }
             }
             
+            // Determine color based on game type
+            let typeColorClass = "text-purple-700"; // default
+            if (gameTypeStr === "@Constants.PIC10_BASIC_CODE") typeColorClass = "text-[#EE0033]";
+            else if (gameTypeStr === "@Constants.PIC10_BIGSMALL_CODE") typeColorClass = "text-[#0A9800]";
+            else if (gameTypeStr === "@Constants.PIC10_ODDEVEN_CODE") typeColorClass = "text-[#9333ea]";
+
+            // Hide image for now and use the beautiful text style as requested
+            $("#otpTicketTypeImg").hide();
             $("#otpTicketTypeContainer").find("span").remove();
-            if (imgSrc) {
-                $("#otpTicketTypeImg").attr("src", imgSrc).show();
-            } else {
-                $("#otpTicketTypeImg").hide();
-                if ($("#otpTicketTypeContainer").find("span").length === 0) {
-                    $("#otpTicketTypeContainer").append(`<span class='text-[17px] font-[900] text-purple-700 italic'>${displayName}</span>`);
-                }
-            }
+            $("#otpTicketTypeContainer").append(`<span class='text-[17px] font-[900] ${typeColorClass} italic'>${displayName}</span>`);
             
             $("#otpTotalAmount").text($("#summaryTotalAmount").text());
             startOtpTimer(60);
         }
 
         // Add backspace support for OTP inputs
+        $("#otpInputs input").on("keyup", function() {
+            let otp = "";
+            $("#otpInputs input").each(function() { otp += $(this).val(); });
+            $("#otpConfirmBtn").prop('disabled', otp.length < 6);
+        });
+
         $("#otpInputs input").on("keydown", function(e) {
             if (e.key === "Backspace" && this.value.length === 0) {
                 $(this).prev('input').focus();
@@ -925,6 +1006,11 @@ else
             if (el.value.length >= 1) {
                 if (nextId) document.getElementById(nextId).focus();
             }
+            
+            let otp = "";
+            $("#otpInputs input").each(function() { otp += $(this).val(); });
+            $("#otpConfirmBtn").prop('disabled', otp.length < 6);
+
             // Clear error when typing
             $("#otpError").addClass("hidden").text("");
         }
@@ -951,7 +1037,7 @@ else
             if(phone) $("#receiptPhone").text(phone);
             
             let gameTypeStr = "@Model.termType";
-            let displayName = "@Lang.v2_classic_pick_10";
+            let displayName = "Basic Pick 10";
             if (gameTypeStr === "@Constants.PIC10_BIGSMALL_CODE") displayName = "@Lang.v2_big_small";
             else if (gameTypeStr === "@Constants.PIC10_ODDEVEN_CODE") displayName = "@Lang.v2_odd_even";
             
@@ -1005,7 +1091,7 @@ else
                     
                     if (res.responseCode === "0" || res.responseCode === "0000") {
                         // Success: Show receipt Modal
-                        showReceiptSuccess(res.transId || currentTransId, $("#summaryTotalAmount").text(), "@(Model.userStatus?.msisdn ?? "-")");
+                        showReceiptSuccess(res.orderId || currentTransId, $("#summaryTotalAmount").text(), "@(Model.userStatus?.msisdn ?? "-")");
                     } else {
                         // showNotification(res.responseMessage || "Payment failed", "warning");
                         // As requested: show error on OTP modal instead of whole page notification
@@ -1030,7 +1116,7 @@ else
             
             // Toggle icon based on type (warning or success)
             const warningIcon = '/LotteryV2/img/modal/warning_icon.png';
-            const successIcon = '/LotteryV2/img/modal/success_icon.png';
+            const successIcon = '/LotteryV2/img/modal/success_icon_v2.png';
             const fallbackWarning = 'https://cdn-icons-png.flaticon.com/512/564/564619.png';
             const fallbackSuccess = 'https://cdn-icons-png.flaticon.com/512/190/190411.png';
 
@@ -1116,41 +1202,45 @@ else
         }
     </script>
 
-    <!-- Number Picker Modal (Premium Design) -->
-    <div id="numberPickerModal" class="fixed inset-0 bg-black/60 z-[200] hidden items-center justify-center p-4 backdrop-blur-sm transition-all">
-        <div class="modal-content bg-white w-full max-w-[360px] rounded-3xl overflow-hidden shadow-2xl animate__animated animate__zoomIn animate__faster">
-            <div class="p-5 bg-[#EE0033] text-white flex justify-between items-center">
-                <div class="flex items-center gap-3">
-                    <div class="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center">
-                        <i class="fa-solid fa-hashtag text-sm"></i>
+    <!-- Number Picker Modal (Refined Bottom Sheet) -->
+    <div id="numberPickerModal" class="fixed inset-0 bg-black/10 z-[200] hidden items-end justify-center p-0 transition-all">
+        <div class="modal-content bg-white w-full md:max-w-[414px] mx-auto shadow-2xl animate__animated animate__slideInUp animate__faster rounded-t-[20px] overflow-hidden">
+            <div class="px-4 py-3 bg-[#EE0033] text-white flex justify-between items-center relative">
+                <div class="flex flex-col">
+                    <h3 class="font-black text-[15px] uppercase tracking-wide" id="modalTitle">@Lang.Pick_Number</h3>
+                    <div class="selection-count-area">
+                        <span class="text-[10px] font-bold text-white/80 uppercase">Selected: <span id="selectionCount" class="text-white">0</span>/<span id="maxSelectionCount">10</span></span>
                     </div>
-                    <h3 class="font-black text-lg uppercase tracking-tight" id="modalTitle">Pick Number</h3>
                 </div>
-                <button onclick="closeNumberPicker()" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-white/20 transition-all">
-                    <i class="fa-solid fa-xmark text-xl"></i>
+                <button onclick="closeNumberPicker()" class="w-9 h-9 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 transition-all">
+                    <i class="fa-solid fa-xmark text-lg"></i>
                 </button>
             </div>
-            <div class="p-3 bg-gray-50 flex items-center justify-center border-b selection-count-area hidden">
-                <span class="text-[12px] font-bold text-gray-500 uppercase">Selected: <span id="selectionCount" class="text-[#EE0033]">0</span>/<span id="maxSelectionCount">10</span></span>
-            </div>
-            <div class="p-4 grid grid-cols-6 gap-2 max-h-[450px] overflow-y-auto bg-gray-50" id="numberGrid">
+            
+            <style>
+                #numberGrid::-webkit-scrollbar { width: 3px; }
+                #numberGrid::-webkit-scrollbar-track { background: transparent; }
+                #numberGrid::-webkit-scrollbar-thumb { background: #FFD700; border-radius: 10px; }
+                #numberGrid { scrollbar-width: thin; scrollbar-color: #FFD700 transparent; }
+            </style>
+            <div class="p-1 px-2 grid grid-cols-10 gap-1.5 h-[160px] overflow-y-auto bg-gray-50 border-b" id="numberGrid">
                  <!-- 1-80 populated via JS -->
             </div>
-            <div class="p-4 bg-white border-t flex flex-col gap-2">
-                 <button id="confirmBtn" class="hidden w-full py-3 bg-[#EE0033] text-white rounded-xl font-black text-md active:bg-[#CC002D] transition-all uppercase tracking-wide shadow-lg">
-                     @Lang.confirm
-                 </button>
-                 <button onclick="closeNumberPicker()" class="w-full py-3 bg-gray-100 text-gray-700 rounded-xl font-black text-[14px] active:bg-gray-200 transition-all uppercase tracking-wide">
+            <div class="p-3 bg-white border-t flex gap-3">
+                 <button onclick="closeNumberPicker()" class="flex-1 py-1 bg-gray-100 text-gray-600 rounded-lg font-black text-[12px] active:bg-gray-200 transition-all uppercase">
                      @Lang.v2_back
                  </button>
+                 <button id="confirmBtn" class="hidden flex-[2] py-2 bg-[#EE0033] text-white rounded-lg font-black text-[13px] active:bg-[#CC002D] transition-all uppercase shadow-md">
+                     @Lang.confirm
+                 </button>
             </div>
         </div>
     </div>
     <div id="notificationModal" class="fixed inset-0 z-[300] bg-black/60 flex items-center justify-center hidden px-4 font-bricolage backdrop-blur-sm">
         <div class="w-full max-w-[360px] bg-white rounded-[32px] overflow-hidden flex flex-col items-center px-6 pt-5 pb-6 animate__animated animate__zoomIn animate__faster shadow-2xl relative border border-white/50">
             <!-- Alert Icon -->
-            <div class="w-full flex justify-center mb-3 mt-1">
-                <img src="/LotteryV2/img/modal/success_icon.png" class="w-[100px] h-auto object-contain" alt="Notificaton icon" onerror="this.src='https://cdn-icons-png.flaticon.com/512/190/190411.png'" />
+            <div class="w-full flex justify-center mb-2 mt-0">
+                <img src="/LotteryV2/img/modal/success_icon_v2.png" class="w-full max-w-[240px] h-auto object-contain" alt="Notificaton icon" onerror="this.src='https://cdn-icons-png.flaticon.com/512/190/190411.png'" />
             </div>
 
             <!-- Message Area -->
@@ -1178,11 +1268,8 @@ else
             <h2 class="text-[#534A4A] font-[800] text-[19px] tracking-tight relative z-10 w-full text-center mt-1">@Lang.v2_payment_successfully</h2>
             
             <!-- Ticket / Success Graphic -->
-            <div class="relative w-full flex justify-center mt-2 mb-0 z-10">
-                <div class="relative w-[100px] flex items-center justify-center">
-                    <div class="absolute inset-0 bg-green-400 blur-2xl opacity-20 rounded-full scale-125"></div>
-                    <img src="/LotteryV2/img/modal/otp_shield.png" alt="Success" class="w-full drop-shadow-xl z-20" style="mix-blend-mode: multiply;" />
-                </div>
+            <div class="relative w-full flex justify-center mt-2 mb-0 z-10 px-4">
+                <img src="/LotteryV2/img/modal/success_icon_v2.png" alt="Success" class="w-full h-auto object-contain">
             </div>
 
             <h3 class="text-[#0A9800] font-[900] text-[20px] uppercase tracking-wide relative z-10">@Lang.success</h3>
@@ -1190,7 +1277,7 @@ else
             <div class="w-full h-px border-t-[2px] border-dashed border-gray-300 my-3 relative z-10"></div>
             
             <div class="w-full flex justify-between items-center mb-2 relative z-10 px-1">
-                <span class="text-[#534A4A] font-bold text-[14px]">@Lang.number</span>
+                <span class="text-[#534A4A] font-bold text-[14px]">@Lang.Number_of_ticket</span>
                 <span class="font-black text-[14px] text-gray-800" id="receiptPhone">-</span>
             </div>
             
@@ -1205,7 +1292,7 @@ else
             </div>
             
             <div class="w-full flex justify-between items-center mb-1 relative z-10 px-1">
-                <span class="text-[#534A4A] font-bold text-[14px]">@Lang.payment</span>
+                <span class="text-[#534A4A] font-bold text-[14px]">@Lang.total_payment</span>
                 <span class="text-[#EE0033] font-[900] text-[15px]" id="receiptAmount">0 HTG</span>
             </div>
 

website/Areas/LotteryV2/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-1/2 -translate-x-1/2 w-full max-w-[414px] bg-[#EE0033] 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-[414px] bg-[#EE0033] 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>
@@ -65,10 +65,67 @@
              </div>
         </div>
 
+        <!-- Q4: Classic Pick 10 Prizes -->
+        <div class="flex justify-start pt-4">
+             <div class="rounded-xl rounded-tl-sm px-5 py-3 shadow-sm w-[90%] bg-[#EE0033] text-white">
+                 <span class="text-sm font-bold leading-snug block">@Lang.faq_v2_q4</span>
+             </div>
+        </div>
+        <div class="flex justify-end mt-2">
+             <div class="rounded-xl rounded-tr-sm px-5 py-4 shadow-md w-[90%] bg-white text-[#212121] border border-gray-100">
+                 <span class="text-[13px] font-medium leading-relaxed block">@Html.Raw(Lang.faq_v2_a4)</span>
+             </div>
+        </div>
 
+        <!-- Q5: Big/Small Gameplay -->
+        <div class="flex justify-start pt-4">
+             <div class="rounded-xl rounded-tl-sm px-5 py-3 shadow-sm w-[90%] bg-[#EE0033] text-white">
+                 <span class="text-sm font-bold leading-snug block">@Lang.faq_v2_q5</span>
+             </div>
+        </div>
+        <div class="flex justify-end mt-2">
+             <div class="rounded-xl rounded-tr-sm px-5 py-4 shadow-md w-[90%] bg-white text-[#212121] border border-gray-100">
+                 <span class="text-[13px] font-medium leading-relaxed block">@Lang.faq_v2_a5</span>
+             </div>
+        </div>
+
+        <!-- Q6: Big/Small Winning -->
+        <div class="flex justify-start pt-4">
+             <div class="rounded-xl rounded-tl-sm px-5 py-3 shadow-sm w-[90%] bg-[#EE0033] text-white">
+                 <span class="text-sm font-bold leading-snug block">@Lang.faq_v2_q6</span>
+             </div>
+        </div>
+        <div class="flex justify-end mt-2">
+             <div class="rounded-xl rounded-tr-sm px-5 py-4 shadow-md w-[90%] bg-white text-[#212121] border border-gray-100">
+                 <span class="text-[13px] font-medium leading-relaxed block">@Html.Raw(Lang.faq_v2_a6)</span>
+             </div>
+        </div>
+
+        <!-- Q7: Odd/Even Gameplay -->
+        <div class="flex justify-start pt-4">
+             <div class="rounded-xl rounded-tl-sm px-5 py-3 shadow-sm w-[90%] bg-[#EE0033] text-white">
+                 <span class="text-sm font-bold leading-snug block">@Lang.faq_v2_q7</span>
+             </div>
+        </div>
+        <div class="flex justify-end mt-2">
+             <div class="rounded-xl rounded-tr-sm px-5 py-4 shadow-md w-[90%] bg-white text-[#212121] border border-gray-100">
+                 <span class="text-[13px] font-medium leading-relaxed block">@Lang.faq_v2_a7</span>
+             </div>
+        </div>
+
+        <!-- Q8: Odd/Even Winning -->
+        <div class="flex justify-start pt-4">
+             <div class="rounded-xl rounded-tl-sm px-5 py-3 shadow-sm w-[90%] bg-[#EE0033] text-white">
+                 <span class="text-sm font-bold leading-snug block">@Lang.faq_v2_q8</span>
+             </div>
+        </div>
+        <div class="flex justify-end mt-2">
+             <div class="rounded-xl rounded-tr-sm px-5 py-4 shadow-md w-[90%] bg-white text-[#212121] border border-gray-100">
+                 <span class="text-[13px] font-medium leading-relaxed block">@Html.Raw(Lang.faq_v2_a8)</span>
+             </div>
+        </div>
 
     </div>
     <!-- Bottom Navbar shared component -->
     <partial name="_BottomNavbar" />
 </div>
-

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

@@ -17,7 +17,7 @@
                 <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?.fullName ?? "User")</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)">@(Model?.userStatus?.bet_coin ?? "0")</span>
                     <span class="text-xs font-bold text-[#FBF3A7] uppercase mt-1">@Lang.v2_htg</span>
@@ -27,12 +27,12 @@
 
         <!-- Row 2: Pill Actions Full Width Split -->
         <div class="grid grid-cols-2 gap-3 mt-4">
-             <a href="/LotteryV2/Home/Results" class="btn-pulse border border-white/50 rounded-xl py-2 px-3 flex items-center justify-center gap-1 text-xs font-extrabold bg-white/10 hover:bg-white/20 transition-all text-white no-underline">
+             <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>
-             <button class="btn-pulse border border-white/50 rounded-xl py-2 px-3 flex items-center justify-center gap-1 text-xs font-extrabold bg-white/10 hover:bg-white/20 transition-all">
-                 <span>🎫</span> @Lang.my_ticket
-             </button>
+             <a href="/LotteryV2/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 -->
@@ -45,26 +45,39 @@
     </div>
 
     <!-- Countdown Timer Bar with Scalloped bottom divider background -->
-    <div class="relative w-full" style="background-image: url('/LotteryV2/img/wavy_border.svg'); background-size: 100% 100%; background-repeat: no-repeat; height: 114px;">
-        <!-- Inner Absolute centering to match SVG border limits correctly -->
-        <div class="absolute inset-0 flex items-start justify-between px-6 pt-6 text-gray-800">
-             <div class="flex items-center gap-2">
-                 <div class="bg-red-50 p-1.5 rounded-lg text-[#EE0033]">
-                     <img src="/LotteryV2/img/icon_calendar.svg" alt="Calendar" class="w-5 h-5">
+    <div class="relative w-full overflow-hidden" style="background-image: url('/LotteryV2/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-[#EE0033]"></div>
+        
+        <div class="flex items-center justify-between px-5 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="/LotteryV2/img/calendar_icon_3d.png" alt="Calendar" class="w-full h-full object-contain" onerror="this.src='/LotteryV2/img/icon_calendar.svg'">
                  </div>
-                 <div>
-                     <div class="text-[10px] text-gray-400 font-bold">@Lang.next_draw</div>
-                     <div class="text-xs font-black text-gray-800" id="draw-date">Friday, Mar 20, 2026</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>
              
-             <!-- Timer Boxes -->
-             <div class="flex gap-3 text-center">
-                 <div class="flex flex-col"><span class="text-xl font-black text-gray-800" id="countdown-hours">00</span><span class="text-[8px] text-gray-400 font-extrabold uppercase mt-0.5">@Lang.hours</span></div>
-                 <div class="text-gray-400 font-bold pt-1">:</div>
-                 <div class="flex flex-col"><span class="text-xl font-black text-gray-800" id="countdown-minutes">00</span><span class="text-[8px] text-gray-400 font-extrabold uppercase mt-0.5">@Lang.mins</span></div>
-                 <div class="text-gray-400 font-bold pt-1">:</div>
-                 <div class="flex flex-col"><span class="text-xl font-black text-gray-800" id="countdown-seconds">00</span><span class="text-[8px] text-gray-400 font-extrabold uppercase mt-0.5">@Lang.seconds</span></div>
+             <!-- Right: Timer -->
+             <div class="flex gap-3.5 shrink-0">
+                 <div class="flex flex-col items-center">
+                     <span class="text-[12px] text-black font-semibold">@Lang.hours</span>
+                     <span class="text-[26px] font-[1000] text-black leading-none font-bricolage" id="countdown-hours">82</span>
+                 </div>
+                 <div class="flex flex-col items-center">
+                    <span class="text-[12px] text-black font-semibold">@Lang.Minutes</span>
+                     <span class="text-[26px] font-[1000] text-black leading-none font-bricolage" id="countdown-minutes">50</span>
+                 </div>
+                 <div class="flex flex-col items-center">
+                    <span class="text-[12px] text-black font-semibold">@Lang.Secs</span>
+                     <span class="text-[26px] font-[1000] text-black leading-none font-bricolage" id="countdown-seconds">55</span>
+                 </div>
              </div>
         </div>
     </div>
@@ -73,72 +86,163 @@
     @Html.AntiForgeryToken()
 
     <!-- Card list items with accurate illustrations -->
-    <div class="px-3 flex flex-col gap-3 pb-40 relative z-10 mt-[5px]">
+    <div class="px-3 flex flex-col gap-2 pb-40 relative z-10 mt-[14px]">
         
         <!-- Game item 1: Basic Pick 10 -->
-        <div class="w-full bg-[#E11D48] p-3.5 rounded-2xl relative overflow-hidden card-shadow text-white border border-white/10 filter brightness-105 cursor-pointer transform active:scale-[0.98] transition-all" onclick="checkTerm('@Constants.PIC10_BASIC_CODE')">
-            <div class="absolute -left-6 -top-6 w-16 h-16 bg-white/10 rounded-full blur-xl"></div>
-            <div class="grid grid-cols-10 items-center">
-                <div class="col-span-3 flex flex-col items-start">
-                    <div class="text-[12px] font-black italic tracking-wider">@Lang.basic_account</div>
-                    <div class="text-xs font-black italic tracking-wider text-yellow-300 -mt-0.5 flex items-center gap-1">
-                        <span>Pick</span>
-                        <img src="/LotteryV2/img/ball_10.png" alt="10" class="w-5 h-5 object-contain">
+        <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.PIC10_BASIC_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="/LotteryV2/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="/LotteryV2/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: Basic Pick + Ball (3 columns) -->
+                <div class="col-span-3 flex items-center h-full pl-1 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">@Lang.Basic</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;">@Lang.Pick</span>
+                        
+                        <!-- Floating Bubbles (Matching Image) -->
+                        <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 class="absolute bottom-[-6px] left-[10px] w-1.5 h-1.5 bg-white rounded-full opacity-80"></div>
+                    </div>
+
+                    <!-- Single Ball 10 (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">10</span>
+                        </div>
+                        <!-- Extra decorative dot overlapping ball -->
+                        <div class="absolute top-1 -left-1 w-2 h-2 bg-white rounded-full shadow-sm"></div>
                     </div>
                 </div>
-                <div class="col-span-4 flex flex-col items-center text-center">
-                    <div class="text-[12px] uppercase font-bold text-white/80">@Lang.jackpot_prize</div>
-                    <div class="text-xl font-extrabold text-[#FBF3A7] tracking-wider">100.000 <span class="text-[10px] font-bold">@Lang.v2_htg</span></div>
-                    <div class="text-[10px] mt-1 flex gap-1 items-center">@Lang.next_round <span class="font-bold text-yellow-300">05:00</span></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-[26px] font-black text-[#FBF3A7] leading-none" style="text-shadow: 0 4px 8px rgba(0,0,0,0.3)">100.000</span>
+                        <span class="text-[9px] font-bold text-white uppercase opacity-90 mt-1">@Lang.v2_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>
-                <div class="col-span-3 flex flex-col justify-end items-center h-full relative">
-                    <img src="/LotteryV2/img/gold_chest.png" alt="Chest" class="w-14 h-14 object-contain filter drop-shadow-md">
-                    <button class="bg-gradient-to-b from-yellow-300 to-yellow-400 text-red-700 font-extrabold px-3 py-1 rounded-xl text-[12px] shadow-sm mt-1">@Lang.play</button>
+
+                <!-- 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="/LotteryV2/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>
 
         <!-- Game item 2: Big/Small -->
-        <div class="w-full p-3.5 rounded-2xl relative overflow-hidden card-shadow text-white border border-white/10 cursor-pointer transform active:scale-[0.98] transition-all" style="background-color: rgb(38 163 30);" onclick="checkTerm('@Constants.PIC10_BIGSMALL_CODE')">
-            <div class="absolute -left-6 -top-6 w-16 h-16 bg-white/10 rounded-full blur-xl"></div>
-            <div class="grid grid-cols-10 items-center">
-                <div class="col-span-3 flex flex-col items-start">
-                    <div class="text-[12px] font-black italic tracking-wide">@Lang.small_big</div>
-                    <div class="flex items-center gap-1 mt-1">
-                        <img src="/LotteryV2/img/ball_88.png" alt="88" class="w-5 h-5 object-contain">
+        <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-shadow text-white border border-white/10" style="background-color: rgb(38 163 30);" onclick="checkTerm('@Constants.PIC10_BIGSMALL_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="/LotteryV2/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="/LotteryV2/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: Big/Small + Ball (3 columns) -->
+                <div class="col-span-3 flex items-center h-full pl-1 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">@Lang.Small</span>
+                        <span class="font-[900] text-[30px] drop-shadow-lg leading-[0.9]" style="background: linear-gradient(180deg, #FFFFFF 20%, #89FF77 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">@Lang.Big</span>
+                        
+                        <!-- Decorative dots (Bubbles) -->
+                         <div class="absolute -top-1 -right-1 w-2.5 h-2.5 bg-white/40 rounded-full blur-[1px]"></div>
+                         <div class="absolute top-1/2 -right-5 w-2 h-2 bg-white rounded-full shadow-sm opacity-90"></div>
+                         <div class="absolute -bottom-2 left-6 w-1.5 h-1.5 bg-yellow-200 rounded-full opacity-80"></div>
+                         <div class="absolute top-2 -left-2 w-1.5 h-1.5 bg-white/60 rounded-full"></div>
+                    </div>
+
+                    <!-- Single Ball 88 -->
+                    <div class="relative w-[48px] h-[48px] flex-shrink-0 -ml-18 mt-1 aspect-square z-20">
+                        <img src="/LotteryV2/img/ball_88.png" alt="88" class="w-full h-full object-contain filter drop-shadow-[0_4px_10px_rgba(0,0,0,0.5)]">
+                        <!-- Extra small decorative white dot near ball -->
+                        <div class="absolute -top-1 -right-1 w-2.5 h-2.5 bg-white rounded-full shadow-sm"></div>
+                        <div class="absolute -bottom-1 left-0 w-1.5 h-1.5 bg-white/50 rounded-full"></div>
                     </div>
                 </div>
-                <div class="col-span-4 flex flex-col items-center text-center">
-                    <div class="text-[12px] uppercase font-bold text-white/80">@Lang.jackpot_prize</div>
-                    <div class="text-xl font-extrabold text-[#FBF3A7] tracking-wider">100 <span class="text-[10px] font-bold">@Lang.v2_htg</span></div>
-                    <div class="text-[10px] mt-1 flex gap-1 items-center">@Lang.next_round <span class="font-bold text-yellow-300">05:00</span></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-[26px] font-black text-[#FBF3A7] leading-none" style="text-shadow: 0 4px 8px rgba(0,0,0,0.3)">100</span>
+                        <span class="text-[9px] font-bold text-white uppercase opacity-90 mt-1">@Lang.v2_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>
-                <div class="col-span-3 flex flex-col justify-end items-center h-full relative">
-                    <img src="/LotteryV2/img/gold_bag.png" alt="Bag" class="w-14 h-14 object-contain filter drop-shadow-md">
-                    <button class="bg-gradient-to-b from-yellow-300 to-yellow-400 text-emerald-800 font-extrabold px-3 py-1 rounded-xl text-[12px] shadow-sm mt-1">@Lang.play</button>
+
+                <!-- 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="/LotteryV2/img/gold_bag.png" alt="Bag" 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>
 
         <!-- Game item 3: @Lang.odd_even -->
-        <div class="w-full p-3.5 rounded-2xl relative overflow-hidden card-shadow text-white border border-white/10 cursor-pointer transform active:scale-[0.98] transition-all" style="background-color: rgb(213 45 233);" onclick="checkTerm('@Constants.PIC10_ODDEVEN_CODE')">
-            <div class="absolute -left-6 -top-6 w-16 h-16 bg-white/10 rounded-full blur-xl"></div>
-            <div class="grid grid-cols-10 items-center">
-                <div class="col-span-3 flex flex-col items-start">
-                    <div class="text-[12px] font-black italic tracking-wide">@Lang.odd_even</div>
-                    <div class="flex items-center gap-1 mt-1">
-                        <img src="/LotteryV2/img/ball_3.png" alt="3" class="w-4 h-4 object-contain">
-                        <img src="/LotteryV2/img/ball_20.png" alt="20" class="w-5 h-5 object-contain -ml-1">
+        <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-shadow text-white border border-white/10" style="background-color: rgb(213 45 233);" onclick="checkTerm('@Constants.PIC10_ODDEVEN_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="/LotteryV2/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="/LotteryV2/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: Odd/Even + Balls (3 columns) -->
+                <div class="col-span-3 flex items-center h-full pl-1 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">@Lang.Odd</span>
+                        <span class="font-[900] text-[30px] drop-shadow-lg leading-[0.9]" style="background: linear-gradient(180deg, #FFFFFF 20%, #F29CFF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">@Lang.Even</span>
+                        
+                        <!-- Decorative dots (Bubbles) -->
+                         <div class="absolute -top-2 -right-2 w-3 h-3 bg-white/30 rounded-full blur-[1px]"></div>
+                         <div class="absolute top-1/2 -right-5 w-2 h-2 bg-yellow-300 rounded-full shadow-sm"></div>
+                         <div class="absolute -top-1 -left-1 w-1.5 h-1.5 bg-white/50 rounded-full"></div>
+                         <div class="absolute -bottom-2 right-2 w-1.5 h-1.5 bg-white rounded-full opacity-80"></div>
+                    </div>
+
+                    <!-- Balls Overlapping -->
+                    <div class="relative w-[60px] h-[60px] flex-shrink-0 -ml-18 -mt-1 aspect-square z-20">
+                        <!-- Ball 3 (Yellow) -->
+                        <div class="absolute left-0 top-0 w-8 h-8 rounded-full shadow-lg z-0">
+                             <img src="/LotteryV2/img/ball_3.png" alt="3" class="w-full h-full object-contain">
+                        </div>
+                        <!-- Ball 20 (Pink/Magenta) -->
+                        <div class="absolute left-4 top-3 w-9 h-9 rounded-full shadow-xl z-10">
+                             <img src="/LotteryV2/img/ball_20.png" alt="20" class="w-full h-full object-contain border-2 border-white/20 rounded-full">
+                        </div>
+                        <!-- Small highlight dot near ball -->
+                        <div class="absolute -top-1 right-2 w-1.5 h-1.5 bg-white rounded-full shadow-sm opacity-90"></div>
                     </div>
                 </div>
-                <div class="col-span-4 flex flex-col items-center text-center">
-                    <div class="text-[12px] uppercase font-bold text-white/80">@Lang.jackpot_prize</div>
-                    <div class="text-xl font-extrabold text-[#FBF3A7] tracking-wider">200 <span class="text-[10px] font-bold">@Lang.v2_htg</span></div>
-                    <div class="text-[10px] mt-1 flex gap-1 items-center">@Lang.next_round <span class="font-bold text-yellow-300">05:00</span></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-[26px] font-black text-[#FBF3A7] leading-none" style="text-shadow: 0 4px 8px rgba(0,0,0,0.3)">200</span>
+                        <span class="text-[9px] font-bold text-white uppercase opacity-90 mt-1">@Lang.v2_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>
-                <div class="col-span-3 flex flex-col justify-end items-center h-full relative">
-                    <img src="/LotteryV2/img/gold_wallet.png" alt="Wallet" class="w-14 h-14 object-contain filter drop-shadow-md">
-                    <button class="bg-gradient-to-b from-yellow-300 to-yellow-400 text-blue-800 font-extrabold px-3 py-1 rounded-xl text-[12px] shadow-sm mt-1">@Lang.play</button>
+
+                <!-- 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="/LotteryV2/img/gold_wallet.png" alt="Wallet" 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>
@@ -146,12 +250,12 @@
     </div>
 
     <!-- Banner Info Section centered red text bar -->
-    <div class="fixed bottom-[74px] left-1/2 -translate-x-1/2 w-full max-w-[414px] bg-[#EE0033] text-white py-2 text-center text-[12px] font-bold tracking-wide z-40 flex flex-col items-center justify-center overflow-hidden h-auto shadow-md">
+    <div class="fixed bottom-[74px] left-0 md:left-1/2 md:-translate-x-1/2 w-full md:max-w-[414px] bg-[#EE0033] 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-[18px] font-black text-[#FBF3A7] mt-0.5">
+             <div class="text-[20px] font-black text-[#FBF3A7] mt-0.5">
                   @Lang.jackpot_today_htg
              </div>
          </div>
@@ -279,6 +383,10 @@
                 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();

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

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

website/Areas/LotteryV2/Views/Home/HowToPlay.cshtml

@@ -48,7 +48,7 @@
 
                     <!-- Center: Numbers -->
                     <div class="flex flex-col items-center mt-0.5 ml-4">
-                        <span class="text-[10px] font-[800] text-white tracking-widest uppercase drop-shadow">@Lang.jackpot_prize</span>
+                        <span class="text-[10px] font-[800] text-white tracking-widest drop-shadow">@Lang.jackpot_prize</span>
                         <div class="flex items-start gap-1 mt-0.5">
                             <span class="text-[28px] font-[900] text-white leading-none tracking-tight drop-shadow-md">100.000</span>
                             <span class="text-[7px] font-[800] text-white bg-transparent border border-white/60 rounded px-[2px] mt-1 shadow-sm leading-tight">HTG</span>
@@ -84,7 +84,7 @@
 
                     <!-- Center: Numbers -->
                     <div class="flex flex-col items-center mt-0.5 -ml-1">
-                        <span class="text-[10px] font-[800] text-white tracking-widest uppercase drop-shadow">@Lang.jackpot_prize</span>
+                        <span class="text-[10px] font-[800] text-white tracking-widest drop-shadow">@Lang.jackpot_prize</span>
                         <div class="flex items-start gap-1 mt-0.5">
                             <span class="text-[28px] font-[900] text-[#FFDE59] leading-none tracking-tight drop-shadow-md">500.000</span>
                             <span class="text-[7px] font-[800] text-white bg-transparent border border-white/60 rounded px-[2px] mt-1 shadow-sm leading-tight">HTG</span>
@@ -122,7 +122,7 @@
 
                     <!-- Center: Numbers -->
                     <div class="flex flex-col items-center mt-0.5 ml-2">
-                        <span class="text-[10px] font-[800] text-white tracking-widest uppercase drop-shadow">@Lang.jackpot_prize</span>
+                        <span class="text-[10px] font-[800] text-white tracking-widest drop-shadow">@Lang.jackpot_prize</span>
                         <div class="flex items-start gap-1 mt-0.5">
                             <span class="text-[28px] font-[900] text-white leading-none tracking-tight drop-shadow-md">800.000</span>
                             <span class="text-[7px] font-[800] text-white bg-transparent border border-white/60 rounded px-[2px] mt-1 shadow-sm leading-tight">HTG</span>

website/Areas/LotteryV2/Views/Home/Index.cshtml

@@ -30,95 +30,114 @@
     <!-- Game List Section -->
     <div class="px-4 mt-2">
         <div class="flex flex-col gap-3">
-            
-            <!-- Game Card 1: Basic Pick 10 (Dynamic Language) -->
-            <div class="card-red relative w-full h-[110px] rounded-2xl overflow-hidden shadow-lg transform hover:scale-[1.01] transition-all duration-200 cursor-pointer animate__animated animate__slideInUp">
-                <!-- Glowing effect circle inside card background -->
-                <div class="absolute -left-4 -top-4 w-16 h-16 bg-white/10 rounded-full blur-xl"></div>
-                <div class="absolute -right-4 -bottom-4 w-20 h-20 bg-black/10 rounded-full blur-xl"></div>
-
-                <div class="absolute inset-0 grid grid-cols-10 items-center px-3 text-white">
-                    <!-- Left: Module and Ball component -->
-                    <div class="col-span-3 flex flex-col items-start justify-center pl-2">
-                        <div class="relative">
-                            <div class="text-[13px] font-black italic tracking-wider text-white">@Lang.Basic</div>
-                            <div class="text-[14px] font-black italic tracking-wider text-yellow-300 -mt-1">Pick</div>
-                            <!-- Yellow number style ball -->
-                            <div class="absolute left-10 top-2 w-7 h-7 bg-gradient-to-br from-yellow-300 to-yellow-500 rounded-full border border-white flex items-center justify-center shadow-md">
-                                <span class="text-red-700 font-extrabold text-xs">10</span>
-                            </div>
+            <!-- Game Card 1: Basic Pick 10 -->
+            <div class="relative w-full h-[120px] rounded-2xl overflow-hidden shadow-2xl transform active:scale-[0.98] transition-all duration-300 cursor-pointer animate__animated animate__slideInUp card-red" onclick="changeGame()">
+                <!-- 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="/LotteryV2/img/decorations/ellipse_1183.png" class="absolute -left-[80px] -top-[130px] w-[220px] h-[220px] pointer-events-none z-10 mix-blend-screen opacity-90 scale-y-[-1]" alt="highlight">
+                <img src="/LotteryV2/img/decorations/ellipse_1181.png" class="absolute -right-[60px] -top-[20px] w-[200px] h-[200px] pointer-events-none z-10 mix-blend-screen opacity-90" alt="highlight">
+
+                <div class="absolute inset-0 grid grid-cols-12 items-center px-3 z-20 gap-0">
+                    <!-- Left: Basic Pick + Ball (4 columns) -->
+                    <div class="col-span-4 flex items-center gap-1 pl-1">
+                        <div class="flex flex-col leading-none">
+                            <span class="text-white font-black italic text-[14px]">@Lang.Basic</span>
+                            <span class="text-yellow-400 font-black italic text-[22px] -mt-1 shadow-sm">@Lang.Pick</span>
+                        </div>
+                        <div class="w-8 h-8 bg-gradient-to-br from-yellow-300 to-yellow-500 rounded-full border-[2px] border-white flex items-center justify-center shadow-xl transform rotate-12 flex-shrink-0">
+                            <span class="text-red-700 font-black text-xl">10</span>
                         </div>
                     </div>
 
-                    <!-- Center: Dynamic text layer aligned for Translation -->
-                    <div class="col-span-4 flex flex-col items-center justify-center text-center">
-                        <div class="text-[10px] uppercase font-bold text-gray-200 tracking-wider">@Lang.jackpot_prize</div>
-                        <div class="text-2xl font-black text-yellow-400 mt-0.5" style="text-shadow: 0 2px 4px rgba(0,0,0,0.3)">100.000<span class="text-xs font-normal text-white"> @Lang.v2_htg</span></div>
-                        <div class="text-[9px] text-gray-200 mt-1 flex gap-1">@Lang.next_round <span class="font-bold text-white">05:00</span></div>
+                    <!-- Center: Jackpot info (4 columns) -->
+                    <div class="col-span-4 flex flex-col items-center justify-center text-center px-1">
+                        <div class="text-[10px] font-bold text-white mb-0.5 whitespace-nowrap opacity-90 leading-none uppercase">@Lang.jackpot_prize</div>
+                        <div class="flex items-start gap-0.5">
+                            <span class="text-[23px] font-black text-[#FBF3A7] leading-none" style="text-shadow: 0 4px 8px rgba(0,0,0,0.3)">100.000</span>
+                            <span class="text-[8px] font-bold text-white uppercase opacity-90 mt-1">HTG</span>
+                        </div>
+                        <div class="text-[10px] text-white/90 font-medium whitespace-nowrap mt-1">@Lang.next : <span class="font-black text-yellow-300 countdown-timer">00:00:00</span></div>
                     </div>
 
-                    <!-- Right: Illustration from image overlay & button -->
-                    <div class="col-span-3 flex flex-col items-center justify-end h-full pb-4 relative">
-                        <img src="/LotteryV2/img/gold.png" alt="Chest" class="absolute bottom-[44px] left-1/2 -translate-x-1/2 w-16 h-12 object-contain filter drop-shadow-md z-10">
-                        <button class="bg-gradient-to-b from-yellow-300 to-yellow-400 text-red-700 font-extrabold px-8 py-1.5 rounded-xl text-[10px] shadow-md hover:from-yellow-200 hover:to-yellow-300 relative z-0" onclick="changeGame()" id="MEGA_LOTO_ID" value="@Constants.MEGA_LOTO">@Lang.play</button>
+                    <!-- Right: Action Section (4 columns) -->
+                    <div class="col-span-4 flex flex-col items-center justify-end h-full pb-4 relative cursor-pointer group">
+                        <img src="/LotteryV2/img/gold.png" alt="Chest" class="absolute bottom-[40px] w-16 h-18 object-contain filter drop-shadow-lg z-10 group-active:scale-95 transition-transform">
+                        <button class="bg-gradient-to-b from-yellow-300 to-white text-black font-black px-2 w-full max-w-[110px] py-1.5 rounded-[12px] text-[13px] shadow-xl border border-white/50 group-hover:brightness-110 group-active:scale-95 transition-all relative z-0" id="MEGA_LOTO_ID" value="@Constants.MEGA_LOTO">@Lang.rule_play_now</button>
                     </div>
                 </div>
             </div>
 
             <!-- Card 2 and 3 commented out by user previously -->
-            <!-- Game Card 2: Millionair (Dynamic Language) -->
-            <div class="card-blue relative w-full h-[110px] rounded-2xl overflow-hidden shadow-md opacity-60 grayscale-[0.3] pointer-events-none animate__animated animate__slideInUp animate__delay-1s">
-                <div class="absolute -left-4 -top-4 w-16 h-16 bg-white/10 rounded-full blur-xl"></div>
+            <!-- Game Card 2: Millionair - Blurred/Faded State -->
+            <div class="card-blue relative w-full h-[120px] rounded-2xl overflow-hidden shadow-md opacity-25 grayscale blur-[1px] pointer-events-none animate__animated animate__slideInUp animate__delay-1s">
+                <!-- 1. Premium Gradient Border -->
+                <div class="absolute inset-0 rounded-2xl border-[1.5px] border-white/20 pointer-events-none z-20"></div>
                 
-                <div class="absolute inset-0 grid grid-cols-10 items-center px-3 text-white">
-                    <!-- Left: Millionair text content -->
-                    <div class="col-span-3 flex items-center h-full relative">
-                        <!-- Left Illustration overlapping -->
-                        <img src="/LotteryV2/img/m1.png" alt="Icon" class="absolute -left-1 bottom-0 h-[85px] object-contain z-0">
-                        <div class="absolute left-4 top-1/2 -translate-y-1/2 z-10 text-[14px] font-black italic tracking-wider text-white drop-shadow-xl pointer-events-none">@Lang.millionair</div>
+                <!-- 2. Decorative Highlights -->
+                <div class="absolute -left-[70px] -top-[108px] w-[193px] h-[193px] bg-gradient-to-br from-white/30 to-transparent rounded-full blur-3xl pointer-events-none"></div>
+
+                <div class="absolute inset-0 grid grid-cols-12 items-center px-3 z-20 gap-0 text-white">
+                    <!-- Left: Millionair text content (4 columns) -->
+                    <div class="col-span-4 flex items-center h-full relative pl-1">
+                         <img src="/LotteryV2/img/m1.png" alt="Icon" class="absolute -left-2 bottom-0 h-[90px] object-contain z-0 opacity-80">
+                         <div class="relative z-10 text-[14px] font-black italic tracking-wider text-white drop-shadow-lg leading-tight pl-2">@Lang.millionair</div>
                     </div>
 
-                    <div class="col-span-4 flex flex-col items-center justify-center text-center">
-                        <div class="text-[10px] uppercase font-bold text-gray-200 tracking-wider">@Lang.jackpot_prize</div>
-                        <div class="text-2xl font-black text-yellow-400 mt-0.5" style="text-shadow: 0 2px 4px rgba(0,0,0,0.3)">500.000<span class="text-xs font-normal text-white"> HTG</span></div>
-                        <div class="text-[9px] text-gray-200 mt-1 flex gap-1">@Lang.next_round <span class="font-bold text-white">05:00</span></div>
+                    <!-- Center: Jackpot info (4 columns) -->
+                    <div class="col-span-4 flex flex-col items-center justify-center text-center px-1">
+                        <div class="text-[10px] uppercase font-bold text-gray-200 mb-0.5 whitespace-nowrap opacity-90 leading-none">@Lang.jackpot_prize</div>
+                        <div class="flex items-start gap-0.5">
+                            <span class="text-[23px] font-black text-[#FBF3A7] leading-none" style="text-shadow: 0 4px 8px rgba(0,0,0,0.3)">500.000</span>
+                            <span class="text-[8px] font-bold text-white uppercase opacity-90 mt-1">HTG</span>
+                        </div>
+                        <div class="text-[10px] text-white/90 font-medium whitespace-nowrap mt-1">@Lang.next : <span class="font-black text-yellow-300 countdown-timer">00:00:00</span></div>
                     </div>
 
-                    <div class="col-span-3 flex flex-col items-center justify-end h-full pb-4 relative">
-                        <img src="/LotteryV2/img/money_bag_large.png" alt="Money Bag" class="absolute bottom-[44px] left-1/2 -translate-x-1/2 w-16 h-12 object-contain filter drop-shadow-md z-10">
-                        <!-- Assuming multiple icons overlay, can absolute them. m1 was cash illustration downloaded earlier -->
-                        <button class="bg-gradient-to-b from-yellow-300 to-yellow-400 text-red-700 font-extrabold px-8 py-1.5 rounded-xl text-[10px] shadow-md hover:from-yellow-200 hover:to-yellow-300" disabled>@Lang.play</button>
+                    <!-- Right: Action Section (4 columns) -->
+                    <div class="col-span-4 flex flex-col items-center justify-end h-full pb-4 relative px-1">
+                        <img src="/LotteryV2/img/money_bag_large.png" alt="Money Bag" class="absolute bottom-[40px] w-16 h-18 object-contain filter drop-shadow-lg z-10">
+                        <button class="bg-gradient-to-b from-yellow-300 to-white text-black font-black px-2 w-full max-w-[110px] py-1.5 rounded-[12px] text-[13px] shadow-xl border border-white/50 group-hover:brightness-110 group-active:scale-95 transition-all relative z-0">@Lang.rule_play_now</button>
                     </div>
                 </div>
             </div>
 
-            <!-- Game Card 3: Mega Bet -->
-            <div class="card-orange relative w-full h-[110px] rounded-2xl overflow-hidden shadow-md opacity-60 grayscale-[0.3] pointer-events-none animate__animated animate__slideInUp animate__delay-2s">
-                <div class="absolute -left-4 -top-4 w-16 h-16 bg-white/10 rounded-full blur-xl"></div>
-                
-                <div class="absolute inset-0 grid grid-cols-10 items-center px-3 text-white">
-                    <!-- Left: Standard dynamic texts with overlay red car if any layout overlaps -->
-                    <div class="col-span-3 flex flex-col items-start justify-center pl-2">
+            <!-- Game Card 3: Mega Bet - Blurred/Faded State -->
+            <div class="card-orange relative w-full h-[120px] rounded-2xl overflow-hidden shadow-md opacity-25 grayscale blur-[1px] pointer-events-none animate__animated animate__slideInUp animate__delay-2s">
+                 <!-- 1. Premium Gradient Border -->
+                 <div class="absolute inset-0 rounded-2xl border-[1.5px] border-white/20 pointer-events-none z-20"></div>
+
+                 <!-- 2. Decorative Highlights -->
+                 <div class="absolute -left-[70px] -top-[108px] w-[193px] h-[193px] bg-gradient-to-br from-white/30 to-transparent rounded-full blur-3xl pointer-events-none"></div>
+
+                 <div class="absolute inset-0 grid grid-cols-12 items-center px-3 z-20 gap-0 text-white">
+                    <!-- Left: Mega Bet text content (4 columns) -->
+                    <div class="col-span-4 flex flex-col items-start justify-center pl-2">
                         <div class="relative">
-                            <div class="text-[13px] font-black italic tracking-wider text-white">@Lang.MEGA</div>
-                            <div class="text-[14px] font-black italic tracking-wider text-red-200 -mt-1">@Lang.Bet</div>
-                            <div class="absolute left-10 top-1 flex">
-                                <span class="w-5 h-5 rounded-full bg-white text-gray-800 text-[10px] font-bold flex items-center justify-center border border-gray-300 -mr-1 shadow-sm">88</span>
-                                <span class="w-5 h-5 rounded-full bg-red-500 text-white text-[10px] font-bold flex items-center justify-center border border-white shadow-sm">99</span>
+                            <div class="text-[14px] font-black italic tracking-wider text-white">@Lang.MEGA</div>
+                            <div class="text-[15px] font-black italic tracking-wider text-red-200 -mt-1">@Lang.Bet</div>
+                            <div class="absolute left-10 top-1 flex shadow-lg">
+                                <span class="w-6 h-6 rounded-full bg-white text-gray-800 text-[11px] font-bold flex items-center justify-center border border-gray-300 -mr-1">88</span>
+                                <span class="w-6 h-6 rounded-full bg-red-500 text-white text-[11px] font-bold flex items-center justify-center border border-white">99</span>
                             </div>
                         </div>
                     </div>
 
-                    <div class="col-span-4 flex flex-col items-center justify-center text-center">
-                        <div class="text-[10px] uppercase font-bold text-gray-200 tracking-wider">@Lang.jackpot_prize</div>
-                        <div class="text-2xl font-black text-yellow-400 mt-0.5" style="text-shadow: 0 2px 4px rgba(0,0,0,0.3)">800.000<span class="text-xs font-normal text-white"> HTG</span></div>
-                        <div class="text-[9px] text-gray-200 mt-1 flex gap-1">@Lang.next_round <span class="font-bold text-white">05:00</span></div>
+                    <!-- Center: Jackpot info (4 columns) -->
+                    <div class="col-span-4 flex flex-col items-center justify-center text-center px-1">
+                        <div class="text-[10px] uppercase font-bold text-gray-200 mb-0.5 whitespace-nowrap opacity-90 leading-none">@Lang.jackpot_prize</div>
+                        <div class="flex items-start gap-0.5">
+                            <span class="text-[23px] font-black text-[#FBF3A7] leading-none" style="text-shadow: 0 4px 8px rgba(0,0,0,0.3)">800.000</span>
+                            <span class="text-[8px] font-bold text-white uppercase opacity-90 mt-1">HTG</span>
+                        </div>
+                        <div class="text-[10px] text-white/90 font-medium whitespace-nowrap mt-1">@Lang.next : <span class="font-black text-yellow-300 countdown-timer">00:00:00</span></div>
                     </div>
 
-                    <div class="col-span-3 flex flex-col items-center justify-end h-full pb-4 relative" >
-                        <!-- illustration3 is Red Car, absolute positioned overlay at the top edge of back section layout -->
-                        <img src="/LotteryV2/img/illustration3.png" alt="Car" class="absolute bottom-[44px] left-1/2 -translate-x-1/2 w-16 h-12 object-contain filter drop-shadow-md z-10">
-                        <button class="bg-gradient-to-b from-yellow-300 to-yellow-400 text-red-700 font-extrabold px-8 py-1.5 rounded-xl text-[10px] shadow-md hover:from-yellow-200 hover:to-yellow-300 relative z-0" disabled>@Lang.play</button>
+                    <!-- Right: Action Section (4 columns) -->
+                    <div class="col-span-4 flex flex-col items-center justify-end h-full pb-4 relative px-1">
+                        <img src="/LotteryV2/img/illustration3.png" alt="Car" class="absolute bottom-[40px] w-16 h-18 object-contain filter drop-shadow-lg z-10 orientation-flip">
+                        <button class="bg-gradient-to-b from-yellow-300 to-white text-black font-black px-2 w-full max-w-[110px] py-1.5 rounded-[12px] text-[13px] shadow-xl border border-white/50 group-hover:brightness-110 group-active:scale-95 transition-all relative z-0">@Lang.rule_play_now</button>
                     </div>
                 </div>
             </div>
@@ -128,7 +147,34 @@
 </div>
 <script>
     function changeGame() {
-            var termType = $("#MEGA_LOTO_ID").val();
-            location.href = subDomain + '@Url.Action("GameHome", "Home", new { area = "LotteryV2" })?termType=' + termType;
+        var termType = $("#MEGA_LOTO_ID").val();
+        location.href = subDomain + '@Url.Action("GameHome", "Home", new { area = "LotteryV2" })?termType=' + termType;
+    }
+
+    function startCountdown() {
+        const targetHour = 20; // 20:00 (8 PM)
+        const timers = document.querySelectorAll('.countdown-timer');
+        
+        function update() {
+            const now = new Date();
+            let target = new Date();
+            target.setHours(targetHour, 0, 0, 0);
+            
+            if (now >= target) {
+                target.setDate(target.getDate() + 1);
+            }
+            
+            const diff = target - now;
+            const h = Math.floor(diff / (1000 * 60 * 60));
+            const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+            const s = Math.floor((diff % (1000 * 60)) / 1000);
+            
+            const timeStr = `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
+            timers.forEach(t => t.innerText = timeStr);
         }
+        
+        update();
+        setInterval(update, 1000);
+    }
+    document.addEventListener('DOMContentLoaded', startCountdown);
 </script>

website/Areas/LotteryV2/Views/Home/Results.cshtml

@@ -5,6 +5,8 @@
     ViewData["ActiveTab"] = "Results";
 }
 @using LotteryWebApp.Languages;
+@using LotteryWebApp.Common;
+
 
 @section Styles {
     <script src="https://cdn.tailwindcss.com"></script>
@@ -18,7 +20,7 @@
 
 <div class="main-container results-container animate__animated animate__fadeIn pb-40 relative">
     <!-- Header Group: Fixed at Top -->
-    <div class="fixed top-0 left-1/2 -translate-x-1/2 w-full max-w-[414px] 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-[414px] z-[100] bg-[#F3F4F6] pb-2 shadow-md">
         <!-- Header: Matches Figma (Right Image) -->
         <div class="results-top-header">
             <a href="javascript:history.back()" class="back-btn">
@@ -46,6 +48,27 @@
             </div>
         </div>
 
+        <!-- Red Separator Line -->
+        <div class="px-4 mt-2 mb-2">
+            <div class="h-[2px] bg-gradient-to-r from-transparent via-[#EE0033] to-transparent rounded-full opacity-40"></div>
+        </div>
+
+        <!-- Game Selector Tabs: Centered -->
+        <div class="game-tabs-container px-4 pb-3 flex gap-2 justify-center">
+             <input type="hidden" id="currentTermType" value="@Model.termType" />
+             
+             <!-- Individual Games -->
+             <button onclick="switchGameTab('@Constants.PIC10_BASIC_CODE', this)" class="game-tab-btn @(Model.termType == Constants.PIC10_BASIC_CODE ? "active" : "")">
+                 @Lang.pick10
+             </button>
+            <button onclick="switchGameTab('@Constants.PIC10_BIGSMALL_CODE', this)" class="game-tab-btn @(Model.termType == Constants.PIC10_BIGSMALL_CODE ? "active" : "")">
+                 @Lang.bigsmall
+             </button>
+            <button onclick="switchGameTab('@Constants.PIC10_ODDEVEN_CODE', this)" class="game-tab-btn @(Model.termType == Constants.PIC10_ODDEVEN_CODE ? "active" : "")">
+                 @Lang.oddeven
+             </button>
+        </div>
+
         <!-- Column Headers (Time & Results) -->
         <div class="px-4 mt-2">
             <div class="flex gap-3">
@@ -59,8 +82,8 @@
         </div>
     </div>
 
-    <!-- Spacer to push content down below fixed header (~180px) -->
-    <div class="h-[180px]"></div>
+    <!-- Spacer to push content down below fixed header (~220px due to new tabs) -->
+    <div class="h-[220px]"></div>
 
     <!-- Result List Container -->
     <div id="results-list-container" class="results-items-list px-4 min-h-[300px]">
@@ -68,7 +91,7 @@
     </div>
 
     <!-- Bottom Promo Bar (Matches Bottom message with yellow text) -->
-    <div class="fixed bottom-[74px] left-1/2 -translate-x-1/2 w-full max-w-[414px] bg-[#EE0033] text-white py-2 text-center text-[12px] font-bold tracking-wide z-40 flex flex-col items-center justify-center overflow-hidden h-auto shadow-md">
+    <div class="fixed bottom-[74px] left-0 md:left-1/2 md:-translate-x-1/2 w-full md:max-w-[414px] bg-[#EE0033] text-white py-2 text-center text-[12px] 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>
@@ -87,16 +110,21 @@
     <script>
 
         function initBrandedFlatpickr(selector, yearStart, yearEnd) {
-            const container = document.querySelector(".results-container") || document.querySelector(".main-container");
+            const inputEl = document.querySelector(selector);
+            const wrapper = inputEl.closest('.date-pick-input');
+            
             flatpickr(selector, {
                 dateFormat: "Y-m-d", // Actual value used for search
                 altInput: true,
                 altFormat: "M d, Y", // Premium display format
                 altInputClass: "bg-transparent border-none outline-none font-bold text-[13px] w-full ml-1 cursor-pointer",
-                disableMobile: "true",
+                disableMobile: true,
                 monthSelectorType: "dropdown",
-                appendTo: container,
+                appendTo: wrapper,
                 onReady: function (selectedDates, dateStr, instance) {
+                    // Ensure calendar is visible above everything
+                    instance.calendarContainer.style.zIndex = "9999";
+                    
                     const yearInput = instance.calendarContainer.querySelector(".numInput.cur-year");
                     if (yearInput) {
                         const yearSelect = document.createElement("select");
@@ -135,7 +163,7 @@
         function triggerSearch() {
             const fromDate = document.getElementById("fromDate").value;
             const toDate = document.getElementById("toDate").value;
-            const termType = "@Model.termType";
+            const termType = document.getElementById("currentTermType").value;
             const btn = document.getElementById("btnSearch");
             const container = document.getElementById("results-list-container");
 
@@ -161,6 +189,19 @@
                 });
         }
 
+        function switchGameTab(termType, el) {
+            // Update hidden input
+            document.getElementById("currentTermType").value = termType;
+
+            // UI update: Active state
+            const tabs = document.querySelectorAll('.game-tab-btn');
+            tabs.forEach(t => t.classList.remove('active'));
+            el.classList.add('active');
+
+            // Trigger search with new game type
+            triggerSearch();
+        }
+
         function switchMainTab(type, el) {
             const btns = el.parentElement.querySelectorAll('.tab-btn');
             btns.forEach(b => {

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

@@ -14,10 +14,10 @@
 <!-- Add custom font Bricolage Grotesque to match Figma styling -->
 <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;700;800;900&display=swap" rel="stylesheet">
 
-<div class="main-container animate__animated animate__fadeIn min-h-screen relative flex flex-col pb-24 font-bricolage overflow-x-hidden" style="background-color: #F5F5F5 !important;">
+<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-1/2 -translate-x-1/2 w-full 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-[414px] z-[100] bg-white shadow-md">
         <!-- Header Block (Red) -->
         <div class="w-full bg-[#EE0033] h-[52px] flex items-center justify-between px-4 relative">
             <!-- Back Button -->
@@ -34,15 +34,15 @@
         <div class="w-full bg-white flex items-center justify-between px-2 pt-3 pb-1 relative shadow-sm transition-all border-b border-gray-100">
             <!-- Tab 1 -->
             <div class="flex flex-col items-center gap-1 cursor-pointer flex-1 group" onclick="switchFAQTab('basic')">
-                <span id="tab-basic-label" class="text-[13px] font-bold text-[#534A4A] transition-colors whitespace-nowrap">@Lang.rule_classic_pick_10</span>
+                <span id="tab-basic-label" class="text-[14px] font-bold text-[#534A4A] transition-colors whitespace-nowrap">@Lang.rule_classic_pick_10</span>
                 <div id="tab-basic-bar" class="w-full h-[3px] bg-[#EE0033] mt-1 drop-shadow-sm transition-all rounded-t-sm"></div>
             </div>
 
             <!-- Tab 2 -->
             <div class="flex flex-col items-center gap-1 cursor-pointer flex-1 group relative" onclick="switchFAQTab('smallbig')">
                 <div class="flex flex-col items-center leading-tight">
-                    <span id="tab-smallbig-label" class="text-[13px] font-bold text-[#909090] transition-colors whitespace-nowrap">@Lang.rule_big_small</span>
-                    <span id="tab-smallbig-desc" class="text-[9px] text-[#909090] font-normal whitespace-nowrap transition-colors">@Lang.rule_13_numbers_game</span>
+                    <span id="tab-smallbig-label" class="text-[14px] font-bold text-[#909090] transition-colors whitespace-nowrap">@Lang.rule_big_small</span>
+                    <span id="tab-smallbig-desc" class="text-[12px] text-[#909090] font-normal whitespace-nowrap transition-colors">@Lang.rule_13_numbers_game</span>
                 </div>
                 <div id="tab-smallbig-bar" class="w-full h-0.5 bg-transparent mt-1 transition-all"></div>
             </div>
@@ -50,8 +50,8 @@
             <!-- Tab 3 -->
             <div class="flex flex-col items-center gap-1 cursor-pointer flex-1 group" onclick="switchFAQTab('oddeven')">
                 <div class="flex flex-col items-center leading-tight">
-                    <span id="tab-oddeven-label" class="text-[13px] font-bold text-[#909090] transition-colors whitespace-nowrap">@Lang.rule_odd_even</span>
-                    <span id="tab-oddeven-desc" class="text-[9px] text-[#909090] font-normal whitespace-nowrap transition-colors">@Lang.rule_15_numbers_game</span>
+                    <span id="tab-oddeven-label" class="text-[14px] font-bold text-[#909090] transition-colors whitespace-nowrap">@Lang.rule_odd_even</span>
+                    <span id="tab-oddeven-desc" class="text-[12px] text-[#909090] font-normal whitespace-nowrap transition-colors">@Lang.rule_15_numbers_game</span>
                 </div>
                 <!-- Indicator Bar -->
                 <div id="tab-oddeven-bar" class="w-full h-0.5 bg-transparent mt-1 transition-all"></div>
@@ -59,447 +59,428 @@
         </div>
     </div>
 
-    <!-- Spacer to push content down below fixed header (~96px) -->
-    <div class="h-[96px]"></div>
-
-    <!-- Active Tab Content -->
-    <div id="tab-content-basic" class="w-full animate__animated animate__fadeIn pb-32">
+    <!-- Main Scrollable Area -->
+    <div class="flex-grow overflow-y-auto mt-[96px] pb-32 custom-scrollbar px-4" id="rule-scroll-container">
+        <div class="max-w-[380px] mx-auto"> <!-- Wrapper to shrink content width -->
+
+            <!-- Active Tab Content -->
+            <div id="tab-content-basic" class="w-full animate__animated animate__fadeIn">
+                
+                <div class="rule-header-red">@Lang.rule_general_info</div>
+                
+                <div class="rule-table-grid pb-2">
+                    <div class="font-[800]">@Lang.rule_item</div>
+                    <div class="font-[800]">@Lang.rule_regulation_draw</div>
+                    
+                    <div>@Lang.rule_time</div>
+                    <div>@Lang.rule_20_30_daily</div>
+                    
+                    <div>@Lang.rule_ticket_closure</div>
+                    <div>@Lang.rule_20_00_daily</div>
+                    
+                    <div>@Lang.rule_total_numbers</div>
+                    <div>@Lang.rule_01_80</div>
         
-        <div class="rule-header-red">@Lang.rule_general_info</div>
+                    <div>@Lang.rule_numbers_drawn</div>
+                    <div>@Lang.rule_20_per_draw</div>
         
-        <div class="rule-table-grid pb-2">
-            <div class="font-[800]">@Lang.rule_item</div>
-            <div class="font-[800]">@Lang.rule_regulation_draw</div>
-            
-            <div>@Lang.rule_time</div>
-            <div>@Lang.rule_20_30_daily</div>
-            
-            <div>@Lang.rule_ticket_closure</div>
-            <div>@Lang.rule_20_00_daily</div>
-            
-            <div>@Lang.rule_total_numbers</div>
-            <div>@Lang.rule_01_80</div>
-
-            <div>@Lang.rule_numbers_drawn</div>
-            <div>@Lang.rule_20_per_draw</div>
-
-            <div>@Lang.rule_purchase_channels</div>
-            <div>@Lang.rule_ussd_web_app</div>
-
-            <div>@Lang.rule_result_channel</div>
-            <div>@Lang.rule_web_app</div>
-
-            <div>@Lang.rule_duplicate_allowed</div>
-            <div>@Lang.rule_yes</div>
-
-            <div>@Lang.rule_identical_allowed</div>
-            <div>@Lang.rule_yes</div>
-        </div>
-
-        <div class="rule-header-red">@Lang.rule_game_1_title</div>
-
-        <!-- Card Mockup inside Rule -->
-        <div class="play-card bg-[#E11D48] card-red h-[90px] border border-white/20 relative mx-3 mt-4 mb-4" onclick="window.location.href='/LotteryV2/Home/GameHome'">
-            <div class="absolute -left-6 -top-6 w-20 h-20 bg-white/20 rounded-full blur-2xl"></div>
-            <div class="w-full h-full flex items-center justify-between pl-3 pr-2 relative z-10">
-                <div class="flex flex-col items-center justify-center pt-2">
-                    <span class="text-[14px] font-black italic text-white drop-shadow-md leading-[1.1] text-center" style="font-family: 'Montserrat', sans-serif;">@Html.Raw(Lang.rule_basic_pick)</span>
-                    <img src="/LotteryV2/img/ball_10.png" class="w-7 h-7 object-contain drop-shadow-md -mt-2 -mr-8 border-2 border-[#E11D48] rounded-full bg-[#E11D48]">
+                    <div>@Lang.rule_purchase_channels</div>
+                    <div>@Lang.rule_ussd_web_app</div>
+        
+                    <div>@Lang.rule_result_channel</div>
+                    <div>@Lang.rule_web_app</div>
+        
+                    <div>@Lang.rule_duplicate_allowed</div>
+                    <div>@Lang.rule_yes</div>
+        
+                    <div>@Lang.rule_identical_allowed</div>
+                    <div>@Lang.rule_yes</div>
                 </div>
-
-                <div class="flex flex-col items-center mt-0.5 ml-4">
-                    <span class="text-[10px] font-[800] text-white tracking-widest uppercase drop-shadow">@Lang.rule_jackpot_prize</span>
-                    <div class="flex items-start gap-1 mt-0.5">
-                        <span class="text-[28px] font-[900] text-white leading-none tracking-tight drop-shadow-md">100.000</span>
-                        <span class="text-[7px] font-[800] text-white bg-transparent border border-white/60 rounded px-[2px] mt-1 shadow-sm leading-tight">HTG</span>
+        
+                <div class="rule-header-red">@Lang.rule_game_1_title</div>
+        
+                <!-- Card Mockup inside Rule -->
+                <div class="play-card bg-[#E11D48] relative mx-3 mt-4 mb-4 h-[90px] rounded-2xl overflow-hidden border border-white/20 shadow-lg cursor-pointer transition-all active:scale-[0.98]" onclick="window.location.href='/LotteryV2/Home/GameHome'">
+                    <!-- 1. Design-accurate Staggered Ellipses -->
+                    <img src="/LotteryV2/img/decorations/ellipse_1183.png" class="absolute -left-[60px] -top-[100px] w-[180px] h-[180px] pointer-events-none z-10 mix-blend-screen opacity-90 scale-y-[-1]" alt="highlight">
+                    <img src="/LotteryV2/img/decorations/ellipse_1181.png" class="absolute -right-[50px] -top-[20px] w-[160px] h-[160px] pointer-events-none z-10 mix-blend-screen opacity-90" alt="highlight">
+
+                    <div class="w-full h-full flex items-center justify-between pl-3 pr-2 relative z-10">
+                        <div class="flex flex-col items-center justify-center pt-2">
+                            <span class="text-[14px] font-black italic text-white drop-shadow-md leading-[1.1] text-center" style="font-family: 'Montserrat', sans-serif;">@Html.Raw(Lang.rule_basic_pick)</span>
+                            <img src="/LotteryV2/img/ball_10.png" class="w-7 h-7 object-contain drop-shadow-md -mt-2 -mr-8 border-2 border-[#E11D48] rounded-full bg-[#E11D48]">
+                        </div>
+        
+                        <div class="flex flex-col items-center mt-0.5 ml-4">
+                            <span class="text-[10px] font-[800] text-white tracking-widest uppercase drop-shadow">@Lang.rule_jackpot_prize</span>
+                            <div class="flex items-start gap-1 mt-0.5">
+                                <span class="text-[28px] font-[900] text-white leading-none tracking-tight drop-shadow-md">100.000</span>
+                                <span class="text-[7px] font-[800] text-white bg-transparent border border-white/60 rounded px-[2px] mt-1 shadow-sm leading-tight">HTG</span>
+                            </div>
+                            <div class="text-[9px] text-white/90 mt-0.5">@Lang.rule_next_round <span class="font-[900] text-white ml-0.5 drop-shadow">05:00</span></div>
+                        </div>
+        
+                        <div class="flex flex-col items-center justify-center h-full py-2 w-[80px] gap-1">
+                            <img src="/LotteryV2/img/play_chest.png" class="h-[46px] w-auto object-contain drop-shadow-lg">
+                            <div class="w-full yellow-button text-center rounded-[10px] py-[4px] text-[10px] font-[900] px-2 z-20 active:scale-95 transition-transform text-[#212121] border-2 border-white shadow-lg" style="background: linear-gradient(180deg, #FFE95B 0%, #ECA600 100%);">@Lang.rule_play_now</div>
+                        </div>
                     </div>
-                    <div class="text-[9px] text-white/90 mt-0.5">@Lang.rule_next_round <span class="font-[900] text-white ml-0.5 drop-shadow">05:00</span></div>
                 </div>
-
-                <div class="flex flex-col items-end justify-between h-full py-2 w-[70px]">
-                    <img src="/LotteryV2/img/play_chest.png" class="h-[46px] w-[56px] object-contain drop-shadow-lg scale-125 origin-top-right mr-1 mt-1">
-                    <div class="w-full yellow-button text-center rounded-[8px] py-[3px] text-[10px] font-[900] px-2 z-20 active:scale-95 transition-transform mt-auto text-[#212121]" style="background: linear-gradient(180deg, #FFE95B 0%, #ECA600 100%);">@Lang.rule_play_now</div>
+        
+                <!-- @Lang.rule_how_to_play Section -->
+                <div class="rule-section-title">
+                    <span class="icon">&#9670;</span> @Lang.rule_how_to_play
                 </div>
-            </div>
-        </div>
-
-        <!-- @Lang.rule_how_to_play Section -->
-        <div class="rule-section-title">
-            <span class="icon">&#9670;</span> @Lang.rule_how_to_play
-        </div>
+                
+                <div class="rule-table-grid desc-grid pb-4">
+                    <div class="font-[800]">@Lang.rule_item</div>
+                    <div class="font-[800]">@Lang.rule_description</div>
+                    
+                    <div>@Lang.rule_ticket_price</div>
+                    <div>@Lang.rule_10_htg</div>
+                    
+                    <div>@Lang.rule_selection_method</div>
+                    <div>@Html.Raw(Lang.rule_choose_10)</div>
+                    
+                    <div>@Lang.rule_winning_rule</div>
+                    <div>@Html.Raw(Lang.rule_10_taken_from)</div>
+                    
+                    <div>Drawn numbers as the<br>official</div>
+                    <div></div>
         
-        <div class="rule-table-grid desc-grid pb-4">
-            <div class="font-[800]">@Lang.rule_item</div>
-            <div class="font-[800]">@Lang.rule_description</div>
-            
-            <div>@Lang.rule_ticket_price</div>
-            <div>@Lang.rule_10_htg</div>
-            
-            <div>@Lang.rule_selection_method</div>
-            <div>@Html.Raw(Lang.rule_choose_10)</div>
-            
-            <div>@Lang.rule_winning_rule</div>
-            <div>@Html.Raw(Lang.rule_10_taken_from)</div>
-            
-            <div>Drawn numbers as the<br>official</div>
-            <div></div>
-
-            <div>@Lang.rule_objective</div>
-            <div>@Lang.rule_match_as_many</div>
-        </div>
-
-        <!-- @Lang.rule_jackpot_rule Section -->
-        <div class="rule-section-title mt-2">
-            <span class="icon">&#9670;</span> @Lang.rule_jackpot_rule
-        </div>
-
-        <div class="flex justify-center mt-4 mb-4">
-             <img src="/LotteryV2/img/play_chest.png" class="h-[120px] object-contain drop-shadow-xl" alt="Chest" />
-        </div>
-
-        <div class="text-[11px] font-semibold text-[#212121] px-3 mb-3">@Html.Raw(Lang.rule_match_all_10)</div>
-        
-        <div class="px-3 flex flex-wrap gap-2 mb-4 justify-start">
-            <div class="ball-green">1</div>
-            <div class="ball-green">4</div>
-            <div class="ball-green">5</div>
-            <div class="ball-green">12</div>
-            <div class="ball-green">24</div>
-            <div class="ball-green">28</div>
-            <div class="ball-green">30</div>
-            <div class="ball-green">37</div>
-            <div class="ball-green">46</div>
-            <div class="ball-green">49</div>
-        </div>
-
-        <div class="rule-table-grid pb-2">
-            <div class="font-[800]">@Lang.rule_condition</div>
-            <div class="font-[800]">@Lang.rule_prize_pool</div>
-            
-            <div>@Html.Raw(Lang.rule_if_le_10)</div>
-            <div>@Html.Raw(Lang.rule_each_receives)</div>
-            
-            <div class="mt-2">@Html.Raw(Lang.rule_if_gt_10)</div>
-            <div class="mt-2">@Html.Raw(Lang.rule_shared_equally)</div>
-        </div>
-
-        <!-- @Lang.rule_standard_prize -->
-        <div class="rule-section-title mt-4">
-            <span class="icon">&#9670;</span> @Lang.rule_standard_prize
-        </div>
-
-        <div class="rule-table-grid pb-2">
-            <div class="font-[800]">@Lang.rule_numbers_matches</div>
-            <div class="font-[800]">@Lang.rule_prize_pool_htg</div>
-            
-            <div>9</div>
-            <div>@Html.Raw(Lang.rule_prize_12k)</div>
-            
-            <div>8</div>
-            <div>@Html.Raw(Lang.rule_prize_600)</div>
-            
-            <div>7</div>
-            <div>@Html.Raw(Lang.rule_prize_160)</div>
-            
-            <div>6</div>
-            <div>@Html.Raw(Lang.rule_prize_20)</div>
-            
-            <div>5</div>
-            <div>@Html.Raw(Lang.rule_prize_5)</div>
-        </div>
-
-        <!-- @Lang.rule_sales_cutoff -->
-        <div class="rule-section-title mt-4 mb-2">
-            <span class="text-[14px]">&#8986;</span> @Lang.rule_sales_cutoff
-        </div>
+                    <div>@Lang.rule_objective</div>
+                    <div>@Lang.rule_match_as_many</div>
+                </div>
         
-        <div class="px-3 text-[11px] text-[#212121] leading-relaxed mb-2">
-            @Html.Raw(Lang.rule_sales_close)<br>
-            @Lang.rule_if_making_payment
-        </div>
+                <!-- @Lang.rule_jackpot_rule Section -->
+                <div class="rule-section-title mt-2">
+                    <span class="icon">&#9670;</span> @Lang.rule_jackpot_rule
+                </div>
         
-        <ul class="bullet-list pb-8">
-            <li>@Lang.rule_payment_shortly</li>
-            <li>@Lang.rule_payment_later</li>
-            <li>@Lang.rule_system_time</li>
-        </ul>
-
-    </div>
-
-    <!-- Active Tab Content: Big / Small -->
-    <div id="tab-content-smallbig" class="w-full animate__animated animate__fadeIn pb-32 hidden">
-        <div class="rule-header-red" style="background-color: #0BA01A;">@Html.Raw(Lang.rule_bs_winning_rule)</div>
-
-        <div class="rule-section-title mt-2">
-            <span class="icon">&#9670;</span> @Lang.rule_how_to_win
-        </div>
-        <ul class="bullet-list mb-4">
-            <li>@Lang.rule_buy_big_small</li>
-            <li>@Lang.rule_system_check_20</li>
-        </ul>
-
-        <!-- Big/Small Play Card Mockup -->
-        <div class="play-card bg-[#16A34A] h-[90px] border border-white/20 relative mx-3 mt-4 mb-4" onclick="window.location.href='/LotteryV2/Home/GameHome'">
-            <div class="absolute -left-6 -top-6 w-20 h-20 bg-white/20 rounded-full blur-2xl"></div>
-            <div class="w-full h-full flex items-center justify-between pl-3 pr-2 relative z-10">
-                <div class="flex flex-col items-center justify-center">
-                    <img src="/LotteryV2/img/small_big_logo.png" class="h-12 object-contain drop-shadow-md -mt-1" alt="Small Big Logo">
+                <div class="flex justify-center mt-4 mb-4">
+                     <img src="/LotteryV2/img/play_chest.png" class="h-[120px] object-contain drop-shadow-xl" alt="Chest" />
                 </div>
-
-                <div class="flex flex-col items-center mt-0.5 ml-2">
-                    <span class="text-[10px] font-bold text-white tracking-widest uppercase drop-shadow">@Lang.rule_bs_prize</span>
-                    <div class="flex items-start gap-1 mt-0.5">
-                        <span class="text-[28px] font-[900] text-white leading-none tracking-tight drop-shadow-md">100</span>
-                        <span class="text-[7px] font-[800] text-white bg-transparent border border-white/60 rounded px-[2px] mt-1 shadow-sm leading-tight">HTG</span>
-                    </div>
-                    <div class="text-[9px] text-white/90 mt-0.5">@Lang.rule_next_round <span class="font-[900] text-white ml-0.5 drop-shadow">05:00</span></div>
+        
+                <div class="text-[11px] font-semibold text-[#212121] px-3 mb-3">@Html.Raw(Lang.rule_match_all_10)</div>
+                
+                <div class="px-3 flex flex-wrap gap-2 mb-4 justify-start">
+                    <div class="ball-green">1</div>
+                    <div class="ball-green">4</div>
+                    <div class="ball-green">5</div>
+                    <div class="ball-green">12</div>
+                    <div class="ball-green">24</div>
+                    <div class="ball-green">28</div>
+                    <div class="ball-green">30</div>
+                    <div class="ball-green">37</div>
+                    <div class="ball-green">46</div>
+                    <div class="ball-green">49</div>
                 </div>
-
-                <div class="flex flex-col items-end justify-between h-full py-2 w-[70px]">
-                    <img src="/LotteryV2/img/money_bag_small.png" class="h-[46px] w-[56px] object-contain drop-shadow-lg scale-125 origin-top-right mr-1 mt-1">
-                    <div class="w-full yellow-button text-center rounded-[8px] py-[3px] text-[10px] font-[900] px-2 z-20 active:scale-95 transition-transform mt-auto text-[#212121]" style="background: linear-gradient(180deg, #FFE95B 0%, #ECA600 100%);">@Lang.rule_play_now</div>
+        
+                <div class="rule-table-grid pb-2">
+                    <div class="font-[800]">@Lang.rule_condition</div>
+                    <div class="font-[800]">@Lang.rule_prize_pool</div>
+                    
+                    <div>@Html.Raw(Lang.rule_if_le_10)</div>
+                    <div>@Html.Raw(Lang.rule_each_receives)</div>
+                    
+                    <div class="mt-2">@Html.Raw(Lang.rule_if_gt_10)</div>
+                    <div class="mt-2">@Html.Raw(Lang.rule_shared_equally)</div>
                 </div>
+        
+                <!-- @Lang.rule_standard_prize -->
+                <div class="rule-section-title mt-4">
+                    <span class="icon">&#9670;</span> @Lang.rule_standard_prize
+                </div>
+        
+                <div class="rule-table-grid pb-2">
+                    <div class="font-[800]">@Lang.rule_numbers_matches</div>
+                    <div class="font-[800]">@Lang.rule_prize_pool_htg</div>
+                    
+                    <div>9</div>
+                    <div>@Html.Raw(Lang.rule_prize_12k)</div>
+                    
+                    <div>8</div>
+                    <div>@Html.Raw(Lang.rule_prize_600)</div>
+                    
+                    <div>7</div>
+                    <div>@Html.Raw(Lang.rule_prize_160)</div>
+                    
+                    <div>6</div>
+                    <div>@Html.Raw(Lang.rule_prize_20)</div>
+                    
+                    <div>5</div>
+                    <div>@Html.Raw(Lang.rule_prize_5)</div>
+                </div>
+        
             </div>
-        </div>
-
-        <div class="rule-section-title mt-4">
-            <span class="icon">&#9670;</span> @Lang.rule_if_purchased_big
-        </div>
-
-        <div class="flex px-3 gap-3 mb-4 items-center">
-            <div class="w-[45%] bg-[#FCFDE1] rounded-2xl p-3 flex flex-col items-center shadow-sm border border-[#E0E2C8]">
-                <img src="/LotteryV2/img/big_text.png" class="h-8 object-contain mb-1" alt="Big">
-                <div class="text-[8px] text-[#212121] font-bold mb-2">@Html.Raw(Lang.rule_13_from_41_80)</div>
-                <div class="flex items-center justify-center -space-x-1 mb-2">
-                    <div class="w-7 h-7 rounded-full bg-gradient-to-br from-[#4facfe] to-[#00f2fe] flex items-center justify-center text-[11px] font-[900] text-[#1e3c72] shadow-sm z-10 border border-white/50">42</div>
-                    <div class="w-9 h-9 rounded-full bg-[radial-gradient(circle_at_30%_30%,#a8ff78,#78ffd6)] flex items-center justify-center text-[15px] font-[900] text-[#1e3c72] shadow-md z-20 border-2 border-white/80 -mt-1">88</div>
-                    <div class="w-7 h-7 rounded-full bg-gradient-to-br from-[#00c6ff] to-[#0072ff] flex items-center justify-center text-[11px] font-[900] text-[#1e3c72] shadow-sm z-10 border border-white/50">54</div>
-                </div>
-                <button class="w-full bg-[#0BA01A] text-white py-[6px] rounded-[8px] text-[12px] font-bold shadow-md active:scale-95 transition-transform">@Lang.rule_selected</button>
-            </div>
-            <div class="w-[55%] pl-1">
-                <ul class="bullet-list mb-3 pr-0">
-                    <li class="mb-1 leading-snug">@Html.Raw(Lang.rule_if_13_41_80)</li>
+        
+            <!-- Active Tab Content: Big / Small -->
+            <div id="tab-content-smallbig" class="w-full animate__animated animate__fadeIn hidden">
+                <div class="rule-header-red" style="background-color: #0BA01A;">@Html.Raw(Lang.rule_bs_winning_rule)</div>
+        
+                <div class="rule-section-title mt-2">
+                    <span class="icon">&#9670;</span> @Lang.rule_how_to_win
+                </div>
+                <ul class="bullet-list mb-4">
+                    <li>@Lang.rule_buy_big_small</li>
+                    <li>@Lang.rule_system_check_20</li>
                 </ul>
-                <div class="font-[800] text-[#212121] flex items-center gap-1 text-[13px] ml-2">
-                    <span class="text-blue-500 text-[18px]">&#10145;</span> &#127942; @Lang.rule_you_win
+        
+                <!-- Big/Small Play Card Mockup -->
+                <div class="play-card bg-[#0A9800] relative mx-3 mt-4 mb-4 h-[90px] rounded-2xl overflow-hidden border border-white/20 shadow-lg cursor-pointer transition-all active:scale-[0.98]" onclick="window.location.href='/LotteryV2/Home/GameHome'">
+                    <!-- 1. Design-accurate Staggered Ellipses -->
+                    <img src="/LotteryV2/img/decorations/ellipse_1183.png" class="absolute -left-[60px] -top-[100px] w-[180px] h-[180px] pointer-events-none z-10 mix-blend-screen opacity-80 scale-y-[-1]" alt="highlight">
+                    <img src="/LotteryV2/img/decorations/ellipse_1181.png" class="absolute -right-[50px] -top-[20px] w-[160px] h-[160px] pointer-events-none z-10 mix-blend-screen opacity-80" alt="highlight">
+
+                    <div class="w-full h-full flex items-center justify-between pl-3 pr-2 relative z-10">
+                        <div class="flex flex-col items-center justify-center">
+                            <img src="/LotteryV2/img/small_big_logo.png" class="h-12 object-contain drop-shadow-md -mt-1" alt="Small Big Logo">
+                        </div>
+        
+                        <div class="flex flex-col items-center mt-0.5 ml-2">
+                            <span class="text-[10px] font-bold text-white tracking-widest uppercase drop-shadow">@Lang.rule_bs_prize</span>
+                            <div class="flex items-start gap-1 mt-0.5">
+                                <span class="text-[28px] font-[900] text-white leading-none tracking-tight drop-shadow-md">100</span>
+                                <span class="text-[7px] font-[800] text-white bg-transparent border border-white/60 rounded px-[2px] mt-1 shadow-sm leading-tight">HTG</span>
+                            </div>
+                            <div class="text-[9px] text-white/90 mt-0.5">@Lang.rule_next_round <span class="font-[900] text-white ml-0.5 drop-shadow">05:00</span></div>
+                        </div>
+        
+                        <div class="flex flex-col items-center justify-center h-full py-2 w-[80px] gap-1">
+                            <img src="/LotteryV2/img/money_bag_small.png" class="h-[46px] w-auto object-contain drop-shadow-lg">
+                            <div class="w-full yellow-button text-center rounded-[10px] py-[4px] text-[10px] font-[900] px-2 z-20 active:scale-95 transition-transform text-[#212121] border-2 border-white shadow-lg" style="background: linear-gradient(180deg, #FFE95B 0%, #ECA600 100%);">@Lang.rule_play_now</div>
+                        </div>
+                    </div>
                 </div>
-            </div>
-        </div>
-
-        <div class="rule-section-title">
-            <span class="icon">&#9670;</span> @Lang.rule_if_purchased_small
-        </div>
-
-        <div class="flex px-3 gap-3 mb-4 items-center">
-            <div class="w-[45%] bg-[#FDF4E1] rounded-2xl p-3 flex flex-col items-center shadow-sm border border-[#E8DFC9]">
-                <img src="/LotteryV2/img/small_text.png" class="h-6 object-contain mb-2 mt-1" alt="Small">
-                <div class="text-[8px] text-[#212121] font-bold mb-2">@Html.Raw(Lang.rule_13_from_01_40)</div>
-                <div class="flex items-center justify-center -space-x-1 mb-2">
-                    <div class="w-7 h-7 rounded-full bg-[radial-gradient(circle_at_30%_30%,#f6d365,#fda085)] flex items-center justify-center text-[11px] font-[900] text-[#713101] shadow-sm z-10 border border-white/50">5</div>
-                    <div class="w-9 h-9 rounded-full bg-[radial-gradient(circle_at_30%_30%,#fdfbfb,#ebedee)] flex items-center justify-center text-[15px] font-[900] text-[#1e3c72] shadow-md z-20 border-2 border-[#ECA600]/40 -mt-1">1</div>
-                    <div class="w-7 h-7 rounded-full bg-gradient-to-br from-[#8e9eab] to-[#eef2f3] flex items-center justify-center text-[11px] font-[900] text-[#1e3c72] shadow-sm z-10 border border-white/50">8</div>
-                </div>
-                <button class="w-full bg-[#0BA01A] text-white py-[6px] rounded-[8px] text-[12px] font-bold shadow-md active:scale-95 transition-transform">@Lang.rule_select</button>
-            </div>
-            <div class="w-[55%] pl-1">
-                <ul class="bullet-list mb-3 pr-0">
-                    <li class="mb-1 leading-snug">@Html.Raw(Lang.rule_if_13_01_40)</li>
+        
+                <div class="rule-section-title mt-4">
+                    <span class="icon">&#9670;</span> @Lang.rule_if_purchased_big
+                </div>
+        
+                <div class="flex px-3 gap-3 mb-4 items-center">
+                    <div class="w-[45%] bg-[#FCFDE1] rounded-2xl p-3 flex flex-col items-center shadow-sm border border-[#E0E2C8]">
+                        <img src="/LotteryV2/img/big_text.png" class="h-8 object-contain mb-1" alt="Big">
+                        <div class="text-[8px] text-[#212121] font-bold mb-2">@Html.Raw(Lang.rule_13_from_41_80)</div>
+                        <div class="flex items-center justify-center -space-x-1 mb-2">
+                            <div class="w-7 h-7 rounded-full bg-gradient-to-br from-[#4facfe] to-[#00f2fe] flex items-center justify-center text-[11px] font-[900] text-[#1e3c72] shadow-sm z-10 border border-white/50">42</div>
+                            <div class="w-9 h-9 rounded-full bg-[radial-gradient(circle_at_30%_30%,#a8ff78,#78ffd6)] flex items-center justify-center text-[15px] font-[900] text-[#1e3c72] shadow-md z-20 border-2 border-white/80 -mt-1">88</div>
+                            <div class="w-7 h-7 rounded-full bg-gradient-to-br from-[#00c6ff] to-[#0072ff] flex items-center justify-center text-[11px] font-[900] text-[#1e3c72] shadow-sm z-10 border border-white/50">54</div>
+                        </div>
+                        <button class="w-full bg-[#0BA01A] text-white py-[6px] rounded-[8px] text-[12px] font-bold shadow-md active:scale-95 transition-transform">@Lang.rule_selected</button>
+                    </div>
+                    <div class="w-[55%] pl-1">
+                        <ul class="bullet-list mb-3 pr-0">
+                            <li class="mb-1 leading-snug">@Html.Raw(Lang.rule_if_13_41_80)</li>
+                        </ul>
+                        <div class="font-[800] text-[#212121] flex items-center gap-1 text-[13px] ml-2">
+                            <span class="text-blue-500 text-[18px]">&#10145;</span> &#127942; @Lang.rule_you_win
+                        </div>
+                    </div>
+                </div>
+        
+                <div class="rule-section-title">
+                    <span class="icon">&#9670;</span> @Lang.rule_if_purchased_small
+                </div>
+        
+                <div class="flex px-3 gap-3 mb-4 items-center">
+                    <div class="w-[45%] bg-[#FDF4E1] rounded-2xl p-3 flex flex-col items-center shadow-sm border border-[#E8DFC9]">
+                        <img src="/LotteryV2/img/small_text.png" class="h-6 object-contain mb-2 mt-1" alt="Small">
+                        <div class="text-[8px] text-[#212121] font-bold mb-2">@Html.Raw(Lang.rule_13_from_01_40)</div>
+                        <div class="flex items-center justify-center -space-x-1 mb-2">
+                            <div class="w-7 h-7 rounded-full bg-[radial-gradient(circle_at_30%_30%,#f6d365,#fda085)] flex items-center justify-center text-[11px] font-[900] text-[#713101] shadow-sm z-10 border border-white/50">5</div>
+                            <div class="w-9 h-9 rounded-full bg-[radial-gradient(circle_at_30%_30%,#fdfbfb,#ebedee)] flex items-center justify-center text-[15px] font-[900] text-[#1e3c72] shadow-md z-20 border-2 border-[#ECA600]/40 -mt-1">1</div>
+                            <div class="w-7 h-7 rounded-full bg-gradient-to-br from-[#8e9eab] to-[#eef2f3] flex items-center justify-center text-[11px] font-[900] text-[#1e3c72] shadow-sm z-10 border border-white/50">8</div>
+                        </div>
+                        <button class="w-full bg-[#0BA01A] text-white py-[6px] rounded-[8px] text-[12px] font-bold shadow-md active:scale-95 transition-transform">@Lang.rule_select</button>
+                    </div>
+                    <div class="w-[55%] pl-1">
+                        <ul class="bullet-list mb-3 pr-0">
+                            <li class="mb-1 leading-snug">@Html.Raw(Lang.rule_if_13_01_40)</li>
+                        </ul>
+                        <div class="font-[800] text-[#212121] flex items-center gap-1 text-[13px] ml-2">
+                            <span class="text-blue-500 text-[18px]">&#10145;</span> &#127942; @Lang.rule_you_win
+                        </div>
+                    </div>
+                </div>
+        
+                <div class="rule-section-title">
+                    <span class="icon">&#9670;</span> @Lang.rule_example
+                </div>
+                <div class="px-3 text-[11px] text-[#212121] leading-relaxed mb-2">
+                    @Lang.rule_if_20_drawn_contain
+                </div>
+                <ul class="bullet-list mb-4">
+                    <li>@Html.Raw(Lang.rule_13_or_more_41_80)</li>
+                    <li>@Html.Raw(Lang.rule_13_or_more_01_40)</li>
                 </ul>
-                <div class="font-[800] text-[#212121] flex items-center gap-1 text-[13px] ml-2">
-                    <span class="text-blue-500 text-[18px]">&#10145;</span> &#127942; @Lang.rule_you_win
+        
+                <div class="rule-header-red" style="background-color: #0BA01A;">@Lang.rule_prize_pool_title</div>
+                
+                <div class="flex flex-col items-center justify-center mt-2 mb-4">
+                    <img src="/LotteryV2/img/money_bag_large.png" class="h-[140px] object-contain drop-shadow-xl z-20" alt="Prize">
+                    <div class="text-[34px] font-[900] text-[#FFE95B] drop-shadow-md z-30 -mt-6" style="-webkit-text-stroke: 1px #ECA600; text-shadow: 2px 2px 0px rgba(0,0,0,0.2);">100 HTG</div>
                 </div>
+        
+                <ul class="bullet-list mb-6">
+                    <li>@Lang.rule_win_receive_2x</li>
+                    <li>@Html.Raw(Lang.rule_example_bet_50)</li>
+                </ul>
+        
             </div>
-        </div>
-
-        <div class="rule-section-title">
-            <span class="icon">&#9670;</span> @Lang.rule_example
-        </div>
-        <div class="px-3 text-[11px] text-[#212121] leading-relaxed mb-2">
-            @Lang.rule_if_20_drawn_contain
-        </div>
-        <ul class="bullet-list mb-4">
-            <li>@Html.Raw(Lang.rule_13_or_more_41_80)</li>
-            <li>@Html.Raw(Lang.rule_13_or_more_01_40)</li>
-        </ul>
-
-        <div class="rule-header-red" style="background-color: #0BA01A;">@Lang.rule_prize_pool_title</div>
         
-        <div class="flex flex-col items-center justify-center mt-2 mb-4">
-            <img src="/LotteryV2/img/money_bag_large.png" class="h-[140px] object-contain drop-shadow-xl z-20" alt="Prize">
-            <div class="text-[34px] font-[900] text-[#FFE95B] drop-shadow-md z-30 -mt-6" style="-webkit-text-stroke: 1px #ECA600; text-shadow: 2px 2px 0px rgba(0,0,0,0.2);">100 HTG</div>
-        </div>
-
-        <ul class="bullet-list mb-6">
-            <li>@Lang.rule_win_receive_2x</li>
-            <li>@Html.Raw(Lang.rule_example_bet_50)</li>
-        </ul>
-
-        <!-- @Lang.rule_sales_cutoff -->
-        <div class="rule-section-title mb-2">
-            <span class="text-[14px]">&#8986;</span> @Lang.rule_sales_cutoff
-        </div>
+            <!-- Active Tab Content: Odd / Even -->
+            <div id="tab-content-oddeven" class="w-full animate__animated animate__fadeIn hidden">
+                <div class="rule-header-red" style="background-color: #A236C8;">@Html.Raw(Lang.rule_oe_winning_rule)</div>
         
-        <div class="px-3 text-[11px] text-[#212121] leading-relaxed mb-2">
-            @Html.Raw(Lang.rule_sales_close)<br>
-            @Lang.rule_if_making_payment
-        </div>
+                <div class="rule-section-title mt-2">
+                    <span class="icon">&#9670;</span> @Lang.rule_how_result_determined
+                </div>
+                <ul class="bullet-list mb-4">
+                    <li>@Lang.rule_system_draws_20_01_80</li>
+                    <li>@Lang.v2_rule_drawn_count_desc
+                        <ul class="list-disc pl-5 mt-1 text-[#212121]">
+                            <li>@Lang.rule_odd_numbers</li>
+                            <li>@Lang.rule_even_numbers</li>
+                        </ul>
+                    </li>
+                </ul>
         
-        <ul class="bullet-list">
-            <li>@Lang.rule_payment_shortly</li>
-            <li>@Lang.rule_payment_later</li>
-            <li>@Lang.rule_system_time</li>
-        </ul>
-    </div>
-
-    <!-- Active Tab Content: Odd / Even -->
-    <div id="tab-content-oddeven" class="w-full animate__animated animate__fadeIn pb-32 hidden">
-        <div class="rule-header-red" style="background-color: #A236C8;">@Html.Raw(Lang.rule_oe_winning_rule)</div>
-
-        <div class="rule-section-title mt-2">
-            <span class="icon">&#9670;</span> @Lang.rule_how_result_determined
-        </div>
-        <ul class="bullet-list mb-4">
-            <li>@Lang.rule_system_draws_20_01_80</li>
-            <li>@Lang.v2_rule_drawn_count_desc
-                <ul class="list-disc pl-5 mt-1 text-[#212121]">
-                    <li>@Lang.rule_odd_numbers</li>
-                    <li>@Lang.rule_even_numbers</li>
+                <!-- Odd/Even Play Card Mockup -->
+                <div class="play-card bg-[#A236C8] relative mx-3 mt-4 mb-4 h-[90px] rounded-2xl overflow-hidden border border-white/20 shadow-lg cursor-pointer transition-all active:scale-[0.98]" onclick="window.location.href='/LotteryV2/Home/GameHome'">
+                    <!-- 1. Design-accurate Staggered Ellipses -->
+                    <img src="/LotteryV2/img/decorations/ellipse_1183.png" class="absolute -left-[60px] -top-[100px] w-[180px] h-[180px] pointer-events-none z-10 mix-blend-screen opacity-80 scale-y-[-1]" alt="highlight">
+                    <img src="/LotteryV2/img/decorations/ellipse_1181.png" class="absolute -right-[50px] -top-[20px] w-[160px] h-[160px] pointer-events-none z-10 mix-blend-screen opacity-80" alt="highlight">
+
+                    <div class="w-full h-full flex items-center justify-between pl-3 pr-2 relative z-10">
+                        <div class="flex flex-col items-center justify-center">
+                            <img src="/LotteryV2/img/odd_even_logo.png" class="h-14 object-contain drop-shadow-md -mt-1 ml-1" alt="Odd Even Logo">
+                        </div>
+        
+                        <div class="flex flex-col items-center mt-0.5 ml-2">
+                            <span class="text-[10px] font-bold text-white tracking-widest uppercase drop-shadow">@Lang.rule_oe_prize</span>
+                            <div class="flex items-start gap-1 mt-0.5">
+                                <span class="text-[28px] font-[900] text-white leading-none tracking-tight drop-shadow-md">200</span>
+                                <span class="text-[7px] font-[800] text-white bg-transparent border border-white/60 rounded px-[2px] mt-1 shadow-sm leading-tight">HTG</span>
+                            </div>
+                            <div class="text-[9px] text-white/90 mt-0.5">@Lang.rule_next_round <span class="font-[900] text-white ml-0.5 drop-shadow">05:00</span></div>
+                        </div>
+        
+                        <div class="flex flex-col items-center justify-center h-full py-2 w-[80px] gap-1">
+                            <img src="/LotteryV2/img/wallet_small.png" class="h-[46px] w-auto object-contain drop-shadow-lg">
+                            <div class="w-full yellow-button text-center rounded-[10px] py-[4px] text-[10px] font-[900] px-2 z-20 active:scale-95 transition-transform text-[#212121] border-2 border-white shadow-lg" style="background: linear-gradient(180deg, #FFE95B 0%, #ECA600 100%);">@Lang.rule_play_now</div>
+                        </div>
+                    </div>
+                </div>
+        
+                <div class="rule-section-title mt-4">
+                    <span class="icon">&#9670;</span> @Lang.rule_winning_condition
+                </div>
+                <ul class="bullet-list mb-4">
+                    <li class="mb-2">@Html.Raw(Lang.rule_if_15_odd_result_odd)</li>
+                    <li>@Html.Raw(Lang.rule_if_15_even_result_even)</li>
                 </ul>
-            </li>
-        </ul>
-
-        <!-- Odd/Even Play Card Mockup -->
-        <div class="play-card bg-[#A236C8] h-[90px] border border-white/20 relative mx-3 mt-4 mb-4" onclick="window.location.href='/LotteryV2/Home/GameHome'">
-            <div class="absolute -left-6 -top-6 w-20 h-20 bg-white/20 rounded-full blur-2xl"></div>
-            <div class="w-full h-full flex items-center justify-between pl-3 pr-2 relative z-10">
-                <div class="flex flex-col items-center justify-center">
-                    <img src="/LotteryV2/img/odd_even_logo.png" class="h-14 object-contain drop-shadow-md -mt-1 ml-1" alt="Odd Even Logo">
+        
+                <div class="rule-header-red" style="background-color: #A236C8;">@Lang.rule_how_ticket_wins</div>
+        
+                <div class="rule-section-title mt-3">
+                    <span class="icon">&#9670;</span> @Lang.rule_if_purchased_odd
                 </div>
-
-                <div class="flex flex-col items-center mt-0.5 ml-2">
-                    <span class="text-[10px] font-bold text-white tracking-widest uppercase drop-shadow">@Lang.rule_oe_prize</span>
-                    <div class="flex items-start gap-1 mt-0.5">
-                        <span class="text-[28px] font-[900] text-white leading-none tracking-tight drop-shadow-md">200</span>
-                        <span class="text-[7px] font-[800] text-white bg-transparent border border-white/60 rounded px-[2px] mt-1 shadow-sm leading-tight">HTG</span>
+        
+                <div class="flex px-3 gap-3 mb-4 items-center">
+                    <div class="w-[45%] bg-[#FEFCE8] rounded-2xl p-3 flex flex-col items-center shadow-sm border-2 border-[#A236C8]/40">
+                        <img src="/LotteryV2/img/odd_text.png" class="h-8 object-contain mb-1" alt="Odd">
+                        <div class="text-[8px] text-[#212121] mb-2">@Html.Raw(Lang.rule_odd_numbers_13579)</div>
+                        <div class="flex items-center justify-center -space-x-1 mb-2 mt-1">
+                            <div class="w-7 h-7 rounded-full bg-gradient-to-br from-[#ff6a00] to-[#ee0979] flex items-center justify-center text-[11px] font-[900] text-[#4a0000] shadow-sm z-10 border border-white/50">3</div>
+                            <div class="w-9 h-9 rounded-full bg-[radial-gradient(circle_at_30%_30%,#fdfbfb,#ebedee)] flex items-center justify-center text-[15px] font-[900] text-[#1e3c72] shadow-md z-20 border-2 border-[#ECA600]/40 -mt-1">1</div>
+                            <div class="w-7 h-7 rounded-full bg-gradient-to-br from-[#00c6ff] to-[#0072ff] flex items-center justify-center text-[11px] font-[900] text-[#1e3c72] shadow-sm z-10 border border-white/50">19</div>
+                        </div>
+                        <button class="w-full bg-[#A236C8] text-white py-[6px] rounded-[8px] text-[12px] font-bold shadow-md active:scale-95 transition-transform mt-1">@Lang.rule_select</button>
+                    </div>
+                    <div class="w-[55%] pl-1">
+                        <ul class="bullet-list mb-3 pr-0">
+                            <li class="mb-1 leading-snug">@Html.Raw(Lang.rule_if_20_contain_15_odd)</li>
+                        </ul>
+                        <div class="font-[800] text-[#212121] flex items-center gap-1 text-[13px] ml-2 mt-1">
+                            <span class="text-blue-500 text-[18px]">&#10145;</span> &#127942; @Lang.rule_you_win
+                        </div>
                     </div>
-                    <div class="text-[9px] text-white/90 mt-0.5">@Lang.rule_next_round <span class="font-[900] text-white ml-0.5 drop-shadow">05:00</span></div>
                 </div>
-
-                <div class="flex flex-col items-end justify-between h-full py-2 w-[70px]">
-                    <img src="/LotteryV2/img/wallet_small.png" class="h-[46px] w-[56px] object-contain drop-shadow-lg scale-[1.3] origin-top-right mr-1 mt-[2px]">
-                    <div class="w-full yellow-button text-center rounded-[8px] py-[3px] text-[10px] font-[900] px-2 z-20 active:scale-95 transition-transform mt-auto text-[#212121]" style="background: linear-gradient(180deg, #FFE95B 0%, #ECA600 100%);">@Lang.rule_play_now</div>
+        
+                <div class="rule-section-title">
+                    <span class="icon">&#9670;</span> @Lang.rule_if_purchased_even
                 </div>
-            </div>
-        </div>
-
-        <div class="rule-section-title mt-4">
-            <span class="icon">&#9670;</span> @Lang.rule_winning_condition
-        </div>
-        <ul class="bullet-list mb-4">
-            <li class="mb-2">@Html.Raw(Lang.rule_if_15_odd_result_odd)</li>
-            <li>@Html.Raw(Lang.rule_if_15_even_result_even)</li>
-        </ul>
-
-        <div class="rule-header-red" style="background-color: #A236C8;">@Lang.rule_how_ticket_wins</div>
-
-        <div class="rule-section-title mt-3">
-            <span class="icon">&#9670;</span> @Lang.rule_if_purchased_odd
-        </div>
-
-        <div class="flex px-3 gap-3 mb-4 items-center">
-            <div class="w-[45%] bg-[#FEFCE8] rounded-2xl p-3 flex flex-col items-center shadow-sm border-2 border-[#A236C8]/40">
-                <img src="/LotteryV2/img/odd_text.png" class="h-8 object-contain mb-1" alt="Odd">
-                <div class="text-[8px] text-[#212121] mb-2">@Html.Raw(Lang.rule_odd_numbers_13579)</div>
-                <div class="flex items-center justify-center -space-x-1 mb-2 mt-1">
-                    <div class="w-7 h-7 rounded-full bg-gradient-to-br from-[#ff6a00] to-[#ee0979] flex items-center justify-center text-[11px] font-[900] text-[#4a0000] shadow-sm z-10 border border-white/50">3</div>
-                    <div class="w-9 h-9 rounded-full bg-[radial-gradient(circle_at_30%_30%,#fdfbfb,#ebedee)] flex items-center justify-center text-[15px] font-[900] text-[#1e3c72] shadow-md z-20 border-2 border-[#ECA600]/40 -mt-1">1</div>
-                    <div class="w-7 h-7 rounded-full bg-gradient-to-br from-[#00c6ff] to-[#0072ff] flex items-center justify-center text-[11px] font-[900] text-[#1e3c72] shadow-sm z-10 border border-white/50">19</div>
-                </div>
-                <button class="w-full bg-[#A236C8] text-white py-[6px] rounded-[8px] text-[12px] font-bold shadow-md active:scale-95 transition-transform mt-1">@Lang.rule_select</button>
-            </div>
-            <div class="w-[55%] pl-1">
-                <ul class="bullet-list mb-3 pr-0">
-                    <li class="mb-1 leading-snug">@Html.Raw(Lang.rule_if_20_contain_15_odd)</li>
-                </ul>
-                <div class="font-[800] text-[#212121] flex items-center gap-1 text-[13px] ml-2 mt-1">
-                    <span class="text-blue-500 text-[18px]">&#10145;</span> &#127942; @Lang.rule_you_win
+        
+                <div class="flex px-3 gap-3 mb-4 items-center">
+                    <div class="w-[45%] bg-[#FEFCE8] rounded-2xl p-3 flex flex-col items-center shadow-sm border border-[#E8DFC9]">
+                        <img src="/LotteryV2/img/even_text.png" class="h-6 object-contain mb-2 mt-1" alt="Even">
+                        <div class="text-[8px] text-[#212121] mb-2">@Html.Raw(Lang.rule_even_numbers_02468)</div>
+                        <div class="flex items-center justify-center -space-x-1 mb-2 mt-1">
+                            <div class="w-7 h-7 rounded-full bg-gradient-to-br from-[#ff0844] to-[#ffb199] flex items-center justify-center text-[11px] font-[900] text-[#4a0000] shadow-sm z-10 border border-white/50">66</div>
+                            <div class="w-9 h-9 rounded-full bg-[radial-gradient(circle_at_30%_30%,#e1bee7,#8e24aa)] flex items-center justify-center text-[15px] font-[900] text-[#ffffff] shadow-md z-20 border-2 border-white/80 -mt-1" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.5);">68</div>
+                            <div class="w-7 h-7 rounded-full bg-gradient-to-br from-[#d4fc79] to-[#96e6a1] flex items-center justify-center text-[11px] font-[900] text-[#1e3c72] shadow-sm z-10 border border-white/50">88</div>
+                        </div>
+                        <button class="w-full bg-[#A236C8] text-white py-[6px] rounded-[8px] text-[12px] font-bold shadow-md active:scale-95 transition-transform mt-1">@Lang.rule_selected</button>
+                    </div>
+                    <div class="w-[55%] pl-1">
+                        <ul class="bullet-list mb-3 pr-0">
+                            <li class="mb-1 leading-snug">@Html.Raw(Lang.rule_if_20_contain_15_even)</li>
+                        </ul>
+                        <div class="font-[800] text-[#212121] flex items-center gap-1 text-[13px] ml-2 mt-1">
+                            <span class="text-blue-500 text-[18px]">&#10145;</span> &#127942; @Lang.rule_you_win
+                        </div>
+                    </div>
                 </div>
-            </div>
-        </div>
-
-        <div class="rule-section-title">
-            <span class="icon">&#9670;</span> @Lang.rule_if_purchased_even
-        </div>
-
-        <div class="flex px-3 gap-3 mb-4 items-center">
-            <div class="w-[45%] bg-[#FEFCE8] rounded-2xl p-3 flex flex-col items-center shadow-sm border border-[#E8DFC9]">
-                <img src="/LotteryV2/img/even_text.png" class="h-6 object-contain mb-2 mt-1" alt="Even">
-                <div class="text-[8px] text-[#212121] mb-2">@Html.Raw(Lang.rule_even_numbers_02468)</div>
-                <div class="flex items-center justify-center -space-x-1 mb-2 mt-1">
-                    <div class="w-7 h-7 rounded-full bg-gradient-to-br from-[#ff0844] to-[#ffb199] flex items-center justify-center text-[11px] font-[900] text-[#4a0000] shadow-sm z-10 border border-white/50">66</div>
-                    <div class="w-9 h-9 rounded-full bg-[radial-gradient(circle_at_30%_30%,#e1bee7,#8e24aa)] flex items-center justify-center text-[15px] font-[900] text-[#ffffff] shadow-md z-20 border-2 border-white/80 -mt-1" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.5);">68</div>
-                    <div class="w-7 h-7 rounded-full bg-gradient-to-br from-[#d4fc79] to-[#96e6a1] flex items-center justify-center text-[11px] font-[900] text-[#1e3c72] shadow-sm z-10 border border-white/50">88</div>
-                </div>
-                <button class="w-full bg-[#A236C8] text-white py-[6px] rounded-[8px] text-[12px] font-bold shadow-md active:scale-95 transition-transform mt-1">@Lang.rule_selected</button>
-            </div>
-            <div class="w-[55%] pl-1">
-                <ul class="bullet-list mb-3 pr-0">
-                    <li class="mb-1 leading-snug">@Html.Raw(Lang.rule_if_20_contain_15_even)</li>
+        
+                <div class="rule-section-title">
+                    <span class="icon">&#9670;</span> @Lang.rule_example
+                </div>
+                <div class="px-3 text-[11px] text-[#212121] leading-relaxed mb-4">
+                    @Lang.rule_if_20_drawn_contain<br>
+                    <ul class="list-disc pl-5 mt-1 mb-2">
+                        <li>@Lang.rule_example_16_odd</li>
+                        <li>@Lang.rule_example_4_even</li>
+                    </ul>
+                    <div class="font-[800] text-[#ECA600] flex gap-1 mb-1"><span class="text-[14px]">👉</span> <span class="text-[#212121]">@Html.Raw(Lang.rule_result_is_odd)</span></div>
+                    <div class="font-[800] text-[#ECA600] flex gap-1 mb-4"><span class="text-[14px]">👉</span> <span class="text-[#212121]">@Lang.rule_all_odd_win</span></div>
+        
+                    @Lang.rule_if_20_drawn_contain<br>
+                    <ul class="list-disc pl-5 mt-1 mb-2">
+                        <li>@Lang.rule_example_15_even</li>
+                        <li>@Lang.rule_example_5_odd</li>
+                    </ul>
+                    <div class="font-[800] text-[#ECA600] flex gap-1 mb-1"><span class="text-[14px]">👉</span> <span class="text-[#212121]">@Html.Raw(Lang.rule_result_is_even)</span></div>
+                    <div class="font-[800] text-[#ECA600] flex gap-1"><span class="text-[14px]">👉</span> <span class="text-[#212121]">@Lang.rule_all_even_win</span></div>
+                </div>
+        
+                <div class="rule-header-red" style="background-color: #A236C8;">@Lang.rule_prize_pool_title</div>
+                
+                <div class="flex flex-col items-center justify-center mt-2 mb-4">
+                    <img src="/LotteryV2/img/wallet_large.png" class="h-[120px] object-contain drop-shadow-xl z-20" alt="Prize">
+                    <div class="text-[34px] font-[900] text-[#FFE95B] drop-shadow-md z-30 -mt-2" style="-webkit-text-stroke: 1px #ECA600; text-shadow: 2px 2px 0px rgba(0,0,0,0.2);">200 HTG</div>
+                </div>
+        
+                <ul class="bullet-list mb-6">
+                    <li>@Lang.rule_win_receive_4x</li>
+                    <li>@Html.Raw(Lang.rule_example_bet_50_4x)</li>
                 </ul>
-                <div class="font-[800] text-[#212121] flex items-center gap-1 text-[13px] ml-2 mt-1">
-                    <span class="text-blue-500 text-[18px]">&#10145;</span> &#127942; @Lang.rule_you_win
+        
+                <div class="rule-section-title mt-4">
+                    <span class="icon">&#9670;</span> @Lang.rule_important_notes
                 </div>
+                <ul class="bullet-list pb-8">
+                    <li>@Lang.rule_only_one_option</li>
+                    <li>@Lang.rule_valid_one_draw</li>
+                    <li>@Lang.rule_system_count_final</li>
+                    <li>Ticket sales close at 20:00 daily.</li>
+                    <li>@Lang.rule_if_making_payment</li>
+                    <li>@Lang.rule_payment_shortly</li>
+                    <li>@Lang.rule_payment_later</li>
+                    <li>@Lang.rule_system_time</li>
+                </ul>
             </div>
-        </div>
-
-        <div class="rule-section-title">
-            <span class="icon">&#9670;</span> @Lang.rule_example
-        </div>
-        <div class="px-3 text-[11px] text-[#212121] leading-relaxed mb-4">
-            @Lang.rule_if_20_drawn_contain<br>
-            <ul class="list-disc pl-5 mt-1 mb-2">
-                <li>@Lang.rule_example_16_odd</li>
-                <li>@Lang.rule_example_4_even</li>
-            </ul>
-            <div class="font-[800] text-[#ECA600] flex gap-1 mb-1"><span class="text-[14px]">👉</span> <span class="text-[#212121]">@Html.Raw(Lang.rule_result_is_odd)</span></div>
-            <div class="font-[800] text-[#ECA600] flex gap-1 mb-4"><span class="text-[14px]">👉</span> <span class="text-[#212121]">@Lang.rule_all_odd_win</span></div>
-
-            @Lang.rule_if_20_drawn_contain<br>
-            <ul class="list-disc pl-5 mt-1 mb-2">
-                <li>@Lang.rule_example_15_even</li>
-                <li>@Lang.rule_example_5_odd</li>
-            </ul>
-            <div class="font-[800] text-[#ECA600] flex gap-1 mb-1"><span class="text-[14px]">👉</span> <span class="text-[#212121]">@Html.Raw(Lang.rule_result_is_even)</span></div>
-            <div class="font-[800] text-[#ECA600] flex gap-1"><span class="text-[14px]">👉</span> <span class="text-[#212121]">@Lang.rule_all_even_win</span></div>
-        </div>
-
-        <div class="rule-header-red" style="background-color: #A236C8;">@Lang.rule_prize_pool_title</div>
-        
-        <div class="flex flex-col items-center justify-center mt-2 mb-4">
-            <img src="/LotteryV2/img/wallet_large.png" class="h-[120px] object-contain drop-shadow-xl z-20" alt="Prize">
-            <div class="text-[34px] font-[900] text-[#FFE95B] drop-shadow-md z-30 -mt-2" style="-webkit-text-stroke: 1px #ECA600; text-shadow: 2px 2px 0px rgba(0,0,0,0.2);">200 HTG</div>
-        </div>
-
-        <ul class="bullet-list mb-6">
-            <li>@Lang.rule_win_receive_4x</li>
-            <li>@Html.Raw(Lang.rule_example_bet_50_4x)</li>
-        </ul>
-
-        <div class="rule-section-title mt-4">
-            <span class="icon">&#9670;</span> @Lang.rule_important_notes
-        </div>
-        <ul class="bullet-list pb-8">
-            <li>@Lang.rule_only_one_option</li>
-            <li>@Lang.rule_valid_one_draw</li>
-            <li>@Lang.rule_system_count_final</li>
-            <li>Ticket sales close at 20:00 daily.</li>
-            <li>@Lang.rule_if_making_payment</li>
-            <li>@Lang.rule_payment_shortly</li>
-            <li>@Lang.rule_payment_later</li>
-            <li>@Lang.rule_system_time</li>
-        </ul>
-    </div>
+        </div> <!-- End max-width wrapper -->
+    </div> <!-- End Scroll Container -->
 </div>
 
 <script>
@@ -551,9 +532,12 @@
         if(currentContent) {
             currentContent.classList.remove('hidden');
         }
+        
+        // Reset scroll position when switching tabs
+        let scrollCont = document.getElementById('rule-scroll-container');
+        if(scrollCont) scrollCont.scrollTop = 0;
     }
 </script>
 
 <!-- Bottom Navbar shared component -->
 <partial name="_BottomNavbar" />
-

website/Areas/LotteryV2/Views/Home/TransferWinMoney.cshtml

@@ -4,6 +4,15 @@
     Layout = "~/Areas/LotteryV2/Views/Shared/_Layout.cshtml";
 }
 @using LotteryWebApp.Languages;
+<style>
+    @@keyframes float {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(-8px); }
+    }
+    .animate-float {
+        animation: float 4s ease-in-out infinite;
+    }
+</style>
 
 <div class="main-container animate__animated animate__fadeIn bg-[#EAEAEA] min-h-screen font-bricolage overflow-x-hidden">
     <!-- Standardized Header (Matches Profile/Rules) -->
@@ -22,28 +31,32 @@
     <div class="h-[52px]"></div>
 
     <div class="pt-[20px] px-4 pb-24 max-w-[420px] mx-auto">
-        <!-- Account Card Section -->
-        <div class="relative w-full aspect-[343/180] bg-[#EE0033] rounded-[24px] overflow-hidden shadow-xl mb-6 border border-white/20 p-6 flex flex-col justify-between">
-            <!-- Decorative Glitter/Light Background -->
-            <div class="absolute inset-0 opacity-40 pointer-events-none" style="background: url('/LotteryV2/img/transfer_account_card.png') no-repeat center center; background-size: cover;"></div>
-            
-            <!-- Floating Decorative Elements -->
-            <img src="/LotteryV2/img/transfer_gold_stack.png" alt="Decoration" class="absolute -top-2 -right-2 w-16 opacity-80 pointer-events-none" />
-            <img src="/LotteryV2/img/transfer_gold_coin.png" alt="Decoration" class="absolute bottom-4 right-4 w-12 opacity-60 pointer-events-none animate-pulse" />
-
-            <div class="relative z-10">
-                <p class="text-white/80 font-bold text-[14px] uppercase tracking-wider">@Lang.v2_account_name</p>
-                <div class="flex items-end gap-2 mt-2">
-                    <span id="currentBetCoin" class="text-white font-[900] text-[36px] leading-[0.9]">@String.Format("{0:N0}", double.TryParse(Model?.userStatus?.bet_coin, out var cc) ? cc : 0)</span>
-                    <span class="text-[#FBF3A7] font-[900] text-[16px] uppercase pb-1">htg</span>
-                </div>
+        <!-- Account Card Section (Matching Figma: Frame 69) -->
+        <div class="relative w-full bg-[#EE0033] rounded-[12px] overflow-hidden shadow-xl mb-6 pl-8 pr-5 py-2 flex flex-col justify-between" style="border: 4px solid transparent; border-image: linear-gradient(175deg, rgba(255,255,255,0.2) 0%, rgba(255,199,0,0.4) 100%) 1; border-radius: 12px; aspect-ratio: 383/92;">
+            <!-- Decorative Elements (positions from Figma: card 383×92) -->
+            <div class="absolute inset-0 pointer-events-none overflow-hidden rounded-[12px]">
+                <!-- Golden Ribbon: Figma x:232.58 y:19.11 w:202.23 h:113.29 → right:0, top:20.8%, w:52.8% -->
+                <img src="/LotteryV2/img/transfer_card_bg_v2.png" alt="" class="absolute z-0" style="right: -10%; top: 20%; width: 53%; height: auto;" />
+                
+                <!-- Coin 2 (top-right): Figma x:336 y:11 w:27 h:26 → right:5.2%, top:12% -->
+                <img src="/LotteryV2/img/transfer/coin_2.png" alt="" class="absolute z-10 animate-float" style="right: 5%; top: 12%; width: 7%;" />
+                <!-- Coin 1 (mid-right): Figma x:309 y:51 w:28 h:25 → right:12%, top:55% -->
+                <img src="/LotteryV2/img/transfer/coin_1.png" alt="" class="absolute z-10 animate-float" style="right: 12%; top: 55%; width: 7.4%; animation-delay: 0.5s;" />
+                <!-- Coin 3 (small, left of ribbon): Figma x:272 y:27 w:18 h:12 → right:24.3%, top:29% -->
+                <img src="/LotteryV2/img/transfer/coin_3.png" alt="" class="absolute z-10 animate-pulse" style="right: 24%; top: 29%; width: 4.7%;" />
+                
+                <!-- Lights: Figma w:800 h:43, full-bleed glow overlays -->
+                <img src="/LotteryV2/img/transfer/light_1.png" alt="" class="absolute z-[1]" style="top: -23%; left: -55%; width: 210%; opacity: 0.7;" />
+                <img src="/LotteryV2/img/transfer/light_2.png" alt="" class="absolute z-[1]" style="bottom: -23%; left: -55%; width: 210%; opacity: 0.7;" />
             </div>
 
-            <div class="relative z-10 flex items-center gap-3">
-                <div class="w-10 h-10 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center border border-white/30">
-                    <img src="/LotteryV2/img/transfer_wallet_icon.png" alt="Wallet" class="w-5 h-5 object-contain" />
-                </div>
-                <!-- <span class="text-white/90 font-bold text-[14px]">Available Balance</span> -->
+            <!-- Account Label -->
+            <p class="relative z-10 text-white font-bold text-[16px] tracking-normal" style="font-family: 'Bricolage Grotesque', sans-serif;">@Lang.v2_account_name</p>
+            
+            <!-- Balance Row -->
+            <div class="relative z-10 flex items-end gap-2">
+                <span id="currentBetCoin" class="font-[800] text-[40px] leading-[1.2]" style="background: linear-gradient(179deg, rgba(255,255,255,1) 0%, rgba(240,201,63,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: 'Bricolage Grotesque', sans-serif;">@String.Format("{0:N0}", double.TryParse(Model?.userStatus?.bet_coin, out var cc) ? cc : 0)</span>
+                <span class="text-white font-[800] text-[20px] uppercase pb-[6px]" style="font-family: 'Bricolage Grotesque', sans-serif;">htg</span>
             </div>
         </div>
 
@@ -68,7 +81,7 @@
         </div>
 
         <!-- Form Fields Area -->
-        <div class="flex flex-col gap-5">
+        <div class="flex flex-col gap-2">
             <!-- Sender Phone -->
             <div class="flex flex-col gap-2">
                 <label class="text-[#534A4A] font-[900] text-[16px] px-1 capitalize">@Lang.v2_sender_phone</label>
@@ -270,7 +283,7 @@
                 <!-- Action Buttons -->
                 <div class="w-full flex gap-4">
                     <button onclick="closeOtpModal()" class="flex-1 bg-[#FF0000] text-white font-[900] py-2.5 rounded-[16px] active:scale-95 transition-all text-[13px] shadow-lg">@Lang.cancel</button>
-                    <button id="btnConfirmTransfer" class="flex-1 bg-[#0A9800] text-white font-[900] py-2.5 rounded-[16px] active:scale-95 transition-all text-[13px] shadow-lg">@Lang.confirm</button>
+                    <button id="btnConfirmTransfer" disabled class="flex-1 bg-[#0A9800] text-white font-[900] py-2.5 rounded-[16px] active:scale-95 transition-all text-[13px] shadow-lg disabled:opacity-50 disabled:grayscale disabled:cursor-not-allowed">@Lang.confirm</button>
                 </div>
             </div>
         </div>
@@ -347,6 +360,7 @@
         function openOtpModal() {
             // Clear previous OTP values
             $(".otp-digit").val("");
+            $("#btnConfirmTransfer").prop('disabled', true);
             
             // Set display amounts
             const amt = $("#transferAmount").val();
@@ -355,7 +369,6 @@
             $("#displayAmountHTG").text(formattedAmt);
 
             $("#otpModal").removeClass("hidden").addClass("flex");
-            $("#btnConfirmTransfer").prop('disabled', false).html('@Lang.confirm').removeClass('opacity-50');
             resetTimer();
             $(".otp-digit").first().focus();
         }
@@ -377,6 +390,11 @@
                 }
             }
 
+            // Check if all 6 digits filled
+            var filled = 0;
+            $(".otp-digit").each(function() { if ($(this).val().length >= 1) filled++; });
+            $("#btnConfirmTransfer").prop('disabled', filled < 6);
+
             // Clear error when typing
             $("#otpError").addClass("hidden").text("");
         }
@@ -398,7 +416,7 @@
             clearInterval(timerInterval);
             $("#otpTimer").removeClass("hidden").text("60s");
             $("#resendOtpBtn").addClass("hidden");
-            $("#btnConfirmTransfer").prop('disabled', false).removeClass('opacity-50');
+            // Keep confirm disabled until OTP is filled — don't re-enable here
             
             timerInterval = setInterval(() => {
                 seconds--;

website/Areas/LotteryV2/Views/Home/_TermResultHistoryV2.cshtml

@@ -5,7 +5,12 @@
     foreach (var item in Model.listTerm)
     {
         <!-- Result Item Card -->
-        <div class="result-item-red animate__animated animate__fadeInUp">
+        <div class="result-item-red animate__animated animate__fadeInUp relative overflow-hidden">
+            <!-- Game Label Badge -->
+            <div class="absolute top-2 right-4 bg-white/20 backdrop-blur-md border border-white/20 px-2 py-0.5 rounded-full text-[9px] font-black text-white uppercase tracking-tighter z-10 shadow-sm">
+                 @(item.gameId == "30" ? "Basic" : item.gameId == "31" ? "Big/Small" : item.gameId == "32" ? "Odd/Even" : "Mega")
+            </div>
+
             <div class="item-date-text font-bricolage">
                 @{
                     DateTime drawDate;

website/Areas/LotteryV2/Views/Home/_TermUserTicketHistory.cshtml

@@ -48,7 +48,26 @@
                                 } else {
                                     ballClass = "ball-lose";
                                 }
-                                <div class="ticket-ball @ballClass">@ballValue</div>
+
+                                // Map single-letter codes to full labels
+                                var displayValue = ballValue;
+                                var isLabel = false;
+                                switch (ballValue.ToUpper())
+                                {
+                                    case "B": displayValue = "Big"; isLabel = true; break;
+                                    case "S": displayValue = "Small"; isLabel = true; break;
+                                    case "O": displayValue = "Odd"; isLabel = true; break;
+                                    case "E": displayValue = "Even"; isLabel = true; break;
+                                }
+
+                                if (isLabel)
+                                {
+                                    <div class="ticket-ball @ballClass" style="width: auto; min-width: 50px; padding: 2px 10px; border-radius: 16px; font-size: 13px;">@displayValue</div>
+                                }
+                                else
+                                {
+                                    <div class="ticket-ball @ballClass">@displayValue</div>
+                                }
                             }
                         }
                     }

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

@@ -3,44 +3,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 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-[74px]">
+<div class="fixed bottom-0 left-0 md:left-1/2 md:-translate-x-1/2 w-full md: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="/LotteryV2/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-8 h-[2px] bg-[#EE0033] rounded-sm"></div>
+            <div class="absolute -top-[14px] left-1/2 -translate-x-1/2 w-10 h-[2.5px] bg-[#EE0033] rounded-sm"></div>
         }
-        <img src="/LotteryV2/img/icon_home.svg" alt="Home" class="w-6 h-6">
-        <span class="text-[10px] mt-1 @(activePage == "Home" ? "font-extrabold" : "font-bold")" style="@(activePage == "Home" ? "color: #EE0033;" : "")">@Lang.home</span>
+        <img src="/LotteryV2/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: #EE0033;" : "")">@Lang.home</span>
     </a>
     
     <a href="/LotteryV2/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-8 h-[2px] bg-[#EE0033] rounded-sm"></div>
+            <div class="absolute -top-[14px] left-1/2 -translate-x-1/2 w-10 h-[2.5px] bg-[#EE0033] rounded-sm"></div>
         }
-        <img src="/LotteryV2/img/icon_rule.svg" alt="Rule" class="w-6 h-6">
-        <span class="text-[10px] mt-1 @(activePage == "Rule" ? "font-extrabold" : "font-bold")" style="@(activePage == "Rule" ? "color: #EE0033;" : "")">@Lang.rules</span>
+        <img src="/LotteryV2/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: #EE0033;" : "")">@Lang.rules</span>
     </a>
 
     <a href="/LotteryV2/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-8 h-[2px] bg-[#EE0033] rounded-sm"></div>
+            <div class="absolute -top-[14px] left-1/2 -translate-x-1/2 w-10 h-[2.5px] bg-[#EE0033] rounded-sm"></div>
         }
-        <img src="/LotteryV2/img/icon_history.svg" alt="History" class="w-6 h-6">
-        <span class="text-[10px] mt-1 @(activePage == "History" ? "font-extrabold" : "font-bold")" style="@(activePage == "History" ? "color: #EE0033;" : "")">@Lang.history</span>
+        <img src="/LotteryV2/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: #EE0033;" : "")">@Lang.history</span>
     </a>
 
     <a href="/LotteryV2/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-8 h-[2px] bg-[#EE0033] rounded-sm"></div>
+            <div class="absolute -top-[14px] left-1/2 -translate-x-1/2 w-10 h-[2.5px] bg-[#EE0033] rounded-sm"></div>
         }
-        <img src="/LotteryV2/img/icon_faq.svg" alt="FAQ" class="w-6 h-6">
-        <span class="text-[10px] mt-1 @(activePage == "FAQ" ? "font-extrabold drop-shadow-sm" : "font-bold")" style="@(activePage == "FAQ" ? "color: #EE0033;" : "")">@Lang.faq</span>
+        <img src="/LotteryV2/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: #EE0033;" : "")">@Lang.faq</span>
     </a>
 
     <a href="/LotteryV2/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-8 h-[2px] bg-[#EE0033] rounded-sm"></div>
+            <div class="absolute -top-[14px] left-1/2 -translate-x-1/2 w-10 h-[2.5px] bg-[#EE0033] rounded-sm"></div>
         }
-        <img src="/LotteryV2/img/icon_more.svg" alt="More" class="w-6 h-6">
-        <span class="text-[10px] mt-1 @(activePage == "More" ? "font-extrabold drop-shadow-sm" : "font-bold")" style="@(activePage == "More" ? "color: #EE0033;" : "")">@Lang.more</span>
+        <img src="/LotteryV2/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: #EE0033;" : "")">@Lang.more</span>
     </a>
 </div>

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

@@ -17,6 +17,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;700;800&display=swap" rel="stylesheet">
     <style>
         .font-bricolage { font-family: 'Bricolage Grotesque', sans-serif; }
+        .font-UTM_Futura_Extra { font-family: 'UTM Futura Extra', sans-serif; }
     </style>
     
     @RenderSection("Styles", required: false)

website/Controllers/AccountController.cs

@@ -54,6 +54,7 @@ namespace LotteryWebApp.Controllers
                 model.code = code;
                 model.step = step != null ? step : Constants.LOGIN_ENTER_MSISDN;
                 model.message = message;
+                model.phonenumber = phonenumber;
             }
             catch (Exception ex)
             {
@@ -98,8 +99,12 @@ namespace LotteryWebApp.Controllers
                 // resent password to return result
                 String msisdn = HttpContext.Session.GetComplexData<String>("msisdn");
 
-                //String msisdn = validateMsisdn(phonenumber);
-                if (msisdn == null)
+                if (msisdn == null && !string.IsNullOrEmpty(phonenumber))
+                {
+                    msisdn = validateMsisdn(phonenumber);
+                }
+
+                if (msisdn == null || msisdn == "")
                 {
                     return Json(new
                     {

website/Languages/Lang.Designer.cs

@@ -198,7 +198,7 @@ namespace LotteryWebApp.Languages {
         /// <summary>
         ///   Looks up a localized string similar to Natcom Lotto is a new VAS lottery service of Natcom. You can play via USSD or WEB/APP. You can also receive SMS results with FREE once you send ON to 7777 and you can send OFF to 7777 to request for not receive MT sms results or MT information from Lottery and ON to recover MT sms.
         ///You can also try your luck with Natcom Lottery draw.
-        ///We’ll help you create an account in a few easy steps..
+        ///We’ll help you create an account in a few easy steps..
         /// </summary>
         public static string bee_loto_intro {
             get {
@@ -224,6 +224,24 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Big.
+        /// </summary>
+        public static string Big {
+            get {
+                return ResourceManager.GetString("Big", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Big Small.
+        /// </summary>
+        public static string bigsmall {
+            get {
+                return ResourceManager.GetString("bigsmall", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Demann Fakti.
         /// </summary>
@@ -333,7 +351,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Achte tikè.
+        ///   Looks up a localized string similar to Achte tikè.
         /// </summary>
         public static string buying {
             get {
@@ -818,6 +836,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Even.
+        /// </summary>
+        public static string Even {
+            get {
+                return ResourceManager.GetString("Even", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Echek.
         /// </summary>
@@ -846,7 +873,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Choisissez 10 numéros de 1 à 80 ou l&apos;option Choix rapide. Achetez votre billet et attendez le tirage..
+        ///   Looks up a localized string similar to Choisissez 10 numéros de 1 à 80 ou l&apos;option Choix rapide. Achetez votre billet et attendez le tirage..
         /// </summary>
         public static string faq_a1 {
             get {
@@ -855,7 +882,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Les tirages ont lieu tous les jours à 20h30. Les ventes de billets s&apos;arrêtent à 20h00..
+        ///   Looks up a localized string similar to Les tirages ont lieu tous les jours à 20h30. Les ventes de billets s&apos;arrêtent à 20h00..
         /// </summary>
         public static string faq_a2 {
             get {
@@ -899,6 +926,96 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to The more numbers you match, the bigger your prize! &lt;br/&gt; In Classic Pick 10, your 10 selected numbers are compared with the 10 official result numbers. You win when you match 6 or more numbers — and even matching 0 numbers still gives you a reward!&lt;br/&gt;&lt;br/&gt; 🎯 Match 10 numbers → Win the Jackpot&lt;br/&gt; 🔥 Match 9 numbers → Win 12,000 HTG&lt;br/&gt; 💰 Match 8 numbers → Win 600 HTG&lt;br/&gt; ⭐ Match 7 numbers → Win 160 HTG&lt;br/&gt; 🎉 Match 6 numbers → Win 20 HTG&lt;br/&gt; 🎁 Match 0 numbers → Win 5 HTG&lt;br/&gt;&lt;br/&gt; Every ticket giv [rest of string was truncated]&quot;;.
+        /// </summary>
+        public static string faq_v2_a4 {
+            get {
+                return ResourceManager.GetString("faq_v2_a4", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Choose Big (41–80) or Small (01–40). Purchase your ticket before 20:00 and wait for the draw at 20:30..
+        /// </summary>
+        public static string faq_v2_a5 {
+            get {
+                return ResourceManager.GetString("faq_v2_a5", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to After 20 numbers are drawn, the system checks how many numbers fall within each range: &lt;br/&gt; - If 13 or more numbers are between 41–80, the result is BIG.&lt;br/&gt; - If 13 or more numbers are between 01–40, the result is SMALL.&lt;br/&gt;&lt;br/&gt; If your selected option matches the official result, you win..
+        /// </summary>
+        public static string faq_v2_a6 {
+            get {
+                return ResourceManager.GetString("faq_v2_a6", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Choose Odd or Even. Purchase your ticket before 20:00 and wait for the draw at 20:30..
+        /// </summary>
+        public static string faq_v2_a7 {
+            get {
+                return ResourceManager.GetString("faq_v2_a7", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to After 20 numbers are drawn, the system counts how many numbers are odd or even: &lt;br/&gt; - If 15 or more numbers are odd, the result is ODD.&lt;br/&gt; - If 15 or more numbers are even, the result is EVEN.&lt;br/&gt;&lt;br/&gt; If your selected option matches the official result, you win..
+        /// </summary>
+        public static string faq_v2_a8 {
+            get {
+                return ResourceManager.GetString("faq_v2_a8", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to ❓ How many matching numbers do I need to win a prize?.
+        /// </summary>
+        public static string faq_v2_q4 {
+            get {
+                return ResourceManager.GetString("faq_v2_q4", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to ❓ How do I play the Big / Small game?.
+        /// </summary>
+        public static string faq_v2_q5 {
+            get {
+                return ResourceManager.GetString("faq_v2_q5", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to ❓ How do I win in the Big / Small game?.
+        /// </summary>
+        public static string faq_v2_q6 {
+            get {
+                return ResourceManager.GetString("faq_v2_q6", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to ❓ How do I play the Odd / Even game?.
+        /// </summary>
+        public static string faq_v2_q7 {
+            get {
+                return ResourceManager.GetString("faq_v2_q7", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to ❓ How do I win in the Odd / Even game?.
+        /// </summary>
+        public static string faq_v2_q8 {
+            get {
+                return ResourceManager.GetString("faq_v2_q8", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Fre.
         /// </summary>
@@ -1268,6 +1385,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Minutes.
+        /// </summary>
+        public static string Minutes {
+            get {
+                return ResourceManager.GetString("Minutes", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Lajan.
         /// </summary>
@@ -1305,7 +1431,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Tike Mwen.
+        ///   Looks up a localized string similar to My Tickit.
         /// </summary>
         public static string my_ticket {
             get {
@@ -1349,6 +1475,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Next.
+        /// </summary>
+        public static string next {
+            get {
+                return ResourceManager.GetString("next", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Prochen Tiraj.
         /// </summary>
@@ -1467,7 +1602,25 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Pè / Enpè.
+        ///   Looks up a localized string similar to Number of ticket.
+        /// </summary>
+        public static string Number_of_ticket {
+            get {
+                return ResourceManager.GetString("Number_of_ticket", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Odd.
+        /// </summary>
+        public static string Odd {
+            get {
+                return ResourceManager.GetString("Odd", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Pè Enpè.
         /// </summary>
         public static string odd_even {
             get {
@@ -1475,6 +1628,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Odd Even.
+        /// </summary>
+        public static string oddeven {
+            get {
+                return ResourceManager.GetString("oddeven", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Oswa.
         /// </summary>
@@ -1646,6 +1808,33 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Pick.
+        /// </summary>
+        public static string Pick {
+            get {
+                return ResourceManager.GetString("Pick", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Pick Number.
+        /// </summary>
+        public static string Pick_Number {
+            get {
+                return ResourceManager.GetString("Pick_Number", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Pick 10.
+        /// </summary>
+        public static string pick10 {
+            get {
+                return ResourceManager.GetString("pick10", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Your pin is wrong.
         /// </summary>
@@ -1881,7 +2070,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to 13 or more numbers between &lt;span class=&quot;text-[#0BA01A] font-bold&quot;&gt;01–40&lt;/span&gt; → SMALL wins.
+        ///   Looks up a localized string similar to 13 or more numbers between &lt;span class=&quot;text-[#0BA01A] font-bold&quot;&gt;01–40&lt;/span&gt; → SMALL wins.
         /// </summary>
         public static string rule_13_or_more_01_40 {
             get {
@@ -1890,7 +2079,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to 13 or more numbers between &lt;span class=&quot;text-[#0BA01A] font-bold&quot;&gt;41–80&lt;/span&gt; → BIG wins.
+        ///   Looks up a localized string similar to 13 or more numbers between &lt;span class=&quot;text-[#0BA01A] font-bold&quot;&gt;41–80&lt;/span&gt; → BIG wins.
         /// </summary>
         public static string rule_13_or_more_41_80 {
             get {
@@ -1962,7 +2151,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Big / Small.
+        ///   Looks up a localized string similar to Big  Small.
         /// </summary>
         public static string rule_big_small {
             get {
@@ -1971,7 +2160,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Big/Small Prize.
+        ///   Looks up a localized string similar to Big Small Prize.
         /// </summary>
         public static string rule_bs_prize {
             get {
@@ -1980,7 +2169,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to BIG / SMALL – WINNING RULE.
+        ///   Looks up a localized string similar to BIG  SMALL – WINNING RULE.
         /// </summary>
         public static string rule_bs_winning_rule {
             get {
@@ -1998,7 +2187,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Choose 10 numbers from 01–80..
+        ///   Looks up a localized string similar to Choose 10 numbers from 01–80..
         /// </summary>
         public static string rule_choose_10 {
             get {
@@ -2043,7 +2232,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Each winner receives 💰100,000 HTG..
+        ///   Looks up a localized string similar to Each winner receives 💰100,000 HTG..
         /// </summary>
         public static string rule_each_receives {
             get {
@@ -2115,7 +2304,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Example: Bet 50 HTG → Win 100 HTG..
+        ///   Looks up a localized string similar to Example: Bet 50 HTG → Win 100 HTG..
         /// </summary>
         public static string rule_example_bet_50 {
             get {
@@ -2124,7 +2313,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Example: Bet 50 HTG → Win 200 HTG..
+        ///   Looks up a localized string similar to Example: Bet 50 HTG → Win 200 HTG..
         /// </summary>
         public static string rule_example_bet_50_4x {
             get {
@@ -2133,7 +2322,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to II. GAME 1 – CLASSIC PICK 10.
+        ///   Looks up a localized string similar to II. GAME 1 – CLASSIC PICK 10.
         /// </summary>
         public static string rule_game_1_title {
             get {
@@ -2196,7 +2385,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to If 13 numbers among the 20 drawn numbers fall within the range &lt;span class=&quot;text-[#0BA01A] font-bold&quot;&gt;01–40&lt;/span&gt;,.
+        ///   Looks up a localized string similar to If 13 numbers among the 20 drawn numbers fall within the range &lt;span class=&quot;text-[#0BA01A] font-bold&quot;&gt;01–40&lt;/span&gt;,.
         /// </summary>
         public static string rule_if_13_01_40 {
             get {
@@ -2205,7 +2394,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to If 13 numbers among the 20 drawn numbers fall within the range &lt;span class=&quot;text-[#0BA01A] font-bold&quot;&gt;41–80&lt;/span&gt;,.
+        ///   Looks up a localized string similar to If 13 numbers among the 20 drawn numbers fall within the range &lt;span class=&quot;text-[#0BA01A] font-bold&quot;&gt;41–80&lt;/span&gt;,.
         /// </summary>
         public static string rule_if_13_41_80 {
             get {
@@ -2268,7 +2457,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to If ≤ 10 winners.
+        ///   Looks up a localized string similar to If ≤ 10 winners.
         /// </summary>
         public static string rule_if_le_10 {
             get {
@@ -2412,7 +2601,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Odd / Even.
+        ///   Looks up a localized string similar to Odd  Even.
         /// </summary>
         public static string rule_odd_even {
             get {
@@ -2493,7 +2682,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to 💰12,000 HTG..
+        ///   Looks up a localized string similar to 💰12,000 HTG..
         /// </summary>
         public static string rule_prize_12k {
             get {
@@ -2502,7 +2691,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to 💰160 HTG..
+        ///   Looks up a localized string similar to 💰160 HTG..
         /// </summary>
         public static string rule_prize_160 {
             get {
@@ -2511,7 +2700,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to 💰20 HTG..
+        ///   Looks up a localized string similar to 💰20 HTG..
         /// </summary>
         public static string rule_prize_20 {
             get {
@@ -2520,7 +2709,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to 💰5 HTG..
+        ///   Looks up a localized string similar to 💰5 HTG..
         /// </summary>
         public static string rule_prize_5 {
             get {
@@ -2529,7 +2718,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to 💰600 HTG..
+        ///   Looks up a localized string similar to 💰600 HTG..
         /// </summary>
         public static string rule_prize_600 {
             get {
@@ -2655,7 +2844,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to 💰1,000,000 HTG shared equally among winners..
+        ///   Looks up a localized string similar to 💰1,000,000 HTG shared equally among winners..
         /// </summary>
         public static string rule_shared_equally {
             get {
@@ -2870,6 +3059,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Secs.
+        /// </summary>
+        public static string Secs {
+            get {
+                return ResourceManager.GetString("Secs", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Plis detay.
         /// </summary>
@@ -2916,7 +3114,16 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Ti / Gwo.
+        ///   Looks up a localized string similar to Small.
+        /// </summary>
+        public static string Small {
+            get {
+                return ResourceManager.GetString("Small", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Ti Gwo.
         /// </summary>
         public static string small_big {
             get {
@@ -3068,6 +3275,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Total Payment.
+        /// </summary>
+        public static string total_payment {
+            get {
+                return ResourceManager.GetString("total_payment", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Tike total .
         /// </summary>
@@ -3177,7 +3393,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Ajoute plis tikè.
+        ///   Looks up a localized string similar to Ajoute plis tikè.
         /// </summary>
         public static string v2_add_more_ticket {
             get {
@@ -3240,7 +3456,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Big / Small.
+        ///   Looks up a localized string similar to Big  Small.
         /// </summary>
         public static string v2_big_small {
             get {
@@ -3258,7 +3474,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Achte tikè.
+        ///   Looks up a localized string similar to Achte tikè.
         /// </summary>
         public static string v2_buy_ticket_label {
             get {
@@ -3348,7 +3564,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Dat ak Lè.
+        ///   Looks up a localized string similar to Dat ak Lè.
         /// </summary>
         public static string v2_date_and_time {
             get {
@@ -3393,7 +3609,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Pri tikè estime.
+        ///   Looks up a localized string similar to Pri tikè estime.
         /// </summary>
         public static string v2_estimated_ticket_price {
             get {
@@ -3420,7 +3636,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Jwèt sa a fèmen kounye a..
+        ///   Looks up a localized string similar to Jwèt sa a fèmen kounye a..
         /// </summary>
         public static string v2_game_locked {
             get {
@@ -3456,7 +3672,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Odd / Even.
+        ///   Looks up a localized string similar to Odd  Even.
         /// </summary>
         public static string v2_odd_even {
             get {
@@ -3510,7 +3726,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to 💰 Nimewo k&apos;ap resevwa.
+        ///   Looks up a localized string similar to 💰 Nimewo k&apos;ap resevwa.
         /// </summary>
         public static string v2_receiver_phone {
             get {
@@ -3591,7 +3807,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to 💸 Nimewo k&apos;ap voye.
+        ///   Looks up a localized string similar to 💸 Nimewo k&apos;ap voye.
         /// </summary>
         public static string v2_sender_phone {
             get {
@@ -3618,7 +3834,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Transfè.
+        ///   Looks up a localized string similar to Transfè.
         /// </summary>
         public static string v2_transfer {
             get {

website/Languages/Lang.fr.resx

@@ -777,7 +777,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Quick Pick</value>
   </data>
   <data name="my_ticket" xml:space="preserve">
-    <value>Tike Mwen</value>
+    <value>My Tickit</value>
   </data>
   <data name="jackpot_prize" xml:space="preserve">
     <value>Jackpot Prize</value>
@@ -786,10 +786,10 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Next Round</value>
   </data>
   <data name="small_big" xml:space="preserve">
-    <value>Small / Big</value>
+    <value>Small Big</value>
   </data>
   <data name="odd_even" xml:space="preserve">
-    <value>Odd / Even</value>
+    <value>Odd Even</value>
   </data>
   <data name="v2_select" xml:space="preserve">
     <value>Select</value>
@@ -888,10 +888,10 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Classic Pick 10</value>
   </data>
   <data name="rule_big_small" xml:space="preserve">
-    <value>Big / Small</value>
+    <value>Big Small</value>
   </data>
   <data name="rule_odd_even" xml:space="preserve">
-    <value>Odd / Even</value>
+    <value>Odd Even</value>
   </data>
   <data name="rule_13_numbers_game" xml:space="preserve">
     <value>(13 Numbers Game)</value>
@@ -1038,7 +1038,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>The official system time will determine ticket validity.</value>
   </data>
   <data name="rule_bs_winning_rule" xml:space="preserve">
-    <value>BIG / SMALL – WINNING RULE</value>
+    <value>BIG  SMALL – WINNING RULE</value>
   </data>
   <data name="rule_how_to_win" xml:space="preserve">
     <value>How to win?</value>
@@ -1050,7 +1050,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>After the draw, the system will check the 20 drawn numbers.</value>
   </data>
   <data name="rule_bs_prize" xml:space="preserve">
-    <value>Big/Small Prize</value>
+    <value>Big Small Prize</value>
   </data>
   <data name="rule_if_purchased_big" xml:space="preserve">
     <value>If you purchased a BIG ticket:</value>
@@ -1209,10 +1209,10 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Classic Pick 10</value>
   </data>
   <data name="v2_big_small" xml:space="preserve">
-    <value>Big / Small</value>
+    <value>Big  Small</value>
   </data>
   <data name="v2_odd_even" xml:space="preserve">
-    <value>Odd / Even</value>
+    <value>Odd Even</value>
   </data>
   <data name="v2_amount_played" xml:space="preserve">
     <value>Amount played</value>
@@ -1230,7 +1230,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Results are being updated.</value>
   </data>
   <data name="v2_buy_classic_pick_10" xml:space="preserve">
-    <value>Buy Classic Pick 10</value>
+    <value>Buy Basic Pick 10</value>
   </data>
   <data name="v2_select_10_lucky_numbers" xml:space="preserve">
     <value>Select Lucky Numbers</value>
@@ -1361,4 +1361,76 @@ We’ll help you create an account in a few easy steps.</value>
   <data name="millionair" xml:space="preserve">
     <value>millionair</value>
   </data>
+  <data name="faq_v2_q4" xml:space="preserve">
+    <value>❓ How many matching numbers do I need to win a prize?</value>
+  </data>
+  <data name="faq_v2_a4" xml:space="preserve">
+    <value>The more numbers you match, the bigger your prize! &lt;br/&gt; In Classic Pick 10, your 10 selected numbers are compared with the 10 official result numbers. You win when you match 6 or more numbers — and even matching 0 numbers still gives you a reward!&lt;br/&gt;&lt;br/&gt; 🎯 Match 10 numbers → Win the Jackpot&lt;br/&gt; 🔥 Match 9 numbers → Win 12,000 HTG&lt;br/&gt; 💰 Match 8 numbers → Win 600 HTG&lt;br/&gt; ⭐ Match 7 numbers → Win 160 HTG&lt;br/&gt; 🎉 Match 6 numbers → Win 20 HTG&lt;br/&gt; 🎁 Match 0 numbers → Win 5 HTG&lt;br/&gt;&lt;br/&gt; Every ticket gives you a chance to win — even when luck surprises you!</value>
+  </data>
+  <data name="faq_v2_q5" xml:space="preserve">
+    <value>❓ How do I play the Big / Small game?</value>
+  </data>
+  <data name="faq_v2_a5" xml:space="preserve">
+    <value>Choose Big (41–80) or Small (01–40). Purchase your ticket before 20:00 and wait for the draw at 20:30.</value>
+  </data>
+  <data name="faq_v2_q6" xml:space="preserve">
+    <value>❓ How do I win in the Big / Small game?</value>
+  </data>
+  <data name="faq_v2_a6" xml:space="preserve">
+    <value>After 20 numbers are drawn, the system checks how many numbers fall within each range: &lt;br/&gt; - If 13 or more numbers are between 41–80, the result is BIG.&lt;br/&gt; - If 13 or more numbers are between 01–40, the result is SMALL.&lt;br/&gt;&lt;br/&gt; If your selected option matches the official result, you win.</value>
+  </data>
+  <data name="faq_v2_q7" xml:space="preserve">
+    <value>❓ How do I play the Odd / Even game?</value>
+  </data>
+  <data name="faq_v2_a7" xml:space="preserve">
+    <value>Choose Odd or Even. Purchase your ticket before 20:00 and wait for the draw at 20:30.</value>
+  </data>
+  <data name="faq_v2_q8" xml:space="preserve">
+    <value>❓ How do I win in the Odd / Even game?</value>
+  </data>
+  <data name="faq_v2_a8" xml:space="preserve">
+    <value>After 20 numbers are drawn, the system counts how many numbers are odd or even: &lt;br/&gt; - If 15 or more numbers are odd, the result is ODD.&lt;br/&gt; - If 15 or more numbers are even, the result is EVEN.&lt;br/&gt;&lt;br/&gt; If your selected option matches the official result, you win.</value>
+  </data>
+  <data name="pick10" xml:space="preserve">
+    <value>Pick 10</value>
+  </data>
+  <data name="bigsmall" xml:space="preserve">
+    <value>Big Small</value>
+  </data>
+  <data name="oddeven" xml:space="preserve">
+    <value>Odd Even</value>
+  </data>
+  <data name="Pick" xml:space="preserve">
+    <value>Pick</value>
+  </data>
+  <data name="Small" xml:space="preserve">
+    <value>Small</value>
+  </data>
+  <data name="Big" xml:space="preserve">
+    <value>Big</value>
+  </data>
+  <data name="Odd" xml:space="preserve">
+    <value>Odd</value>
+  </data>
+  <data name="Even" xml:space="preserve">
+    <value>Even</value>
+  </data>
+  <data name="Number_of_ticket" xml:space="preserve">
+    <value>Number of ticket</value>
+  </data>
+  <data name="next" xml:space="preserve">
+    <value>Next</value>
+  </data>
+  <data name="Pick_Number" xml:space="preserve">
+    <value>Pick_Number</value>
+  </data>
+  <data name="total_payment" xml:space="preserve">
+    <value>Total Payment</value>
+  </data>
+  <data name="Minutes" xml:space="preserve">
+    <value>Minutes</value>
+  </data>
+  <data name="Secs" xml:space="preserve">
+    <value>Secs</value>
+  </data>
 </root>

website/Languages/Lang.resx

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
 <root>
   <!-- 
     Microsoft ResX Schema 
@@ -153,7 +153,7 @@
   <data name="bee_loto_intro" xml:space="preserve">
     <value>Natcom Lotto is a new VAS lottery service of Natcom. You can play via USSD or WEB/APP. You can also receive SMS results with FREE once you send ON to 7777 and you can send OFF to 7777 to request for not receive MT sms results or MT information from Lottery and ON to recover MT sms.
 You can also try your luck with Natcom Lottery draw.
-We’ll help you create an account in a few easy steps.</value>
+We’ll help you create an account in a few easy steps.</value>
   </data>
   <data name="bet_amount" xml:space="preserve">
     <value>Montan wap parye a</value>
@@ -177,7 +177,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Achte</value>
   </data>
   <data name="buying" xml:space="preserve">
-    <value>Achte tikè</value>
+    <value>Achte tikè</value>
   </data>
   <data name="buying_code_not_existed" xml:space="preserve">
     <value>Buying code is not existed</value>
@@ -777,7 +777,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Chwazi Rapid</value>
   </data>
   <data name="my_ticket" xml:space="preserve">
-    <value>Tike Mwen</value>
+    <value>My Tickit</value>
   </data>
   <data name="jackpot_prize" xml:space="preserve">
     <value>Gwo Pri</value>
@@ -786,10 +786,10 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Ronn kap vini</value>
   </data>
   <data name="small_big" xml:space="preserve">
-    <value>Ti / Gwo</value>
+    <value>Ti Gwo</value>
   </data>
   <data name="odd_even" xml:space="preserve">
-    <value>Pè / Enpè</value>
+    <value>Pè Enpè</value>
   </data>
   <data name="v2_select" xml:space="preserve">
     <value>Chwazi</value>
@@ -822,13 +822,13 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Comment jouer au jeu Pick 10 ?</value>
   </data>
   <data name="faq_a1" xml:space="preserve">
-    <value>Choisissez 10 numéros de 1 à 80 ou l'option Choix rapide. Achetez votre billet et attendez le tirage.</value>
+    <value>Choisissez 10 numéros de 1 à 80 ou l'option Choix rapide. Achetez votre billet et attendez le tirage.</value>
   </data>
   <data name="faq_q2" xml:space="preserve">
     <value>C'est quand les tirages de Pick 10 ?</value>
   </data>
   <data name="faq_a2" xml:space="preserve">
-    <value>Les tirages ont lieu tous les jours à 20h30. Les ventes de billets s'arrêtent à 20h00.</value>
+    <value>Les tirages ont lieu tous les jours à 20h30. Les ventes de billets s'arrêtent à 20h00.</value>
   </data>
   <data name="faq_q3" xml:space="preserve">
     <value>Quelles sont les chances de gagner le premier prix ?</value>
@@ -888,10 +888,10 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Classic Pick 10</value>
   </data>
   <data name="rule_big_small" xml:space="preserve">
-    <value>Big / Small</value>
+    <value>Big  Small</value>
   </data>
   <data name="rule_odd_even" xml:space="preserve">
-    <value>Odd / Even</value>
+    <value>Odd  Even</value>
   </data>
   <data name="rule_13_numbers_game" xml:space="preserve">
     <value>(13 Numbers Game)</value>
@@ -945,7 +945,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Yes</value>
   </data>
   <data name="rule_game_1_title" xml:space="preserve">
-    <value>II. GAME 1 – CLASSIC PICK 10</value>
+    <value>II. GAME 1 – CLASSIC PICK 10</value>
   </data>
   <data name="rule_basic_pick" xml:space="preserve">
     <value>Basic&lt;br&gt;Pick</value>
@@ -972,7 +972,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Selection Method</value>
   </data>
   <data name="rule_choose_10" xml:space="preserve">
-    <value>Choose 10 numbers from 01–80.</value>
+    <value>Choose 10 numbers from 01–80.</value>
   </data>
   <data name="rule_winning_rule" xml:space="preserve">
     <value>Winning Rule</value>
@@ -990,16 +990,16 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Prize Pool</value>
   </data>
   <data name="rule_if_le_10" xml:space="preserve">
-    <value>If ≤ 10 winners</value>
+    <value>If ≤ 10 winners</value>
   </data>
   <data name="rule_each_receives" xml:space="preserve">
-    <value>Each winner receives 💰100,000 HTG.</value>
+    <value>Each winner receives 💰100,000 HTG.</value>
   </data>
   <data name="rule_if_gt_10" xml:space="preserve">
     <value>If &gt; 10 winners</value>
   </data>
   <data name="rule_shared_equally" xml:space="preserve">
-    <value>💰1,000,000 HTG shared equally among winners.</value>
+    <value>💰1,000,000 HTG shared equally among winners.</value>
   </data>
   <data name="rule_numbers_matches" xml:space="preserve">
     <value>Numbers Matches</value>
@@ -1008,19 +1008,19 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Prize Pool (HTG)</value>
   </data>
   <data name="rule_prize_12k" xml:space="preserve">
-    <value>💰12,000 HTG.</value>
+    <value>💰12,000 HTG.</value>
   </data>
   <data name="rule_prize_600" xml:space="preserve">
-    <value>💰600 HTG.</value>
+    <value>💰600 HTG.</value>
   </data>
   <data name="rule_prize_160" xml:space="preserve">
-    <value>💰160 HTG.</value>
+    <value>💰160 HTG.</value>
   </data>
   <data name="rule_prize_20" xml:space="preserve">
-    <value>💰20 HTG.</value>
+    <value>💰20 HTG.</value>
   </data>
   <data name="rule_prize_5" xml:space="preserve">
-    <value>💰5 HTG.</value>
+    <value>💰5 HTG.</value>
   </data>
   <data name="rule_sales_cutoff" xml:space="preserve">
     <value>Ticket Sales Cut-off Time</value>
@@ -1038,7 +1038,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>The official system time will determine ticket validity.</value>
   </data>
   <data name="rule_bs_winning_rule" xml:space="preserve">
-    <value>BIG / SMALL – WINNING RULE</value>
+    <value>BIG  SMALL – WINNING RULE</value>
   </data>
   <data name="rule_how_to_win" xml:space="preserve">
     <value>How to win?</value>
@@ -1050,7 +1050,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>After the draw, the system will check the 20 drawn numbers.</value>
   </data>
   <data name="rule_bs_prize" xml:space="preserve">
-    <value>Big/Small Prize</value>
+    <value>Big Small Prize</value>
   </data>
   <data name="rule_if_purchased_big" xml:space="preserve">
     <value>If you purchased a BIG ticket:</value>
@@ -1062,7 +1062,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Selected</value>
   </data>
   <data name="rule_if_13_41_80" xml:space="preserve">
-    <value>If 13 numbers among the 20 drawn numbers fall within the range &lt;span class="text-[#0BA01A] font-bold"&gt;41–80&lt;/span&gt;,</value>
+    <value>If 13 numbers among the 20 drawn numbers fall within the range &lt;span class="text-[#0BA01A] font-bold"&gt;41–80&lt;/span&gt;,</value>
   </data>
   <data name="rule_you_win" xml:space="preserve">
     <value>You win.</value>
@@ -1071,7 +1071,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>13 number from &lt;span class="font-[900]"&gt;01-40&lt;/span&gt;</value>
   </data>
   <data name="rule_if_13_01_40" xml:space="preserve">
-    <value>If 13 numbers among the 20 drawn numbers fall within the range &lt;span class="text-[#0BA01A] font-bold"&gt;01–40&lt;/span&gt;,</value>
+    <value>If 13 numbers among the 20 drawn numbers fall within the range &lt;span class="text-[#0BA01A] font-bold"&gt;01–40&lt;/span&gt;,</value>
   </data>
   <data name="rule_example" xml:space="preserve">
     <value>Example</value>
@@ -1080,10 +1080,10 @@ We’ll help you create an account in a few easy steps.</value>
     <value>If the 20 drawn numbers contain:</value>
   </data>
   <data name="rule_13_or_more_41_80" xml:space="preserve">
-    <value>13 or more numbers between &lt;span class="text-[#0BA01A] font-bold"&gt;41–80&lt;/span&gt; → BIG wins</value>
+    <value>13 or more numbers between &lt;span class="text-[#0BA01A] font-bold"&gt;41–80&lt;/span&gt; → BIG wins</value>
   </data>
   <data name="rule_13_or_more_01_40" xml:space="preserve">
-    <value>13 or more numbers between &lt;span class="text-[#0BA01A] font-bold"&gt;01–40&lt;/span&gt; → SMALL wins</value>
+    <value>13 or more numbers between &lt;span class="text-[#0BA01A] font-bold"&gt;01–40&lt;/span&gt; → SMALL wins</value>
   </data>
   <data name="rule_prize_pool_title" xml:space="preserve">
     <value>PRIZE POOL</value>
@@ -1092,7 +1092,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Winning tickets receive 2x the bet amount.</value>
   </data>
   <data name="rule_example_bet_50" xml:space="preserve">
-    <value>Example: Bet 50 HTG → Win 100 HTG.</value>
+    <value>Example: Bet 50 HTG → Win 100 HTG.</value>
   </data>
   <data name="rule_how_result_determined" xml:space="preserve">
     <value>How the Winning Result is Determined</value>
@@ -1164,7 +1164,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Winning tickets receive 4x the bet amount.</value>
   </data>
   <data name="rule_example_bet_50_4x" xml:space="preserve">
-    <value>Example: Bet 50 HTG → Win 200 HTG.</value>
+    <value>Example: Bet 50 HTG → Win 200 HTG.</value>
   </data>
   <data name="rule_important_notes" xml:space="preserve">
     <value>Important Notes</value>
@@ -1209,10 +1209,10 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Classic Pick 10</value>
   </data>
   <data name="v2_big_small" xml:space="preserve">
-    <value>Big / Small</value>
+    <value>Big  Small</value>
   </data>
   <data name="v2_odd_even" xml:space="preserve">
-    <value>Odd / Even</value>
+    <value>Odd  Even</value>
   </data>
   <data name="v2_amount_played" xml:space="preserve">
     <value>Montan jwe</value>
@@ -1221,10 +1221,10 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Montan genyen</value>
   </data>
   <data name="v2_date_and_time" xml:space="preserve">
-    <value>Dat ak Lè</value>
+    <value>Dat ak Lè</value>
   </data>
   <data name="v2_game_locked" xml:space="preserve">
-    <value>Jwèt sa a fèmen kounye a.</value>
+    <value>Jwèt sa a fèmen kounye a.</value>
   </data>
   <data name="v2_updating_results" xml:space="preserve">
     <value>Rezilta yo ap mete ajou.</value>
@@ -1236,10 +1236,10 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Chwazi chif chans</value>
   </data>
   <data name="v2_add_more_ticket" xml:space="preserve">
-    <value>Ajoute plis tikè</value>
+    <value>Ajoute plis tikè</value>
   </data>
   <data name="v2_estimated_ticket_price" xml:space="preserve">
-    <value>Pri tikè estime</value>
+    <value>Pri tikè estime</value>
   </data>
   <data name="v2_payment" xml:space="preserve">
     <value>Peman</value>
@@ -1296,19 +1296,19 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Chwa ou</value>
   </data>
   <data name="v2_buy_ticket_label" xml:space="preserve">
-    <value>Achte tikè</value>
+    <value>Achte tikè</value>
   </data>
   <data name="v2_transfer" xml:space="preserve">
-    <value>Transfè</value>
+    <value>Transfè</value>
   </data>
   <data name="v2_choose_account" xml:space="preserve">
     <value>Chwazi kont la</value>
   </data>
   <data name="v2_sender_phone" xml:space="preserve">
-    <value>💸 Nimewo k'ap voye</value>
+    <value>💸 Nimewo k'ap voye</value>
   </data>
   <data name="v2_receiver_phone" xml:space="preserve">
-    <value>💰 Nimewo k'ap resevwa</value>
+    <value>💰 Nimewo k'ap resevwa</value>
   </data>
   <data name="v2_amount_htg" xml:space="preserve">
     <value>Montan (HTG)</value>
@@ -1361,4 +1361,76 @@ We’ll help you create an account in a few easy steps.</value>
   <data name="millionair" xml:space="preserve">
     <value>millionair</value>
   </data>
+  <data name="faq_v2_q4" xml:space="preserve">
+    <value>❓ How many matching numbers do I need to win a prize?</value>
+  </data>
+  <data name="faq_v2_a4" xml:space="preserve">
+    <value>The more numbers you match, the bigger your prize! &lt;br/&gt; In Classic Pick 10, your 10 selected numbers are compared with the 10 official result numbers. You win when you match 6 or more numbers — and even matching 0 numbers still gives you a reward!&lt;br/&gt;&lt;br/&gt; 🎯 Match 10 numbers → Win the Jackpot&lt;br/&gt; 🔥 Match 9 numbers → Win 12,000 HTG&lt;br/&gt; 💰 Match 8 numbers → Win 600 HTG&lt;br/&gt; ⭐ Match 7 numbers → Win 160 HTG&lt;br/&gt; 🎉 Match 6 numbers → Win 20 HTG&lt;br/&gt; 🎁 Match 0 numbers → Win 5 HTG&lt;br/&gt;&lt;br/&gt; Every ticket gives you a chance to win — even when luck surprises you!</value>
+  </data>
+  <data name="faq_v2_q5" xml:space="preserve">
+    <value>❓ How do I play the Big / Small game?</value>
+  </data>
+  <data name="faq_v2_a5" xml:space="preserve">
+    <value>Choose Big (41–80) or Small (01–40). Purchase your ticket before 20:00 and wait for the draw at 20:30.</value>
+  </data>
+  <data name="faq_v2_q6" xml:space="preserve">
+    <value>❓ How do I win in the Big / Small game?</value>
+  </data>
+  <data name="faq_v2_a6" xml:space="preserve">
+    <value>After 20 numbers are drawn, the system checks how many numbers fall within each range: &lt;br/&gt; - If 13 or more numbers are between 41–80, the result is BIG.&lt;br/&gt; - If 13 or more numbers are between 01–40, the result is SMALL.&lt;br/&gt;&lt;br/&gt; If your selected option matches the official result, you win.</value>
+  </data>
+  <data name="faq_v2_q7" xml:space="preserve">
+    <value>❓ How do I play the Odd / Even game?</value>
+  </data>
+  <data name="faq_v2_a7" xml:space="preserve">
+    <value>Choose Odd or Even. Purchase your ticket before 20:00 and wait for the draw at 20:30.</value>
+  </data>
+  <data name="faq_v2_q8" xml:space="preserve">
+    <value>❓ How do I win in the Odd / Even game?</value>
+  </data>
+  <data name="faq_v2_a8" xml:space="preserve">
+    <value>After 20 numbers are drawn, the system counts how many numbers are odd or even: &lt;br/&gt; - If 15 or more numbers are odd, the result is ODD.&lt;br/&gt; - If 15 or more numbers are even, the result is EVEN.&lt;br/&gt;&lt;br/&gt; If your selected option matches the official result, you win.</value>
+  </data>
+  <data name="pick10" xml:space="preserve">
+    <value>Pick 10</value>
+  </data>
+  <data name="bigsmall" xml:space="preserve">
+    <value>Big Small</value>
+  </data>
+  <data name="oddeven" xml:space="preserve">
+    <value>Odd Even</value>
+  </data>
+  <data name="Pick" xml:space="preserve">
+    <value>Pick</value>
+  </data>
+  <data name="Small" xml:space="preserve">
+    <value>Small</value>
+  </data>
+  <data name="Big" xml:space="preserve">
+    <value>Big</value>
+  </data>
+  <data name="Odd" xml:space="preserve">
+    <value>Odd</value>
+  </data>
+  <data name="Even" xml:space="preserve">
+    <value>Even</value>
+  </data>
+  <data name="Number_of_ticket" xml:space="preserve">
+    <value>Number of ticket</value>
+  </data>
+  <data name="next" xml:space="preserve">
+    <value>Next</value>
+  </data>
+  <data name="Pick_Number" xml:space="preserve">
+    <value>Pick Number</value>
+  </data>
+  <data name="total_payment" xml:space="preserve">
+    <value>Total Payment</value>
+  </data>
+  <data name="Minutes" xml:space="preserve">
+    <value>Minutes</value>
+  </data>
+  <data name="Secs" xml:space="preserve">
+    <value>Secs</value>
+  </data>
 </root>

website/LotteryWebApp.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
     <TargetFramework>net7.0</TargetFramework>

website/Models/AccountViewModel.cs

@@ -1,4 +1,4 @@
-namespace LotteryWebApp.Models
+namespace LotteryWebApp.Models
 {
     public class AccountIndex_ViewModel
     {
@@ -9,6 +9,7 @@
         public string code { get; set;}
         public string step { get; set; }
         public string message { get; set; }
+        public string phonenumber { get; set; }
     }
 
     public class AccountRegister_ViewModel

website/Views/Account/ChooseApp.cshtml

@@ -5,19 +5,33 @@
 @using LotteryWebApp.Languages;
 <style>
     /* Override the layout backgrounds */
-    body {
-        background: #2D0506 !important;
-        background-image: none !important;
+    html, body {
         margin: 0 !important;
         padding: 0 !important;
+        width: 100% !important;
+        height: 100% !important;
+        display: block !important; /* Neutralize template's flex centering */
+        overflow-x: hidden !important;
+        background: white !important;
     }
 
     .all-screen {
-        max-width: 393px !important;
+        width: 100% !important;
+        max-width: 100% !important; 
         background: #2D0506 !important;
         position: relative !important;
         overflow: hidden !important;
         height: 100dvh !important;
+        margin: 0 !important;
+        padding: 0 !important;
+    }
+
+    /* Chỉ giới hạn chiều rộng trên màn hình lớn (Tablet/Desktop) */
+    @@media (min-width: 600px) {
+        .all-screen {
+            max-width: 414px !important;
+            margin: 0 auto !important;
+        }
     }
 
     .float-button-navigator-back-to-app {
@@ -49,7 +63,7 @@
     /* Gradient fades the image into the dark background color */
     .ca-hero-overlay {
         position: absolute;
-        top: 0;
+        /* top: 0; */
         left: 0;
         right: 0;
         bottom: 0;
@@ -64,7 +78,7 @@
     /* Logo */
     .ca-logo-wrap {
         position: absolute;
-        top: 10px;
+        top: 60px; /* Moved down from 10px */
         left: 0;
         right: 0;
         z-index: 5;
@@ -79,15 +93,16 @@
 
     .ca-cards-section {
         position: absolute;
-        top: 58dvh;
-        bottom: 4dvh;
+        top: 66dvh; /* Moved up from 58dvh */
+        bottom: 2dvh;
         left: 20px;
         right: 20px;
         z-index: 10;
         display: flex;
         flex-direction: column;
-        justify-content: space-evenly;
+        justify-content: center; /* Changed from space-evenly */
         align-items: center;
+        gap: 15px; /* Added gap to keep them closer */
     }
 
     /* Card base */
@@ -112,12 +127,37 @@
     .ca-card-blue { background: #211ABF; }
     .ca-card-orange { background: linear-gradient(90deg, #FF921E 0%, #FF1E1E 100%); }
 
-    /* Translucent circles (decorative) */
-    .ca-deco-circle {
+    /* Premium Border & Highlights */
+    .ca-premium-border {
         position: absolute;
-        border-radius: 50%;
-        background: rgba(255, 255, 255, 0.07);
+        inset: 0;
+        border-radius: 12px;
+        border: 1.5px solid rgba(255, 255, 255, 0.3);
         pointer-events: none;
+        z-index: 20;
+    }
+    .ca-ellipse-left {
+        position: absolute;
+        left: -40px;
+        top: -60px;
+        width: 140px;
+        height: 140px;
+        pointer-events: none;
+        z-index: 10;
+        mix-blend-mode: screen;
+        opacity: 0.9;
+        transform: scaleY(-1);
+    }
+    .ca-ellipse-right {
+        position: absolute;
+        right: -30px;
+        top: -10px;
+        width: 130px;
+        height: 130px;
+        pointer-events: none;
+        z-index: 10;
+        mix-blend-mode: screen;
+        opacity: 0.8;
     }
 
     /* Left: game name + balls */
@@ -189,7 +229,7 @@
         z-index: 2;
         flex-shrink: 0;
         position: relative;
-        padding-top: 10px;
+        padding-top: -10px;
     }
     .ca-asset-img {
         object-fit: contain;
@@ -208,7 +248,7 @@
         padding: 5px 30px;
         font-family: 'Bricolage Grotesque', sans-serif !important;
         font-weight: 800 !important;
-        font-size: 12px;
+        font-size: 18px;
         color: #000 !important;
         text-decoration: none !important;
         text-transform: uppercase;
@@ -244,9 +284,9 @@
 
         <!-- BoLèt Lotto -->
         <a href="/Home" class="ca-game-card ca-card-blue">
-            <div class="ca-deco-circle" style="width:150px;height:150px;right:-35px;top:-35px;"></div>
-            <div class="ca-deco-circle" style="width:150px;height:150px;right:-15px;top:-15px;"></div>
-            <div class="ca-deco-circle" style="width:150px;height:150px;left:-65px;bottom:-85px;"></div>
+            <div class="ca-premium-border"></div>
+            <img src="/LotteryV2/img/decorations/ellipse_1183.png" class="ca-ellipse-left" alt="">
+            <img src="/LotteryV2/img/decorations/ellipse_1181.png" class="ca-ellipse-right" alt="">
 
             <div class="ca-dot" style="width:10px;height:10px;background:#CAF7FF;left:55%;top:28%;"></div>
             <div class="ca-dot" style="width:14px;height:14px;background:rgba(255,255,255,0.7);left:50%;top:0;"></div>
@@ -261,16 +301,16 @@
             </div>
 
             <div class="ca-right">
-                <img src="~/LotteryV2/img/ChooseApp/money_stack.png" class="ca-asset-img" style="width:65px;height:40px;" alt="" />
-                <span class="ca-play-btn">@Lang.play</span>
+                <img src="/LotteryV2/img/ChooseApp/money_stack.png" class="ca-asset-img" style="width:65px;height:40px;" alt="" />
+                <span class="ca-play-btn" style="padding: 4px 15px; font-size: 16px;">@Lang.play</span>
             </div>
         </a>
 
         <!-- MEGA Lotto -->
         <a href="/LotteryV2/Home" class="ca-game-card ca-card-orange">
-            <div class="ca-deco-circle" style="width:150px;height:150px;right:-35px;top:-35px;"></div>
-            <div class="ca-deco-circle" style="width:150px;height:150px;right:-15px;top:-15px;"></div>
-            <div class="ca-deco-circle" style="width:150px;height:150px;left:-65px;bottom:-85px;"></div>
+            <div class="ca-premium-border"></div>
+            <img src="/LotteryV2/img/decorations/ellipse_1183.png" class="ca-ellipse-left" alt="">
+            <img src="/LotteryV2/img/decorations/ellipse_1181.png" class="ca-ellipse-right" alt="">
 
             <div class="ca-dot" style="width:10px;height:10px;background:#FFD43D;left:48%;top:16px;"></div>
             <div class="ca-dot" style="width:14px;height:14px;background:rgba(255,255,255,0.7);left:54%;bottom:8px;"></div>
@@ -289,8 +329,8 @@
             </div>
 
             <div class="ca-right">
-                <img src="~/LotteryV2/img/ChooseApp/gold_bag.png" class="ca-asset-img" style="width:50px;height:50px;" alt="" />
-                <span class="ca-play-btn">@Lang.play</span>
+                <img src="/LotteryV2/img/ChooseApp/gold_bag.png" class="ca-asset-img" style="width:50px;height:50px;" alt="" />
+                <span class="ca-play-btn" style="padding: 4px 15px; font-size: 16px;">@Lang.play</span>
             </div>
         </a>
 

website/Views/Account/Login.cshtml

@@ -1,235 +1,396 @@
-@{
-    ViewData["Title"] = "Login";
-    Layout = "~/Views/Shared/_NothingLayout.cshtml";
-}
-
 @using LotteryWebApp.Languages;
 @using LotteryWebApp.Controllers;
 @using LotteryWebApp.Common;
+@model AccountLogin_ViewModel
 
+@{
+    ViewData["Title"] = "Login";
+    Layout = "~/Views/Shared/_NothingLayout.cshtml";
+}
 
-@model AccountLogin_ViewModel
 <style>
-    input {
-        font-size: 2em;
+    html, body {
+        margin: 0 !important;
+        padding: 0 !important;
+        width: 100% !important;
+        height: 100% !important;
+        display: block !important;
+        overflow-x: hidden !important;
+        background: #FDF9F0 !important; /* Desktop base */
+        font-family: 'Montserrat', sans-serif;
     }
 
-        input:placeholder-shown {
-            font-size: 1em !important;
+    /* Trên điện thoại, cho màu nền HTML & BODY trùng khớp với màu đỏ của nội dung */
+    @@media (max-width: 600px) {
+        html, body {
+            background: #EE0033 !important;
         }
-</style>
+    }
 
-@{
-    if(Model.message != null)
-    {
-        <script>
-            toastr.error('@Model.message');
-        </script>
+    .all-screen {
+        width: 100% !important;
+        display: block !important;
+        position: relative !important;
+        margin: 0 !important;
+        padding: 0 !important;
     }
-}
 
-<div class="app-content content">
-    @{
-        //if (Model.step == Constants.LOGIN_ENTER_OTP)
-        //{
-        //    <div class="card-title text-center ">
-        //        <div class="news-button-header-container" style="text-align: start; margin: 0 10px;">
-        //            @await Component.InvokeAsync("SmallHeader", new { title = @Lang.confirm_otp})
-        //        </div>
-        //    </div>
-        //}
+    .login-scaffold {
+        width: 100% !important;
+        width: 100vw !important; /* Ép lấy hết chiều rộng màn hình */
+        max-width: 100% !important;
+        min-height: 100dvh;
+        background: #EE0033 !important; /* Nội màu đỏ */
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 20px 20px 80px 20px; /* Increased bottom padding to prevent cut-off */
+        box-sizing: border-box;
+        position: relative;
+        margin: 0 auto;
     }
 
-    <div class="content-wrapper">
-        <div class="content-header row">
-        </div>
-        <div class="content-body">
-            <section class="flexbox-container">
-                <div class="col-12 align-items-center justify-content-center">
-                    <div class="">
-
-
-                        <div class="lottery-msisdn-box-container">
-
-                            @{
-                                if (Model.step == Constants.LOGIN_ENTER_MSISDN)
-                                {
-                                    <style>
-                                        input {
-                                            font-size: 16px;
-                                        }
-
-                                        input[type="text"]:focus,
-                                        input[type="number"]:focus,
-                                        input[type="email"]:focus,
-                                        input[type="tel"]:focus,
-                                        input[type="password"]:focus {
-                                            font-size: 16px;
-                                            }
-                                    </style>
-                                    <div class="card-header border-0 card-box">
-                                        <div class="card-title text-center ">
-                                            <div>
-                                                <div style="    margin-top: 50px;">
-                                                    <img class="logo-app logo-start" src="~/img/Group 83968 (1).png" />
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <fieldset class="form-group position-relative has-icon-left lottery-msisdn-container" style="    margin: 100px 30px 20px 30px;">
-                                        <input type="number" class="data-input-box form-control lottery-msisdn-input" id="phonenumber" style="border-radius: 5px;    padding-left: calc(4.75rem + 2px)"
-                                           placeholder="@Lang.enter_phone_number" name="phonenumber" required>
-
-                                        <div class="form-control-position lottery-msisdn-box">
-                                            <a href="#" class="">+509</a>
-                                        </div>
-                                    </fieldset>
-
-                                }
-                            }
-                            @{
-                                if (Model.step == Constants.LOGIN_ENTER_OTP)
-                                {
-
-                                    <div class="lottery-des-container">
-                                        <h2>@Lang.verify_otp</h2>
-                                        <h4>@Lang.enter_otp_to_login</h4>
-                                    </div>
-                                    <style>
-                                        input[type="text"]:focus,
-                                        input[type="number"]:focus,
-                                        input[type="email"]:focus,
-                                        input[type="tel"]:focus,
-                                        input[type="password"]:focus {
-                                            font-size: 25px;
-                                        }
-
-                                        [placeholder]:focus::-webkit-input-placeholder {
-                                            transition: opacity 0.5s 0.0s ease;
-                                            opacity: 0;
-                                        }
-                                    </style>
-                                    <div class="lottery-otp-container" style="    margin: 30px;  margin-right: 30px;">
-                                        <form action="/verify-otp" method="POST">
-                                            <input class="lottery-otp-box otp-box-0" pattern="\d{1}" inputmode="numeric" name="lottery-otp-box" size="1" autofocus="autofocus" type="text" required oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="1" />
-                                            <input class="lottery-otp-box otp-box-1" pattern="\d{1}" inputmode="numeric" name="lottery-otp-box" size="1" autofocus="autofocus" type="text" required oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="1" />
-                                            <input class="lottery-otp-box otp-box-2" pattern="\d{1}" inputmode="numeric" name="lottery-otp-box" size="1" autofocus="autofocus" type="text" required oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="1" />
-                                            <input class="lottery-otp-box otp-box-3" pattern="\d{1}" inputmode="numeric" name="lottery-otp-box" size="1" autofocus="autofocus" type="text" required oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="1" />
-                                        </form>
-                                    </div>
-                                    //<input type="text"
-                                    //   inputmode="numeric"
-                                    //   autocomplete="one-time-code"
-                                    //   pattern="\d{6}"
-                                    //   required>
-                                    <script>
-                                        var container = document.getElementsByClassName("lottery-otp-container")[0];
-                                        container.onkeyup = function(e) {
-                                            var target = e.srcElement;
-                                            var maxLength = parseInt(target.attributes["maxlength"].value, 10);
-                                            var myLength = target.value.length;
-                                            if (myLength >= maxLength) {
-                                                var next = target;
-                                                while (next = next.nextElementSibling) {
-                                                    if (next == null)
-                                                        break;
-                                                    if (next.tagName.toLowerCase() == "input") {
-                                                        next.focus();
-                                                        break;
-                                                    }
-                                                }
-                                            }
-                                        }
-
-
-                                          $(document).ready(function(){
-                                            $('body').on('keyup', 'input.lottery-otp-box', function(e){
-                                              var inputs = $('input.lottery-otp-box');
-
-                                              if(e.keyCode == 8){
-                                                var index = inputs.index(this);
-                                                if (index != 0)
-                                                    inputs.eq(index - 1).val('').focus();
-                                              }
-                                              else{
-                                              if($(this).val().length === this.size){
-                                                inputs.eq(inputs.index(this) + 1).focus();
-                                              }
-                                              }
-                                            });
-
-                                          });
-
-
-                                        if ('OTPCredential' in window) {
-                                            window.addEventListener('DOMContentLoaded', e => {
-                                            //const input = document.querySelector('input[autocomplete="one-time-code"]');
-                                            if (!input) return;
-                                            // Cancel the Web OTP API if the form is submitted manually.
-                                            const ac = new AbortController();
-                                            const form = input.closest('form');
-                                            if (form) {
-                                                form.addEventListener('submit', e => {
-                                                // Cancel the Web OTP API.
-                                                ac.abort();
-                                                });
-                                            }
-                                            // Invoke the Web OTP API
-                                            navigator.credentials.get({
-                                                otp: { transport:['sms'] },
-                                                signal: ac.signal
-                                            }).then(otp => {
-                                                //input.value = otp.code;
-                                                console.log("otp.code: " + otp.code);
-                                                const myArray = text.split("");
-                                                $(".otp-box-0").val(myArray[0]);
-                                                $(".otp-box-1").val(myArray[1]);
-                                                $(".otp-box-2").val(myArray[2]);
-                                                $(".otp-box-3").val(myArray[3]);
-                                                // Automatically submit the form when an OTP is obtained.
-                                                if (form) form.submit();
-                                            }).catch(err => {
-                                                console.log(err);
-                                            });
-                                            });
-                                        }
-                                    </script>
-                                }
-                            }
-                            <span class="text-danger"></span>
-
-                            <div style="margin: 10px 30px;">
-                                <button type="submit" class="btn btn-outline-primary btn-block login-button login-button-action"
-                                        onclick="@(Model.step == Constants.LOGIN_ENTER_MSISDN ? "loginRedirect_Click()" : "loginButtonAction_Click()")">
-                                    <i class="ft-unlock"></i>@(Model.step == null ? Lang.get_otp1.ToUpper() : Lang.confirm.ToUpper())
-                                </button>
-                            </div>
-
-                            @{
-                                if (Model.step == Constants.LOGIN_ENTER_OTP)
-                                {
-                                    <div style="text-align: center; margin-top: 30px;">
-                                        <h4 style="color:black;">@Lang.not_get_otp <a style="font-weight:900;" onclick="resentOTP_Action()">@Lang.resend_otp</a></h4>
-                                    </div>
-                                }
-                                else
-                                {
-                                    <div>
-                                        @await Component.InvokeAsync("FooterOutside", new { })
-                                    </div>
-                                }
-                            }
-
-
-                        </div>
-                    </div>
+    /* Chỉ giới hạn chiều rộng trên màn hình lớn (Tablet/Desktop) */
+    @@media (min-width: 600px) {
+        .login-scaffold {
+            max-width: 450px !important;
+            width: 450px !important;
+        }
+    }
+
+    /* Logo at top */
+    .logo-container {
+        margin-top: 15px;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+    }
+    .logo-container img {
+        width: 280px;
+        height: auto;
+    }
+
+    /* Form Area */
+    .form-container {
+        width: 100%;
+        max-width: 360px;
+        margin-top: 35px;
+        z-index: 10;
+    }
+
+    /* Phone Input: White with Gray Prefix */
+    .custom-phone-input {
+        background: #FFFFFF;
+        border: 2px solid #000000;
+        border-radius: 12px;
+        height: 56px;
+        display: flex;
+        overflow: hidden;
+        margin-bottom: 20px;
+        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+    }
+    .prefix-box {
+        background: #E8E8E8;
+        width: 25%;
+        min-width: 80px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 800;
+        font-size: 20px;
+        color: #000;
+        border-right: 2px solid #DDD;
+    }
+    .input-box {
+        flex: 1;
+        padding: 0 15px;
+    }
+    .phone-field {
+        width: 100%;
+        height: 100%;
+        border: none !important;
+        background: transparent !important;
+        outline: none !important;
+        font-weight: 700;
+        font-size: 20px;
+        color: #000 !important;
+        letter-spacing: 1px;
+    }
+
+    /* Remove Spinners from Number Input */
+    .phone-field::-webkit-inner-spin-button,
+    .phone-field::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+    .phone-field {
+        -moz-appearance: textfield;
+    }
+
+    /* Action Button - Gold */
+    .btn-submit-otp {
+        background: linear-gradient(180deg, #FBD94E 0%, #F5AE31 100%);
+        border: 1.5px solid #FFFFFF;
+        border-radius: 14px;
+        height: 56px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.15);
+        color: #000;
+        font-family: 'Bricolage Grotesque', sans-serif;
+        font-weight: 900;
+        font-size: 21px;
+        text-transform: none;
+        cursor: pointer;
+    }
+    .btn-submit-otp:disabled {
+        opacity: 0.5;
+        filter: grayscale(0.5);
+        cursor: not-allowed;
+    }
+
+    /* Illustration at bottom */
+    .illustration-footer {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        pointer-events: none;
+        margin-top: -10px;
+    }
+    .illustration-footer img {
+        width: 100%;
+        max-width: 420px;
+        height: auto;
+    }
+    @@media (max-width: 400px) {
+        .illustration-footer img {
+            max-width: 300px; /* Shrink illustration on very small screens */
+        }
+    }
+
+    /* Language Switcher Dark Red */
+    .lang-switcher-fixed {
+        margin-bottom: 40px; /* Increased bottom margin even more */
+        background: #D53018;
+        border-radius: 12px;
+        padding: 4px;
+        display: flex;
+        gap: 4px;
+        border: 2.5px solid #FFFFFF;
+    }
+    .lang-tab {
+        padding: 7px 16px;
+        border-radius: 10px;
+        color: rgba(255,255,255,0.8);
+        font-weight: 700;
+        font-size: 18px;
+        text-decoration: none !important;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    }
+    .lang-tab.active {
+        background: #420D09;
+        color: #FFF;
+        border: 1px solid #FFF;
+    }
+    .lang-tab img {
+        width: 18px;
+        height: auto;
+    }
+
+    /* OTP Inputs Inverted: White background again */
+    .otp-container {
+        display: flex;
+        justify-content: space-between;
+        gap: 10px;
+        margin-bottom: 25px;
+    }
+    .otp-input {
+        width: 60px;
+        height: 60px;
+        background: #800015; /* Màu đỏ đậm / Dark Maroon */
+        border: none;
+        border-radius: 12px; 
+        text-align: center;
+        font-size: 26px;
+        font-weight: 900;
+        color: #FFFFFF;
+        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+        outline: none;
+        transition: all 0.2s;
+    }
+    .otp-input:focus {
+        background: #420D09;
+        box-shadow: 0 0 0 2px #FFF;
+    }
+    .otp-input::placeholder {
+        color: rgba(255,255,255,0.5);
+    }
+
+    .error-text {
+        color: #FFD43D;
+        font-weight: 800;
+        font-size: 14px;
+        text-align: center;
+        margin-bottom: 15px;
+        min-height: 20px;
+    }
+
+    /* Center Toastr */
+    #toast-container {
+        top: 50% !important;
+        left: 50% !important;
+        transform: translate(-50%, -50%) !important;
+        right: auto !important;
+        bottom: auto !important;
+        position: fixed !important;
+        display: block !important;
+    }
+    #toast-container > .toast {
+        width: 300px !important;
+        text-align: center;
+        margin: 0 auto 12px auto !important;
+        float: none !important;
+    }
+</style>
+
+<script>
+    // Global toastr config for this page
+    toastr.options = {
+        "positionClass": "toast-top-center",
+        "showDuration": "300",
+        "hideDuration": "1000",
+        "timeOut": "5000",
+        "extendedTimeOut": "1000",
+        "showEasing": "swing",
+        "hideEasing": "linear",
+        "showMethod": "fadeIn",
+        "hideMethod": "fadeOut"
+    }
+</script>
+
+<div class="login-scaffold animate__animated animate__fadeIn">
+    
+    <!-- Logo -->
+    <div class="logo-container">
+        <img src="~/LotteryV2/img/ChooseApp/logo.png" alt="MEGA LOTO" />
+    </div>
+
+    <!-- Main Content -->
+    <div class="form-container">
+        
+        @if (Model.step == Constants.LOGIN_ENTER_MSISDN || Model.step == null)
+        {
+            <!-- Step 1 -->
+            <div class="custom-phone-input">
+                <div class="prefix-box">+509</div>
+                <div class="input-box">
+                    <input type="number" 
+                           id="phonenumber" 
+                           class="phone-field" 
+                           placeholder="888 999 888" 
+                           name="phonenumber" 
+                           required 
+                           autofocus>
                 </div>
-            </section>
+            </div>
+        }
+        else if (Model.step == Constants.LOGIN_ENTER_OTP)
+        {
+            <!-- Step 2 -->
+            <input type="hidden" id="phonenumber_hidden" value="@Model.phonenumber" />
+            <div style="text-align: center; color: white; margin-bottom: 20px;">
+                <h2 style="font-weight: 900; font-size: 22px;">@Lang.verify_otp</h2>
+                <p style="font-size: 14px; opacity: 0.8;">@Lang.enter_otp_to_login</p>
+            </div>
+
+            <form id="otpForm" action="/verify-otp" method="POST" class="otp-container">
+                <input class="otp-input otp-box-0" pattern="\d{1}" inputmode="numeric" name="lottery-otp-box" maxlength="1" placeholder="-" required autofocus />
+                <input class="otp-input otp-box-1" pattern="\d{1}" inputmode="numeric" name="lottery-otp-box" maxlength="1" placeholder="-" required />
+                <input class="otp-input otp-box-2" pattern="\d{1}" inputmode="numeric" name="lottery-otp-box" maxlength="1" placeholder="-" required />
+                <input class="otp-input otp-box-3" pattern="\d{1}" inputmode="numeric" name="lottery-otp-box" maxlength="1" placeholder="-" required />
+            </form>
+
+            <div style="text-align: center; margin-bottom: 20px;">
+                <span style="color:white; font-size: 13px;">@Lang.not_get_otp</span>
+                <a style="color:#FFD43D; font-weight:800; font-size: 14px; text-decoration: underline; cursor: pointer;" onclick="resentOTP_Action()">@Lang.resend_otp</a>
+            </div>
+        }
+
+        <div class="error-text">
+            @if(Model.message != null) {
+                <script>toastr.error('@Model.message');</script>
+                @Model.message
+            }
         </div>
+
+        <button type="button" 
+                id="btnLoginConfirm"
+                class="btn-submit-otp" 
+                @(Model.step == Constants.LOGIN_ENTER_OTP ? "disabled" : "")
+                onclick="@(Model.step == Constants.LOGIN_ENTER_MSISDN || Model.step == null ? "loginRedirect_Click()" : "loginButtonAction_Click()")">
+            @(Model.step == null || Model.step == Constants.LOGIN_ENTER_MSISDN ? Lang.get_otp1 : Lang.confirm)
+        </button>
+    </div>
+
+    <!-- Illustration at bottom -->
+    <div class="illustration-footer">
+        <img src="~/LotteryV2/img/top_banner1.png" alt="" />
     </div>
+
+    @if (Model.step != Constants.LOGIN_ENTER_OTP)
+    {
+        <!-- Language Footer -->
+        <div class="lang-switcher-fixed">
+            <a href="javascript:void(0)" onclick="changeLanguageAction('fr')" class="lang-tab @(ViewBag.Lang == "fr" ? "active" : "")">
+                <img src="~/img/en_flag.png" alt="" /> English
+            </a>
+            <a href="javascript:void(0)" onclick="changeLanguageAction('en')" class="lang-tab @(ViewBag.Lang == "en" || ViewBag.Lang == "fr" ? "active" : "")">
+                <img src="~/img/Flag_of_Haiti.png" alt="" /> Natcom
+            </a>
+        </div>
+    }
+
 </div>
 
+@if (Model.step == Constants.LOGIN_ENTER_OTP)
+{
+    <script>
+        $(document).ready(function() {
+            function checkOtpComplete() {
+                var filled = 0;
+                $('.otp-input').each(function() {
+                    if ($(this).val().length >= 1) filled++;
+                });
+                $('#btnLoginConfirm').prop('disabled', filled < 4);
+            }
+
+            $('.otp-input').on('keyup', function(e) {
+                var $this = $(this);
+                if (e.keyCode == 8) {
+                    if ($this.val().length === 0) {
+                        $this.prev('.otp-input').val('').focus();
+                    }
+                } else {
+                    if ($this.val().length >= 1) {
+                        $this.next('.otp-input').focus();
+                    }
+                }
+                checkOtpComplete();
+            });
+
+            $('.otp-input').on('input', function() {
+                checkOtpComplete();
+            });
+        });
+    </script>
+}
+
 @*<script type="text/javascript">
     function createAccountClick(message) {
     toastr.options.timeOut = 5000; // 1.5s

website/Views/Shared/_NothingLayout.cshtml

@@ -1,4 +1,4 @@
-@{
+@{
     Layout = null;
 }
 
@@ -8,11 +8,8 @@
 <!-- BEGIN: Head-->
 
 <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
-    @*<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">*@
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    @*<meta name="viewport" content="width=800" />*@
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
 
     <meta name="description" content="Stack admin is super flexible, powerful, clean &amp; modern responsive bootstrap 4 admin template with unlimited possibilities.">
     <meta name="keywords" content="admin template, stack admin template, dashboard template, flat admin template, responsive admin template, web app">
@@ -126,7 +123,7 @@
     </div>
 
     <!-- BEGIN: Content-->
-    <div class="all-screen" style="margin: 0 auto; position:relative; max-width:414px;">
+    <div class="all-screen">
         @RenderBody()
     </div>
 

website/wwwroot/LotteryV2/css/buy-ticket.css

@@ -42,11 +42,12 @@
 }
 
 .ball-filled {
-    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #ffcbd4 100%) !important;
-    border: 2px solid #EE0033 !important;
-    color: #333 !important;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
+    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #ff0f43 15%, #d1002c 100%) !important;
+    border: 1.5px solid #ffffff !important;
+    color: #ffffff !important;
+    box-shadow: 0 3px 8px rgba(238, 0, 51, 0.4), inset 0 -2px 4px rgba(0,0,0,0.2) !important;
     font-weight: 900 !important;
+    text-shadow: 0px 1px 2px rgba(0,0,0,0.2);
 }
 
 /* Custom scrollbar to match mobile feel */

website/wwwroot/LotteryV2/css/results.css

@@ -51,6 +51,21 @@
     font-size: 13px;
     font-weight: 700;
     color: #374151;
+    position: relative;
+    overflow: visible;
+}
+
+/* Ensure flatpickr calendar stays within container bounds */
+.date-pick-input .flatpickr-calendar {
+    left: 0 !important;
+    right: auto !important;
+    max-width: 300px;
+}
+
+/* For the second (right-side) date input, align calendar to the right */
+.date-pick-input:nth-child(2) .flatpickr-calendar {
+    left: auto !important;
+    right: 0 !important;
 }
 
 .btn-search-red {
@@ -219,3 +234,38 @@
 .flatpickr-weekday { background: #EE0033; color: rgba(255,255,255,0.9) !important; font-weight: 700; }
 .flatpickr-day.today { border-color: #EE0033 !important; }
 .flatpickr-day:hover { background: #ffebee !important; }
+
+/* Game Tab Bar */
+.game-tabs-container {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+.game-tabs-container::-webkit-scrollbar {
+    display: none;
+}
+
+.game-tab-btn {
+    padding: 7px 18px;
+    border-radius: 20px;
+    background: white;
+    color: #4B5563;
+    font-size: 13px;
+    font-weight: 800;
+    border: 1px solid #E5E7EB;
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
+    cursor: pointer;
+    flex-shrink: 0;
+}
+
+.game-tab-btn.active {
+    background: #EE0033;
+    color: white;
+    border-color: #EE0033;
+    box-shadow: 0 6px 12px rgba(238, 0, 51, 0.25);
+    transform: translateY(-1px);
+}
+
+.game-tab-btn:active {
+    transform: scale(0.95);
+}

website/wwwroot/LotteryV2/css/rule.css

@@ -3,7 +3,7 @@
     background-color: #EE0033;
     color: white;
     font-weight: bold;
-    font-size: 13px;
+    font-size: 16px;
     padding: 8px 12px;
     text-transform: uppercase;
     margin-top: 24px;
@@ -15,8 +15,8 @@
     grid-template-columns: 1.2fr 1fr;
     row-gap: 6px;
     column-gap: 12px;
-    font-size: 11px;
-    color: #212121;
+    font-size: 14px;
+    color: #000000;
     line-height: 1.4;
     padding: 0 12px;
 }
@@ -52,9 +52,10 @@
     width: 22px;
     height: 22px;
     border-radius: 50%;
-    border: 2px solid #16A34A; /* tailwind green-600 */
+    border: 2px solid #16A34A;
+    /* tailwind green-600 */
     background-color: white;
-    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -77,7 +78,7 @@
 }
 
 .bullet-list li {
-    font-size: 11px;
+    font-size: 13px;
     color: #212121;
     margin-bottom: 6px;
     list-style-type: none;
@@ -93,3 +94,29 @@
     top: 0;
     font-weight: bold;
 }
+
+/* Custom Styled Scrollbar */
+.custom-scrollbar::-webkit-scrollbar {
+    width: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+    background: #E5E5E5;
+    border-radius: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+    background: #FF8A00;
+    /* Orange thumb to match design */
+    border-radius: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: #FF6B00;
+}
+
+/* For Firefox */
+.custom-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: #FF8A00 #E5E5E5;
+}

website/wwwroot/LotteryV2/css/site.css

@@ -1,8 +1,11 @@
 /* Custom styles for LotteryV2 */
 body.lottery-v2-bg {
-    background: linear-gradient(135deg, #1A1A2E 0%, #16213E 100%);
+    background: white !important;
+    /* Changed from dark gradient to brand red */
     color: #fff;
     min-height: 100vh;
+    margin: 0;
+    padding: 0;
 }
 
 .lottery-v2-container {
@@ -33,13 +36,15 @@ body.lottery-v2-bg {
 
 /* Figma Layout Styles for Home */
 body {
-    background-color: #D31D28 !important;
+    background-color: white !important;
     /* Full red support from figma nodes fills */
     font-family: 'Montserrat', sans-serif;
 }
 
 .main-container {
-    max-width: 414px;
+    width: 100% !important;
+    max-width: 100% !important;
+    /* Mặc định tràn viền cho di động */
     margin: 0 auto;
     background-color: #D31D28;
     min-height: 100vh;
@@ -47,6 +52,12 @@ body {
     overflow-x: hidden;
 }
 
+@media (min-width: 600px) {
+    .main-container {
+        max-width: 414px !important;
+    }
+}
+
 .glass-header {
     background: transparent;
 }
@@ -67,15 +78,20 @@ body {
 }
 
 /* Hide Scrollbar for fully immersive mobile wrapper view */
-html, body, .main-container {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
+html,
+body,
+.main-container {
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
 }
 
-html::-webkit-scrollbar, 
-body::-webkit-scrollbar, 
+html::-webkit-scrollbar,
+body::-webkit-scrollbar,
 .main-container::-webkit-scrollbar {
-    display: none; /* Chrome, Safari & Opera */
+    display: none;
+    /* Chrome, Safari & Opera */
 }
 
 .card-shadow {
@@ -144,6 +160,7 @@ body::-webkit-scrollbar,
 .animate-slide-up {
     animation: slide-up 2s ease-in-out infinite;
 }
+
 /* Global Loading Overlay */
 #loading-overlay {
     position: fixed;
@@ -167,21 +184,23 @@ body::-webkit-scrollbar,
     border-radius: 50%;
     border-top-color: #fff;
     animation: spin 0.8s linear infinite;
-    box-shadow: 0 0 20px rgba(0,0,0,0.1);
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
 }
 
 @keyframes spin {
-    to { transform: rotate(360deg); }
+    to {
+        transform: rotate(360deg);
+    }
 }
 
 /* Hide Spinners for input number */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-input[type=number] {
-  appearance: textfield;
-  -moz-appearance: textfield;
+    -webkit-appearance: none;
+    margin: 0;
 }
 
+input[type=number] {
+    appearance: textfield;
+    -moz-appearance: textfield;
+}

website/wwwroot/js/function.js

@@ -1291,7 +1291,7 @@ function getUserTicketData(winType, gameId, seqpage) {
     });
 }
 
-function getOTPButton_Click() {
+function getOTPButton_Click(phonenumber) {
     console.log("Get OTP");
     let subDomain = $("#subDomain").val();
 
@@ -1303,13 +1303,14 @@ function getOTPButton_Click() {
         headers: { 'RequestVerificationToken': $('input[name=__RequestVerificationToken]').val() },
         data: {
             "__RequestVerificationToken": $('input[name=__RequestVerificationToken]').val(),
+            phonenumber: phonenumber
         },
         success: function (data) {
             stopLoading();
             if (data.code == success) {
                 // redirect to success 
                 //toastr.error(data.message);
-                window.location.href = subDomain + "/Account/Login?step=2";
+                window.location.href = subDomain + "/Account/Login?step=2&phonenumber=" + phonenumber;
             } else if (data.code == session_expired) {
                 window.location.href = subDomain + '/Account/Login';
             } else {
@@ -1327,9 +1328,9 @@ function getOTPButton_Click() {
 
 function resentOTP_Action() {
 
-    console.log("Get OTP");
+    console.log("Resent OTP");
     let subDomain = $("#subDomain").val();
-    //let phonenumber = $("#phonenumber").val();
+    let phonenumber = $("#phonenumber_hidden").val();
 
     let otpUrl = subDomain + '/Account/ForgotPassword_Action'
     startLoading();
@@ -1339,6 +1340,7 @@ function resentOTP_Action() {
         headers: { 'RequestVerificationToken': $('input[name=__RequestVerificationToken]').val() },
         data: {
             "__RequestVerificationToken": $('input[name=__RequestVerificationToken]').val(),
+            phonenumber: phonenumber
         },
         success: function (data) {
             stopLoading();
@@ -1456,7 +1458,7 @@ function loginRedirect_Click() {
             if (data.code == success) {
                 // redirect to success 
                 // get otp
-                getOTPButton_Click();
+                getOTPButton_Click(phonenumber);
 
             } else {
                 toastr.error(data.message);