no message

website/Areas/LotteryV2/Controllers/HomeController.cs

@@ -412,7 +412,7 @@ namespace LotteryWebApp.Areas.LotteryV2.Controllers
                 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");
+                string fromFormatted = fromDate != null ? fromDate : DateTime.Now.AddDays(-2).ToString("yyyy-MM-dd");
                 string toFormatted = toDate != null ? toDate : DateTime.Now.ToString("yyyy-MM-dd");
 
                 model.fromDate = fromFormatted;
@@ -458,7 +458,7 @@ namespace LotteryWebApp.Areas.LotteryV2.Controllers
                var token = HttpContext.Session.GetComplexData<string>("token");
                 if (string.IsNullOrEmpty(token)) return Json(new { status = "error", message = "Session expired" });
 
-                string fromFormatted = fromDate != null ? fromDate : DateTime.Now.AddDays(-7).ToString("yyyy-MM-dd");
+                string fromFormatted = fromDate != null ? fromDate : DateTime.Now.AddDays(-2).ToString("yyyy-MM-dd");
                 string toFormatted = toDate != null ? toDate : DateTime.Now.ToString("yyyy-MM-dd");
 
                 model.termType = termType;
@@ -496,6 +496,61 @@ namespace LotteryWebApp.Areas.LotteryV2.Controllers
             return PartialView("_TermResultHistoryV2", model);
         }
 
+        public IActionResult TermResultHistoryGrouped(string fromDate, string toDate)
+        {
+            try
+            {
+                var token = HttpContext.Session.GetComplexData<string>("token");
+                if (string.IsNullOrEmpty(token)) return Json(new { status = "error", message = "Session expired" });
+
+                string fromFormatted = fromDate != null ? fromDate : DateTime.Now.AddDays(-2).ToString("yyyy-MM-dd");
+                string toFormatted = toDate != null ? toDate : DateTime.Now.ToString("yyyy-MM-dd");
+
+                string[] gameIds = { Constants.PIC10_BASIC_CODE, Constants.PIC10_BIGSMALL_CODE, Constants.PIC10_ODDEVEN_CODE };
+                var allTerms = new List<Term>();
+
+                foreach (var gid in gameIds)
+                {
+                    ResultOfTermRequest request = new ResultOfTermRequest
+                    {
+                        gameId = gid,
+                        token = token,
+                        type = Constants.TERM_HAS_RESULT_TYPE,
+                        order = Constants.DECS,
+                        fromDate = DateTime.ParseExact(fromFormatted, "yyyy-MM-dd", CultureInfo.InvariantCulture).ToString("dd/MM/yyyy"),
+                        toDate = DateTime.ParseExact(toFormatted, "yyyy-MM-dd", CultureInfo.InvariantCulture).ToString("dd/MM/yyyy"),
+                        rowsOnPage = "50", 
+                        seqPage = "1",
+                        id = Constants.ALL_DATA
+                    };
+
+                    ResultOfTermResponse result = api.GetResultOfTermApi(configuration, request);
+                    if (result.responseCode == Code.SUCCESS && result.listTerm != null)
+                    {
+                        allTerms.AddRange(result.listTerm);
+                    }
+                }
+
+                // Group by date part of date_random
+                var grouped = allTerms.GroupBy(x => {
+                    DateTime dt;
+                    if (DateTime.TryParse(x.date_random, out dt))
+                        return dt.Date;
+                    return DateTime.MinValue;
+                })
+                .Where(g => g.Key != DateTime.MinValue)
+                .OrderByDescending(g => g.Key)
+                .ToList();
+
+                return PartialView("_TermResultHistoryGrouped", grouped);
+            }
+            catch (Exception ex)
+            {
+                log.Error(ex);
+                return PartialView("_TermResultHistoryGrouped", new List<IGrouping<DateTime, Term>>());
+            }
+        }
+
         public IActionResult History(string termType, string status, string seqPage)
         {
             UserTicketHistoryModel model = new UserTicketHistoryModel();

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

@@ -53,9 +53,9 @@
                     @for(int r=0; r<5; r++) {
                         var resTitle = isBigSmall ? (r % 2 == 0 ? "Big" : "Small") : (r % 2 == 0 ? "Odd" : "Even");
                         var resColor = isBigSmall ? (resTitle == "Big" ? "#A2FF00" : "#FF4157") : (resTitle == "Odd" ? "#FFC700" : "#B33BD0");
-                        <div class="flex flex-col items-center justify-center min-h-[56px] flex-1 rounded-lg py-1.5 border border-gray-200" style="background: linear-gradient(136deg, #FFFAE6 0%, #FFE588 100%);">
-                            <span class="text-[10px] font-bold text-black whitespace-nowrap opacity-70">Mar @(16+r)</span>
-                            <span class="text-[18px] font-black leading-tight" style="-webkit-text-stroke: 0.5px #000; color: @resColor;">@resTitle</span>
+                        <div class="flex flex-col items-center justify-center min-h-[64px] flex-1 rounded-lg py-1.5 border border-gray-200" style="background: linear-gradient(136deg, #FFFAE6 0%, #FFE588 100%);">
+                            <span class="text-[11px] font-bold text-black whitespace-nowrap opacity-70">Mar @(16+r)</span>
+                            <span class="text-[22px] font-black leading-tight" style="-webkit-text-stroke: 0.5px #000; color: @resColor;">@resTitle</span>
                         </div>
                     }
                 </div>
@@ -71,7 +71,7 @@
                     <div class="flex flex-col items-center pt-4 pb-3 px-3 relative z-10 h-full justify-between">
                         <div class="flex flex-col items-center w-full">
                             <div class="h-[34px] flex items-center justify-center">
-                                <div class="text-[30px] font-[800] leading-none" style="-webkit-text-stroke: 1px #000; text-shadow: 1px 2px 2px rgba(0,0,0,0.15); color: @(isBigSmall ? "#A2FF00" : "#FFC700");">@(isBigSmall ? "Big" : "Odd")</div>
+                                <div class="text-[40px] font-[800] leading-none" style="-webkit-text-stroke: 1px #000; text-shadow: 1px 2px 2px rgba(0,0,0,0.15); color: @(isBigSmall ? "#A2FF00" : "#FFC700");">@(isBigSmall ? "Big" : "Odd")</div>
                             </div>
                             <div class="text-[11px] font-medium text-gray-500 mt-1 h-[28px] text-center leading-tight">
                                 @(isBigSmall ? "13 number from" : "Odd numbers") <br/> <b>@(isBigSmall ? "41-80" : "1, 3, 5, 7, 9")</b>
@@ -99,7 +99,7 @@
                     <div class="flex flex-col items-center pt-4 pb-3 px-3 relative z-10 h-full justify-between">
                         <div class="flex flex-col items-center w-full">
                             <div class="h-[34px] flex items-center justify-center">
-                                <div class="text-[22px] font-[800] leading-none italic" style="-webkit-text-stroke: 1px #000; text-shadow: 1px 2px 2px rgba(0,0,0,0.15); color: @(isBigSmall ? "#FF4157" : "#B33BD0");">@(isBigSmall ? "Small" : "Even")</div>
+                                <div class="text-[40px] font-[800] leading-none italic" style="-webkit-text-stroke: 1px #000; text-shadow: 1px 2px 2px rgba(0,0,0,0.15); color: @(isBigSmall ? "#FF4157" : "#B33BD0");">@(isBigSmall ? "Small" : "Even")</div>
                             </div>
                             <div class="text-[11px] font-medium text-gray-500 mt-1 h-[28px] text-center leading-tight">
                                 @(isBigSmall ? "13 number from" : "Even numbers") <br/> <b>@(isBigSmall ? "01-40" : "0, 2, 4, 6, 8")</b>
@@ -125,11 +125,11 @@
             <!-- You Choose + Prize Section -->
             <div class="px-5 pt-6 flex flex-col items-center gap-4">
                 <div class="flex flex-col items-center">
-                    <span class="text-[12px] font-medium text-gray-500">@Lang.v2_you_choose</span>
-                    <span id="choiceDisplay" class="text-[32px] font-[800] leading-tight" style="-webkit-text-stroke: 1px #000;">—</span>
+                    <span class="text-[15px] font-medium text-black">@Lang.v2_you_choose</span>
+                    <span id="choiceDisplay" class="text-[42px] font-[800] leading-tight" style="-webkit-text-stroke: 1px #000;">—</span>
                 </div>
                 <div class="flex flex-col items-center">
-                    <span class="text-[12px] font-medium text-gray-500">@Lang.v2_prize_if_win</span>
+                    <span class="text-[18px] font-medium text-black">@Lang.v2_prize_if_win</span>
                     <div class="flex items-baseline gap-1">
                         <span class="text-[28px] font-black text-black">@prizeAmount</span>
                         <span class="text-[14px] font-black text-[#E56B23]">HTG</span>
@@ -142,9 +142,13 @@
         <div class="p-4 bg-white border-t border-gray-200 z-[70] shadow-[0px_-4px_10px_rgba(0,0,0,0.03)] absolute bottom-0 w-full left-0">
             <div class="flex items-center justify-between">
                 <div class="flex flex-col">
-                    <span class="text-[12px] text-gray-500 font-bold uppercase">@Lang.v2_estimated_ticket_price</span>
+                    <div class="flex items-center gap-1.5 mb-0.5">
+                        <span class="text-[11px] text-black font-black uppercase">@Lang.total_ticket:</span>
+                        <span id="bsTotalTicketCount" class="text-[12px] font-black text-black">0</span>
+                    </div>
+                    <span class="text-[11px] text-black font-black uppercase">@Lang.v2_estimated_ticket_price</span>
                     <div class="flex items-baseline gap-1">
-                        <span id="bsTotalPrice" class="text-[28px] font-black text-black">50</span>
+                        <span id="bsTotalPrice" class="text-[28px] font-black text-black">0</span>
                         <span class="text-[13px] font-black" style="color: @themeColor">HTG</span>
                     </div>
                 </div>
@@ -191,7 +195,7 @@ else
                 <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>
+                <div class="absolute left-2 top-4 w-9 h-9 rounded-full border-[3px] border-white flex items-center justify-center text-white font-black text-sm shadow-md ticket-index">@i</div>
                 <div class="flex flex-col gap-1 pl-8">
                     <span class="text-[16px] font-extrabold text-[#333]">@Lang.v2_select_10_lucky_numbers</span>
                     <div class="flex items-start gap-4">
@@ -231,7 +235,11 @@ else
     <div class="p-4 bg-white border-t border-gray-200 z-[70] shadow-[0px_-4px_10px_rgba(0,0,0,0.03)]">
         <div class="flex items-center justify-between">
             <div class="flex flex-col">
-                <span class="text-[12px] text-gray-500 font-bold uppercase">@Lang.v2_estimated_ticket_price</span>
+                <div class="flex items-center gap-1.5 mb-0.5">
+                    <span class="text-[11px] text-black font-black uppercase">@Lang.total_ticket:</span>
+                    <span id="totalTicketCount" class="text-[12px] font-black text-black">0</span>
+                </div>
+                <span class="text-[11px] text-black font-black uppercase">@Lang.v2_estimated_ticket_price</span>
                 <div class="flex items-baseline gap-1">
                     <span id="totalPrice" class="text-[28px] font-black text-black">0</span>
                     <span class="text-[13px] font-black text-[#EE0033]">HTG</span>
@@ -247,7 +255,7 @@ else
 
 <!-- Order Summary Screen (from Figma) -->
 <div id="orderSummaryModal" class="hidden fixed inset-0 z-[150] bg-black/60 flex items-center justify-center p-0 font-bricolage backdrop-blur-[2px]">
-    <div class="w-full max-w-[414px] h-full bg-white flex flex-col animate__animated animate__fadeInRight animate__faster border-x shadow-2xl relative">
+    <div class="w-full h-full bg-white flex flex-col animate__animated animate__fadeInRight animate__faster shadow-2xl relative lg:max-w-[414px]">
         <!-- Header đồng bộ tuyệt đối -->
         <div class="w-full bg-[#EE0033] py-3 px-4 text-white flex items-center justify-between sticky top-0 z-[60]">
             <button onclick="hideOrderSummary()" class="w-10 h-10 flex items-center justify-center -ml-2 rounded-full active:bg-white/20 transition-all">
@@ -300,11 +308,11 @@ else
             <!-- Totals Section -->
             <div class="mt-10 px-2 space-y-2">
                  <div class="flex justify-between items-center">
-                     <span class="text-[14px] font-bold text-gray-400">@Lang.total_ticket</span>
+                     <span class="text-[14px] font-bold text-black">@Lang.total_ticket</span>
                      <span id="summaryTotalCount" class="text-[16px] font-black text-black">0</span>
                  </div>
                  <div class="flex justify-between items-center">
-                     <span class="text-[14px] font-bold text-gray-400">@Lang.total_money</span>
+                     <span class="text-[14px] font-bold text-black">@Lang.total_money</span>
                      <div class="flex items-baseline gap-1">
                          <span id="summaryTotalAmount" class="text-[32px] font-black text-black">0</span>
                          <span class="text-[16px] font-black text-[#EE0033]">HTG</span>
@@ -358,7 +366,7 @@ else
                     
                     <!-- Shield Icon: mix-blend-mode multiply to remove the white square background -->
                     <div class="relative w-full flex justify-center mb-0 mt-1">
-                        <img src="/LotteryV2/img/modal/otp_shield.png" alt="Success" class="w-[90px] object-contain" style="mix-blend-mode: multiply;">
+                        <img src="/LotteryV2/img/modal/otp_shield.png" alt="Success" class="w-[90px] object-contain">
                     </div>
         
                     <!-- Info Rows (Aligned exactly like screenshot) -->
@@ -706,6 +714,7 @@ else
             });
             const pricePerTicket = @(Model.termType == Constants.PIC10_BASIC_CODE ? "10" : "50");
             $("#totalPrice").text(filledTickets * pricePerTicket);
+            $("#totalTicketCount").text(filledTickets);
         }
 
         function addNewTicket() {
@@ -723,7 +732,7 @@ else
                     <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>
+                    <div class="absolute left-2 top-4 w-9 h-9 rounded-full border-[3px] border-white flex items-center justify-center text-white font-black text-sm shadow-md ticket-index">${currentIndex}</div>
                     <div class="flex flex-col gap-1 pl-8">
                         <span class="text-[16px] font-extrabold text-[#333]">@Lang.v2_select_10_lucky_numbers</span>
                         <div class="flex items-start gap-4">
@@ -858,7 +867,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%, #ffffff 0%, #ff0f43 15%, #d1002c 100%); border: 1px solid #ffffff;">${n.trim()}</div>`;
+                        numbersBalls += `<div class="w-7 h-7 rounded-full flex items-center justify-center text-white text-[11px] font-black shadow-[0_4px_10px_rgba(186,15,33,0.3)]" style="background: linear-gradient(135deg, #FF3D63 0%, #E3132D 60%, #BA0F21 100%); border: 1px solid rgba(255, 255, 255, 0.3); text-shadow: 0px 1px 2px rgba(0,0,0,0.1); transition: transform 0.2s;">${n.trim()}</div>`;
                     });
                     contentHtml = `<div class="grid grid-cols-5 gap-y-2 relative z-10 px-2 justify-items-center">${numbersBalls}</div>`;
                 } else {
@@ -875,10 +884,10 @@ else
                              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">
+                        <div class="w-24 shrink-0 bg-white border border-gray-200 rounded-2xl p-2.5 flex items-center justify-center shadow-sm">
                             <div class="flex items-baseline gap-0.5">
-                                <span class="text-[16px] font-black text-black">${t.money}</span>
-                                <span class="text-[10px] font-black text-[#EE0033]">HTG</span>
+                                <span class="text-[20px] font-black text-black">${t.money}</span>
+                                <span class="text-[12px] font-black text-[#EE0033]">HTG</span>
                             </div>
                         </div>
                     </div>
@@ -1031,10 +1040,12 @@ else
             });
         }
 
-        function showReceiptSuccess(transId, amount, phone) {
+        function showReceiptSuccess(transId, amount, phone, totalTickets, drawDate) {
             // Setup data dynamically
             $("#receiptAmount").text(amount + " HTG");
             if(phone) $("#receiptPhone").text(phone);
+            if(totalTickets) $("#receiptTotalTickets").text(totalTickets);
+            if(drawDate) $("#receiptDrawDate").text(drawDate);
             
             let gameTypeStr = "@Model.termType";
             let displayName = "Basic Pick 10";
@@ -1091,7 +1102,7 @@ else
                     
                     if (res.responseCode === "0" || res.responseCode === "0000") {
                         // Success: Show receipt Modal
-                        showReceiptSuccess(res.orderId || currentTransId, $("#summaryTotalAmount").text(), "@(Model.userStatus?.msisdn ?? "-")");
+                        showReceiptSuccess(res.orderId || currentTransId, $("#summaryTotalAmount").text(), "@(Model.userStatus?.msisdn ?? "-")", $("#summaryTotalCount").text(), "@(currentTerm?.date_random ?? "-")");
                     } else {
                         // showNotification(res.responseMessage || "Payment failed", "warning");
                         // As requested: show error on OTP modal instead of whole page notification
@@ -1195,6 +1206,8 @@ else
                     choiceDisplay.style.webkitTextStroke = '1px #000';
                 }
             }
+            $("#bsTotalTicketCount").text(1);
+            $("#bsTotalPrice").text(50);
         }
 
         function bsShowPayment(e) {
@@ -1262,8 +1275,7 @@ else
     <!-- Beautiful Success Receipt Modal (Matches Figma 161:3722) -->
     <div id="receiptSuccessModal" class="fixed inset-0 z-[300] bg-black/80 hidden items-center justify-center px-4 font-bricolage backdrop-blur-md">
         <div class="w-full max-w-[360px] bg-[#F9F9F9] rounded-[32px] overflow-hidden flex flex-col items-center px-6 pt-4 pb-5 shadow-2xl relative animate__animated animate__zoomIn animate__faster border border-white/50">
-            <!-- Confetti/Celebration background effect (Subtle) -->
-            <div class="absolute top-0 inset-x-0 h-[150px] pointer-events-none opacity-40 mix-blend-multiply" style="background: url('/LotteryV2/img/modal/otp_glitter.png') no-repeat top center; background-size: cover;"></div>
+            <!-- Confetti/Celebration background effect (Subtle removed) -->
             
             <h2 class="text-[#534A4A] font-[800] text-[19px] tracking-tight relative z-10 w-full text-center mt-1">@Lang.v2_payment_successfully</h2>
             
@@ -1277,10 +1289,9 @@ 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_of_ticket</span>
+                <span class="text-[#534A4A] font-bold text-[14px]">@Lang.phone_number</span>
                 <span class="font-black text-[14px] text-gray-800" id="receiptPhone">-</span>
             </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.v2_your_choice</span>
                 <span class="text-[#EE0033] font-[900] text-[15px] uppercase" id="receiptChoice">-</span>
@@ -1290,7 +1301,14 @@ else
                 <span class="text-[#534A4A] font-bold text-[14px]">@Lang.ticket_code</span>
                 <span class="font-black text-[13px] text-gray-800" id="receiptTicketCode">#</span>
             </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.total_ticket</span>
+                <span class="font-black text-[14px] text-gray-800" id="receiptTotalTickets">-</span>
+            </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.v2_draw_date</span>
+                <span class="font-black text-[14px] text-gray-800" id="receiptDrawDate">-</span>
+            </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.total_payment</span>
                 <span class="text-[#EE0033] font-[900] text-[15px]" id="receiptAmount">0 HTG</span>

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

@@ -65,7 +65,7 @@
              </div>
         </div>
 
-        <!-- Q4: Classic Pick 10 Prizes -->
+        <!-- Q4: BASIC 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>

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

@@ -49,7 +49,7 @@
         <!-- 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">
+        <div class="flex items-center justify-between px-4 pt-7 relative z-10">
              <!-- Left: Draw Date -->
              <div class="flex items-center gap-1 flex-1 min-w-0">
                  <div class="w-8 h-8 flex-shrink-0">
@@ -99,7 +99,7 @@
 
             <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">
+                <div class="col-span-3 flex items-center h-full -ml-2 relative">
                     <!-- Text Layout -->
                     <div class="flex flex-col items-center leading-[0.85] relative z-10 font-UTM_Futura_Extra">
                         <span class="text-white font-[900] text-[16px] drop-shadow-md">@Lang.Basic</span>
@@ -150,7 +150,7 @@
 
             <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">
+                <div class="col-span-3 flex items-center h-full -ml-2 relative">
                     <!-- Text Layout -->
                     <div class="flex flex-col items-center leading-[0.85] relative z-10 font-UTM_Futura_Extra">
                         <span class="text-white font-[900] text-[16px] drop-shadow-md">@Lang.Small</span>
@@ -201,7 +201,7 @@
 
             <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">
+                <div class="col-span-3 flex items-center h-full -ml-2 relative">
                     <!-- Text Layout -->
                     <div class="flex flex-col items-center leading-[0.85] relative z-10 font-UTM_Futura_Extra">
                         <span class="text-white font-[900] text-[16px] drop-shadow-md">@Lang.Odd</span>
@@ -215,7 +215,7 @@
                     </div>
 
                     <!-- Balls Overlapping -->
-                    <div class="relative w-[60px] h-[60px] flex-shrink-0 -ml-18 -mt-1 aspect-square z-20">
+                    <div class="relative w-[60px] h-[60px] flex-shrink-0 -ml-6 -mt-2 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">
@@ -250,7 +250,7 @@
     </div>
 
     <!-- Banner Info Section centered red text bar -->
-    <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="fixed bottom-[82px] left-1/2 -translate-x-1/2 w-full min-[600px]: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>

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

@@ -16,8 +16,8 @@
 }
 
 <div class="main-container results-container animate__animated animate__fadeIn pb-40 relative">
-    <!-- Header Group: Fixed at Top -->
-    <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 Group: Static at Top -->
+    <div class="w-full z-[100] bg-[#F3F4F6] pb-2 shadow-md">
         <!-- Header -->
         <div class="results-top-header">
             <a href="/LotteryV2/Home/GameHome" class="back-btn">
@@ -49,23 +49,11 @@
         </div>
     </div>
 
-    <!-- Spacer to push content down below fixed header (~160px) -->
-    <div class="h-[160px]"></div>
-
     <!-- Ticket List Container -->
     <div id="history-list-container" class="history-items-list px-4 mt-2">
         <partial name="_TermUserTicketHistory" model="Model" />
     </div>
 
-    <!-- Pagination (Optional but good to have if supported) -->
-    @if (Model.totalPage != null && int.Parse(Model.totalPage) > 1) {
-        <div class="flex justify-center gap-4 pb-40">
-             <button onclick="changePage(currentSeqPage - 1)" class="p-2 px-4 bg-white rounded-lg shadow-sm font-bold text-gray-500 disabled:opacity-30" id="prevPage">Prev</button>
-             <span class="p-2 font-bold text-[#EE0033]" id="pageDisplay">@Model.seqPage / @Model.totalPage</span>
-             <button onclick="changePage(currentSeqPage + 1)" class="p-2 px-4 bg-white rounded-lg shadow-sm font-bold text-gray-500 disabled:opacity-30" id="nextPage">Next</button>
-        </div>
-    }
-
     <!-- Shared Bottom Navbar -->
     <partial name="_BottomNavbar" />
 </div>
@@ -128,13 +116,144 @@
             const nextBtn = document.getElementById("nextPage");
             
             if (pageDisplay) {
-                // Total pages might have changed after filter
-                // We'd need to get it from the partial view or another API call
-                // For now, assume it's stable or handled by the server
                 pageDisplay.innerText = `${currentSeqPage} / ${totalPages}`;
             }
             if (prevBtn) prevBtn.disabled = currentSeqPage <= 1;
             if (nextBtn) nextBtn.disabled = currentSeqPage >= totalPages;
         }
+
+        function showTicketDetail(billCode, money, moneyWin, date, channel, payMethod, ticketCode, gameId, drawTime, ticketId) {
+            document.getElementById('detailBillCode').innerText = '#' + (billCode || '-');
+            document.getElementById('detailTicketCode').innerText = '#' + (ticketId || '-');
+            document.getElementById('detailMoney').innerText = (money || '0') + ' HTG';
+            document.getElementById('detailMoneyWin').innerText = (moneyWin || '0') + ' HTG';
+            document.getElementById('detailDate').innerText = date || '-';
+            document.getElementById('detailDrawTime').innerText = drawTime || '-';
+            document.getElementById('detailChannel').innerText = channel || 'App';
+            
+            // Logic for Game Name and Color
+            let gameName = "@Lang.v2_classic_pick_10";
+            let gameColor = "#EE0033"; // Red
+            
+            if (gameId === "31") {
+                gameName = "@Lang.v2_big_small";
+                gameColor = "#00A3FF"; // Blue
+            } else if (gameId === "32") {
+                gameName = "@Lang.v2_odd_even";
+                gameColor = "#9333EA"; // Purple
+            }
+            
+            const gameEl = document.getElementById('detailGameName');
+            gameEl.innerText = gameName;
+            gameEl.style.color = gameColor;
+
+            let payMethodText = "Main Account";
+            if(payMethod == "1") payMethodText = "Wallet";
+            else if(payMethod == "0") payMethodText = "Main Account";
+
+            document.getElementById('detailPaymentMethod').innerText = payMethodText;
+
+            // Render Numbers
+            const container = document.getElementById('detailBallsContainer');
+            container.innerHTML = '';
+            if (ticketCode) {
+                const balls = ticketCode.split(/[;,]/).filter(x => x.trim() !== '');
+                balls.forEach(val => {
+                    let ballVal = val.trim();
+                    let displayVal = ballVal;
+                    let isLabel = false;
+                    switch(ballVal.toUpperCase()) {
+                        case 'B': displayVal = 'Big'; isLabel = true; break;
+                        case 'S': displayVal = 'Small'; isLabel = true; break;
+                        case 'O': displayVal = 'Odd'; isLabel = true; break;
+                        case 'E': displayVal = 'Even'; isLabel = true; break;
+                    }
+
+                    const div = document.createElement('div');
+                    if (isLabel) {
+                        div.className = "bg-[#EE0033] text-white px-4 py-1 rounded-full font-black text-[12px] shadow-sm uppercase tracking-wider";
+                    } else {
+                        div.className = "w-8 h-8 rounded-full flex items-center justify-center text-white text-[12px] font-black shadow-md";
+                        div.style.background = "linear-gradient(135deg, #FF3D63 0%, #E3132D 60%, #BA0F21 100%)";
+                        div.style.border = "1px solid rgba(255, 255, 255, 0.3)";
+                    }
+                    div.innerText = displayVal;
+                    container.appendChild(div);
+                });
+            }
+            
+            const modal = document.getElementById('ticketDetailModal');
+            modal.classList.remove('hidden');
+            modal.classList.add('flex');
+        }
+
+        function closeDetailModal() {
+            const modal = document.getElementById('ticketDetailModal');
+            modal.classList.add('hidden');
+            modal.classList.remove('flex');
+        }
     </script>
 }
+
+<!-- Ticket Detail Modal -->
+<div id="ticketDetailModal" class="fixed inset-0 z-[200] bg-black/60 hidden items-center justify-center p-4 font-bricolage backdrop-blur-sm">
+    <div class="w-full max-w-[380px] bg-white rounded-[28px] overflow-hidden flex flex-col items-center px-6 py-8 shadow-2xl relative animate__animated animate__zoomIn animate__faster">
+        <button onclick="closeDetailModal()" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors">
+            <i class="fas fa-times text-xl"></i>
+        </button>
+        
+        <div class="w-20 h-20 bg-gray-50 rounded-full flex items-center justify-center mb-4">
+            <i class="fas fa-receipt text-3xl text-[#EE0033]"></i>
+        </div>
+        
+        <h2 class="text-[20px] font-black text-gray-800 mb-2 uppercase tracking-tight">@Lang.v2_ticket_detail</h2>
+        
+        <!-- Ticket Numbers Display -->
+        <div id="detailBallsContainer" class="flex flex-wrap justify-center gap-2 mb-6 mt-2 max-w-full">
+            <!-- Dynamic balls here -->
+        </div>
+
+        <div class="w-full space-y-4">
+            <div class="flex justify-between items-center text-sm border-b border-gray-50 pb-2">
+                <span class="text-gray-400 font-bold uppercase text-[11px]">@Lang.v2_game</span>
+                <span id="detailGameName" class="font-black">Pick 10</span>
+            </div>
+            <div class="flex justify-between items-center text-sm border-b border-gray-50 pb-2">
+                <span class="text-gray-400 font-bold uppercase text-[11px]">@Lang.v2_bill_code</span>
+                <span id="detailBillCode" class="font-black text-gray-800">#</span>
+            </div>
+            <div class="flex justify-between items-center text-sm border-b border-gray-50 pb-2">
+                <span class="text-gray-400 font-bold uppercase text-[11px]">@Lang.v2_ticket_code</span>
+                <span id="detailTicketCode" class="font-black text-gray-800">#</span>
+            </div>
+            <div class="flex justify-between items-center text-sm border-b border-gray-50 pb-2">
+                <span class="text-gray-400 font-bold uppercase text-[11px]">@Lang.v2_money_ticket</span>
+                <span id="detailMoney" class="font-black text-gray-800">0 HTG</span>
+            </div>
+            <div class="flex justify-between items-center text-sm border-b border-gray-50 pb-2">
+                <span class="text-gray-400 font-bold uppercase text-[11px]">@Lang.v2_money_win</span>
+                <span id="detailMoneyWin" class="font-black text-[#0A9800]">0 HTG</span>
+            </div>
+            <div class="flex justify-between items-center text-sm border-b border-gray-50 pb-2">
+                <span class="text-gray-400 font-bold uppercase text-[11px]">@Lang.v2_purchase_date</span>
+                <span id="detailDate" class="font-black text-gray-800">-</span>
+            </div>
+            <div class="flex justify-between items-center text-sm border-b border-gray-50 pb-2">
+                <span class="text-gray-400 font-bold uppercase text-[11px]">@Lang.v2_draw_date</span>
+                <span id="detailDrawTime" class="font-black text-gray-800">-</span>
+            </div>
+            <div class="flex justify-between items-center text-sm border-b border-gray-50 pb-2">
+                <span class="text-gray-400 font-bold uppercase text-[11px]">@Lang.v2_channel</span>
+                <span id="detailChannel" class="font-black text-gray-800">-</span>
+            </div>
+            <div class="flex justify-between items-center text-sm border-b border-gray-50 pb-2">
+                <span class="text-gray-400 font-bold uppercase text-[11px]">@Lang.v2_payment_method</span>
+                <span id="detailPaymentMethod" class="font-black text-gray-800">-</span>
+            </div>
+        </div>
+        
+        <button onclick="closeDetailModal()" class="w-full bg-[#EE0033] text-white font-black text-[16px] py-3.5 rounded-2xl shadow-lg mt-8 active:scale-95 transition-all uppercase tracking-widest">
+            @Lang.v2_close
+        </button>
+    </div>
+</div>

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

@@ -3,6 +3,14 @@
     ViewData["Title"] = "LotteryV2 - Results History";
     Layout = "~/Areas/LotteryV2/Views/Shared/_Layout.cshtml";
     ViewData["ActiveTab"] = "Results";
+
+    // Default to last 3 days if not specified
+    if (string.IsNullOrEmpty(Model.fromDate)) {
+        Model.fromDate = DateTime.Now.AddDays(-2).ToString("yyyy-MM-dd");
+    }
+    if (string.IsNullOrEmpty(Model.toDate)) {
+        Model.toDate = DateTime.Now.ToString("yyyy-MM-dd");
+    }
 }
 @using LotteryWebApp.Languages;
 @using LotteryWebApp.Common;
@@ -18,9 +26,9 @@
     <link rel="stylesheet" href="/LotteryV2/css/results.css" />
 }
 
-<div class="main-container results-container animate__animated animate__fadeIn pb-40 relative">
-    <!-- Header Group: Fixed at Top -->
-    <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">
+<div class="main-container results-container animate__animated animate__fadeIn pb-40 relative mx-auto max-w-[414px] shadow-2xl min-h-screen bg-white">
+    <!-- Header Group: Sticky at Top -->
+    <div class="sticky top-0 w-full 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">
@@ -30,7 +38,7 @@
         </div>
 
         <!-- Selection Bar: Side-by-side dates and search -->
-        <div class="selection-bar bg-white/50 backdrop-blur-sm px-4 pt-4 pb-2">
+        <div class="selection-bar bg-white/50 backdrop-blur-sm px-4 pt-2 pb-2">
             <div class="flex gap-3">
                 <div class="date-pick-input flex-1 cursor-pointer relative bg-white border border-gray-200 rounded-lg p-2 flex items-center gap-2">
                     <img src="/LotteryV2/img/icon_calendar.svg" class="w-5 h-5" />
@@ -49,88 +57,63 @@
         </div>
 
         <!-- Red Separator Line -->
-        <div class="px-4 mt-2 mb-2">
+        <div class="px-4 mt-1">
             <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">
-                <div class="flex-1 bg-white rounded-xl py-2 text-center text-[11px] font-black text-gray-800 shadow-sm border border-gray-100">
-                    @Lang.time
-                </div>
-                <div class="flex-[2] bg-white rounded-xl py-2 text-center text-[11px] font-black text-[#EE0033] shadow-sm border border-gray-100">
-                    @Lang.results
-                </div>
-            </div>
-        </div>
     </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]">
-        <partial name="_TermResultHistoryV2" model="Model" />
+        <!-- Content will be loaded via JS for all 3 games -->
+        <div class="flex flex-col items-center justify-center py-20 text-gray-400">
+             <i class="fas fa-circle-notch fa-spin text-3xl mb-2"></i>
+             <span>Loading results...</span>
+        </div>
     </div>
 
     <!-- Bottom Promo Bar (Matches Bottom message with yellow text) -->
-    <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="fixed bottom-[82px] left-1/2 -translate-x-1/2 w-full min-[600px]: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>
-             <!-- Row 2 -->
-             <div class="text-[18px] font-black text-[#FBF3A7] mt-0.5">
-                  @Lang.jackpot_today_htg
-             </div>
+              <div class="opacity-90">@Lang.have_chance_to_get</div>
+              <div class="text-[18px] font-black text-[#FBF3A7] mt-0.5">@Lang.jackpot_today_htg</div>
          </div>
     </div>
 
     <!-- Shared Bottom Navbar -->
-    <partial name="_BottomNavbar" />
+    <div class="fixed bottom-0 left-0 w-full z-50">
+         <div class="mx-auto max-w-[414px]">
+             <partial name="_BottomNavbar" />
+         </div>
+    </div>
 </div>
 
 @section Scripts {
     <script>
+        const gameConfigs = [
+            { code: '@Constants.PIC10_BASIC_CODE', name: '@Lang.rule_classic_pick_10', color: '#EE0033' },
+            { code: '@Constants.PIC10_BIGSMALL_CODE', name: '@Lang.bigsmall', color: '#26A31E' },
+            { code: '@Constants.PIC10_ODDEVEN_CODE', name: '@Lang.oddeven', color: '#B529E9' }
+        ];
 
         function initBrandedFlatpickr(selector, yearStart, yearEnd) {
             const inputEl = document.querySelector(selector);
             const wrapper = inputEl.closest('.date-pick-input');
             
             flatpickr(selector, {
-                dateFormat: "Y-m-d", // Actual value used for search
+                dateFormat: "Y-m-d",
                 altInput: true,
-                altFormat: "M d, Y", // Premium display format
+                altFormat: "M d, Y",
                 altInputClass: "bg-transparent border-none outline-none font-bold text-[13px] w-full ml-1 cursor-pointer",
                 disableMobile: true,
                 monthSelectorType: "dropdown",
                 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");
                         yearSelect.className = "flatpickr-monthDropdown-months cur-year-select";
                         yearSelect.style.cssText = "appearance:none; font-weight:800; border:none; background:transparent; color:white; cursor:pointer; margin-left:4px; outline:none; font-family:inherit; font-size:inherit;";
-
                         for (let y = yearEnd; y >= yearStart; y--) {
                             const opt = document.createElement("option");
                             opt.value = y;
@@ -139,17 +122,11 @@
                             if (y === instance.currentYear) opt.selected = true;
                             yearSelect.appendChild(opt);
                         }
-
                         yearSelect.addEventListener("change", function () {
                             instance.changeYear(parseInt(this.value));
                         });
-
                         yearInput.style.display = "none";
                         yearInput.parentNode.appendChild(yearSelect);
-                        
-                        instance.set("onChange", function(d, s, i) {
-                            yearSelect.value = i.currentYear;
-                        });
                     }
                 }
             });
@@ -158,60 +135,42 @@
         document.addEventListener('DOMContentLoaded', function() {
             initBrandedFlatpickr("#fromDate", 2020, 2030);
             initBrandedFlatpickr("#toDate", 2020, 2030);
+            triggerSearch(); // Initial load for all games
         });
 
-        function triggerSearch() {
+        async function triggerSearch() {
             const fromDate = document.getElementById("fromDate").value;
             const toDate = document.getElementById("toDate").value;
-            const termType = document.getElementById("currentTermType").value;
             const btn = document.getElementById("btnSearch");
             const container = document.getElementById("results-list-container");
 
-            // UI Feedback: Loading state
             btn.disabled = true;
             btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
-            container.style.opacity = "0.5";
-
-            // AJAX Call to TermResultHistory
-            fetch(subDomain + `/LotteryV2/Home/TermResultHistory?termType=${termType}&fromDate=${fromDate}&toDate=${toDate}`)
-                .then(response => response.text())
-                .then(html => {
+            container.style.opacity = "0.7";
+
+            try {
+                // Call the new grouped endpoint
+                const response = await fetch(`${subDomain}/LotteryV2/Home/TermResultHistoryGrouped?fromDate=${fromDate}&toDate=${toDate}`);
+                const html = await response.text();
+                
+                if (html.trim() === "") {
+                    container.innerHTML = `
+                        <div class="w-full py-20 flex flex-col items-center justify-center text-gray-400 opacity-60">
+                            <i class="fas fa-search text-5xl mb-4"></i>
+                            <p class="font-bold">@Lang.no_results_found</p>
+                        </div>
+                    `;
+                } else {
                     container.innerHTML = html;
-                    container.style.opacity = "1";
-                    btn.disabled = false;
-                    btn.innerHTML = '<i class="fas fa-search"></i>';
-                })
-                .catch(error => {
-                    container.style.opacity = "1";
-                    btn.disabled = false;
-                    btn.innerHTML = '<i class="fas fa-search"></i>';
-                    alert('Error fetching draw results. Please try again.');
-                });
-        }
-
-        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 => {
-                b.style.color = '#1F2937';
-                b.style.border = 'none';
-                b.classList.remove('active');
-            });
-            el.style.color = '#EE0033';
-            el.style.border = '1.5px solid #EE0033';
-            el.classList.add('active');
+                }
+            } catch (error) {
+                console.error("Error loading grouped results:", error);
+                container.innerHTML = `<div class="text-center py-10 text-red-500 font-bold">Error loading results. Please try again.</div>`;
+            }
+
+            container.style.opacity = "1";
+            btn.disabled = false;
+            btn.innerHTML = '<i class="fas fa-search"></i>';
         }
     </script>
 }

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

@@ -465,7 +465,7 @@
                     <li>@Html.Raw(Lang.rule_example_bet_50_4x)</li>
                 </ul>
         
-                <div class="rule-section-title mt-4">
+                <!-- <div class="rule-section-title mt-4">
                     <span class="icon">&#9670;</span> @Lang.rule_important_notes
                 </div>
                 <ul class="bullet-list pb-8">
@@ -477,7 +477,7 @@
                     <li>@Lang.rule_payment_shortly</li>
                     <li>@Lang.rule_payment_later</li>
                     <li>@Lang.rule_system_time</li>
-                </ul>
+                </ul> -->
             </div>
         </div> <!-- End max-width wrapper -->
     </div> <!-- End Scroll Container -->

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

@@ -12,11 +12,23 @@
     .animate-float {
         animation: float 4s ease-in-out infinite;
     }
+    .btn-premium {
+        border: 2px solid #ffffff !important;
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .btn-premium:active {
+        transform: scale(0.95);
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    }
+    .btn-premium-red {
+        background: linear-gradient(135deg, #EE0033 0%, #cc002c 100%);
+    }
 </style>
 
 <div class="main-container animate__animated animate__fadeIn bg-[#EAEAEA] min-h-screen font-bricolage overflow-x-hidden">
     <!-- Standardized Header (Matches Profile/Rules) -->
-    <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="sticky top-0 w-full bg-[#EE0033] h-[52px] flex items-center justify-between px-4 z-[100] shadow-sm">
         <!-- Back Button -->
         <button onclick="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">
             <i class="fa-solid fa-arrow-left text-[20px]"></i>
@@ -27,10 +39,7 @@
         </div>
     </div>
 
-    <!-- Header Spacer (52px) -->
-    <div class="h-[52px]"></div>
-
-    <div class="pt-[20px] px-4 pb-24 max-w-[420px] mx-auto">
+    <div class="pt-[20px] px-4 pb-24 max-w-[414px] mx-auto">
         <!-- 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) -->
@@ -64,21 +73,27 @@
         <div class="mb-6">
             <h2 class="text-[#534A4A] font-[900] text-[18px] mb-3 pl-1">@Lang.v2_choose_account</h2>
             <div class="flex gap-3">
-                <!-- Basic Account Option (Selected by default) -->
-                <div class="flex-1 bg-white h-[76px] rounded-[18px] border-2 border-[#EE0033] shadow-md flex items-center px-3 gap-2 cursor-pointer relative">
-                    <!-- Selected Icon -->
-                    <div class="absolute -top-2 -right-1 bg-white rounded-full">
-                        <i class="fa-solid fa-circle-check text-[#00AF1B] text-[20px]"></i>
-                    </div>
-                    <span class="text-[#EE0033] font-[900] text-[15px] leading-tight flex-1">@Lang.Basic<br />@Lang.Account</span>
-                    <img src="/LotteryV2/img/transfer_basic_icon.png" alt="Basic" class="w-12 h-10 object-contain" />
+            <!-- Basic Account Option -->
+            <div id="selectBasic" onclick="selectChannel(1)" class="channel-card flex-1 bg-white h-[76px] rounded-[18px] border-2 border-[#EE0033] shadow-md flex items-center px-3 gap-2 cursor-pointer relative">
+                <!-- Selected Icon -->
+                <div class="check-icon absolute -top-2 -right-1 bg-white rounded-full">
+                    <i class="fa-solid fa-circle-check text-[#00AF1B] text-[20px]"></i>
+                </div>
+                <span class="text-[#EE0033] font-[900] text-[15px] leading-tight flex-1">@Lang.Basic<br />@Lang.Account</span>
+                <img src="/LotteryV2/img/transfer_basic_icon.png" alt="Basic" class="w-12 h-10 object-contain" />
+            </div>
+            <!-- Natcash Card -->
+            <div id="selectNatcash" onclick="selectChannel(2)" class="channel-card flex-1 bg-white h-[76px] rounded-[18px] border border-gray-100 shadow-sm flex items-center px-3 gap-2 cursor-pointer relative overflow-visible">
+                <!-- Selected Icon (Hidden by default) -->
+                <div class="check-icon absolute -top-2 -right-1 bg-white rounded-full hidden">
+                    <i class="fa-solid fa-circle-check text-[#00AF1B] text-[20px]"></i>
                 </div>
-                <!-- Natcash Card (Disabled/Dimmed as requested) -->
-                <div class="flex-1 bg-white h-[76px] rounded-[18px] border border-gray-100 shadow-sm flex items-center justify-center grayscale opacity-50 cursor-not-allowed overflow-hidden">
+                <div class="flex-1 overflow-hidden h-full flex items-center">
                     <img src="/LotteryV2/img/transfer_other_card.png" alt="Natcash" class="w-full h-full object-contain" />
                 </div>
             </div>
         </div>
+        </div>
 
         <!-- Form Fields Area -->
         <div class="flex flex-col gap-2">
@@ -113,17 +128,17 @@
                 </div>
                 <!-- Shortcut Buttons -->
                 <div class="flex gap-2 mt-1">
-                    <button onclick="setAmount(10, this)" class="amt-btn flex-1 py-1.5 border border-gray-300 rounded-lg text-[14px] font-black transition-all bg-white text-[#534A4A] flex items-center justify-center gap-1">
+                    <button onclick="setAmount(10, this)" class="amt-btn flex-1 py-1.5 border border-gray-300 rounded-lg text-[14px] font-black transition-all bg-white text-[#534A4A] flex items-center justify-center gap-1 shadow-sm">
                         10
                         <i class="fa-solid fa-circle-check text-[#00AF1B] text-[14px] hidden"></i>
                     </button>
-                    <button onclick="setAmount(1000, this)" class="amt-btn flex-1 py-1.5 border border-gray-300 rounded-lg text-[14px] font-black transition-all bg-white text-[#534A4A] flex items-center justify-center gap-1">
+                    <button onclick="setAmount(1000, this)" class="amt-btn flex-1 py-1.5 border border-gray-300 rounded-lg text-[14px] font-black transition-all bg-white text-[#534A4A] flex items-center justify-center gap-1 shadow-sm">
                         1.000
                         <i class="fa-solid fa-circle-check text-[#00AF1B] text-[14px] hidden"></i>
                     </button>
-                    <button id="defaultAmt" onclick="setAmount(5000, this)" class="amt-btn flex-1 py-1.5 border-2 border-[#EE0033] bg-[#FEE2E2] rounded-lg text-[14px] font-black text-[#EE0033] transition-all flex items-center justify-center gap-1">
+                    <button id="defaultAmt" onclick="setAmount(5000, this)" class="amt-btn flex-1 py-1.5 border-2 border-white bg-[#EE0033] rounded-lg text-[14px] font-black text-white transition-all flex items-center justify-center gap-1 shadow-md">
                         5.000
-                        <i class="fa-solid fa-circle-check text-[#00AF1B] text-[14px]"></i>
+                        <i class="fa-solid fa-circle-check text-white text-[14px]"></i>
                     </button>
                 </div>
 
@@ -137,7 +152,7 @@
 
         <!-- Main Action Button -->
         <div class="mt-6">
-            <button id="btnContinue" class="w-full bg-[#EE0033] text-white font-[900] text-[18px] py-[18px] rounded-[22px] shadow-[0_8px_25px_rgba(238,0,51,0.3)] active:scale-95 transition-all uppercase tracking-wide">
+            <button id="btnContinue" class="btn-premium btn-premium-red w-full text-white font-[900] text-[18px] py-[18px] rounded-[22px] active:scale-95 transition-all uppercase tracking-wide">
                 @Lang.v2_continue
             </button>
         </div>
@@ -192,7 +207,7 @@
                     <span id="successTime" class="text-[#534A4A] font-medium text-[14px] text-right">08/01/2022 - 10:00:20</span>
                 </div>
 
-                <button onclick="window.location.href='/LotteryV2/Home/GameHome'" class="w-full bg-[#EE0033] text-white font-[800] text-[20px] py-[14px] rounded-[14px] shadow-lg active:scale-95 transition-all">
+                <button onclick="window.location.href='/LotteryV2/Home/GameHome'" class="btn-premium btn-premium-red w-full text-white font-[800] text-[20px] py-[14px] rounded-[18px] active:scale-95 transition-all">
                     @Lang.back_to_homepage
                 </button>
             </div>
@@ -213,7 +228,7 @@
                 </p>
             </div>
             <div class="w-full mt-auto">
-                <button onclick="closeFailureModal()" class="w-full bg-[#EE0033] text-white font-[800] text-[20px] py-[10px] rounded-[12px] shadow-[0px_3px_8px_rgba(0,0,0,0.25)] hover:bg-red-700 active:scale-95 transition-all">
+                <button onclick="closeFailureModal()" class="btn-premium btn-premium-red w-full text-white font-[800] text-[20px] py-[10px] rounded-[14px] active:scale-95 transition-all">
                     @Lang.try_again
                 </button>
             </div>
@@ -282,8 +297,8 @@
                 
                 <!-- 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" 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>
+                    <button onclick="closeOtpModal()" class="btn-premium flex-1 bg-[#757575] text-white font-[900] py-2.5 rounded-[16px] active:scale-95 transition-all text-[13px]">@Lang.cancel</button>
+                    <button id="btnConfirmTransfer" disabled class="btn-premium flex-1 bg-[#0A9800] text-white font-[900] py-2.5 rounded-[16px] active:scale-95 transition-all text-[13px] disabled:opacity-50 disabled:grayscale disabled:cursor-not-allowed">@Lang.confirm</button>
                 </div>
             </div>
         </div>
@@ -300,17 +315,35 @@
             $("#transferAmount").val(val);
             
             // Update active state visuals
-            $(".amt-btn").removeClass("border-2 border-[#EE0033] bg-[#FEE2E2] text-[#EE0033]").addClass("border-gray-300 bg-white text-[#534A4A]");
-            $(".amt-btn i").addClass("hidden"); // hide all check icons
+            $(".amt-btn").removeClass("border-2 border-white bg-[#EE0033] text-white shadow-md").addClass("border-gray-300 bg-white text-[#534A4A] shadow-sm");
+            $(".amt-btn i").addClass("hidden").removeClass("text-white").addClass("text-[#00AF1B]"); // reset icons
             
-            $(el).removeClass("border-gray-300 bg-white text-[#534A4A]").addClass("border-2 border-[#EE0033] bg-[#FEE2E2] text-[#EE0033]");
-            $(el).find("i").removeClass("hidden"); // show current check icon
+            $(el).removeClass("border-gray-300 bg-white text-[#534A4A] shadow-sm").addClass("border-2 border-white bg-[#EE0033] text-white shadow-md");
+            $(el).find("i").removeClass("hidden").removeClass("text-[#00AF1B]").addClass("text-white"); // show current check icon in white
         }
 
         // Logic removed as fields are read-only
 
         let timerInterval;
-        let isProcessing = false; // Global lock to prevent double-submit
+        let isProcessing = false;
+        let selectedChannel = 1; // 1 = Basic, 2 = Natcash
+
+        function selectChannel(id) {
+            selectedChannel = id;
+            
+            // Reset both
+            $(".channel-card").removeClass("border-2 border-[#EE0033] shadow-md").addClass("border border-gray-100 shadow-sm");
+            $(".channel-card .check-icon").addClass("hidden");
+            
+            // Activate selected
+            if (id === 1) {
+                $("#selectBasic").removeClass("border-gray-100 shadow-sm").addClass("border-2 border-[#EE0033] shadow-md");
+                $("#selectBasic .check-icon").removeClass("hidden");
+            } else {
+                $("#selectNatcash").removeClass("border-gray-100 shadow-sm").addClass("border-2 border-[#EE0033] shadow-md");
+                $("#selectNatcash .check-icon").removeClass("hidden");
+            }
+        }
 
         $("#btnContinue").on("click", function() {
             if (isProcessing) return; // Prevent double-click
@@ -339,7 +372,7 @@
             $.ajax({
                 url: subDomain + "/LotteryV2/Home/SendOTP",
                 type: "POST",
-                data: { phone: phone, amount: amount },
+                data: { phone: phone, amount: amount, channelPayment: selectedChannel },
                 success: function(res) {
                     $btn.prop('disabled', false).html(originalText);
                     isProcessing = false;
@@ -395,8 +428,8 @@
             $(".otp-digit").each(function() { if ($(this).val().length >= 1) filled++; });
             $("#btnConfirmTransfer").prop('disabled', filled < 6);
 
-            // Clear error when typing
-            $("#otpError").addClass("hidden").text("");
+            // Clear error when typing and reset color to red
+            $("#otpError").addClass("hidden").text("").removeClass("text-[#0A9800]").addClass("text-[#EE0033] animate__shakeX");
         }
 
         // OTP backspace: move to previous input
@@ -441,12 +474,12 @@
                 type: 'POST',
                 success: function(data) {
                     $btn.prop('disabled', false).text(originalText);
-                    if (data.responseCode === "0") {
+                    if (data.responseCode === "0" || data.responseCode === 0) {
                         resetTimer();
-                        $("#otpError").addClass("hidden").text("");
+                        $("#otpError").removeClass("text-[#EE0033] animate__shakeX").addClass("text-[#0A9800]").text("@Lang.v2_otp_sent_successfully").removeClass("hidden");
                         $(".otp-digit").val("").first().focus();
                     } else {
-                        $("#otpError").text(data.responseMessage || "Failed to resend OTP").removeClass("hidden");
+                        $("#otpError").removeClass("text-[#0A9800]").addClass("text-[#EE0033] animate__shakeX").text(data.responseMessage || "Failed to resend OTP").removeClass("hidden");
                     }
                 },
                 error: function() {
@@ -480,7 +513,8 @@
                 data: {
                     otp: otp,
                     phone: $("#receiverPhone").val(),
-                    amount: $("#transferAmount").val()
+                    amount: $("#transferAmount").val(),
+                    channelPayment: selectedChannel
                 },
                 success: function(res) {
                     $btn.prop('disabled', false).html(originalText);

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

@@ -0,0 +1,140 @@
+@using LotteryWebApp.Service
+@using LotteryWebApp.Languages
+@using System.Linq
+@model List<IGrouping<DateTime, Term>>
+
+@if (Model != null && Model.Count > 0)
+{
+    foreach (var group in Model)
+    {
+        var drawDate = group.Key;
+        
+        <div class="result-card-premium animate__animated animate__fadeInUp mb-6 overflow-hidden bg-white rounded-2xl shadow-sm border border-gray-100">
+            <!-- Simplified Header -->
+            <div class="bg-gray-50/50 px-4 py-2.5 border-b border-gray-100 flex items-center justify-between">
+                <div class="flex items-center gap-2">
+                    <i class="fas fa-trophy text-[#EE0033] text-[12px]"></i>
+                    <span class="text-[11px] font-black text-gray-500 uppercase tracking-widest">@Lang.results</span>
+                </div>
+                <div class="flex items-center gap-1.5">
+                    <div class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></div>
+                    <span class="text-[9px] font-bold text-gray-400 uppercase">Live Update</span>
+                </div>
+            </div>
+
+            <!-- Games Container -->
+            <div class="p-4 space-y-4">
+                <!-- Date/Time Info Row (Consolidated for all games on this date) -->
+                <div class="flex items-center gap-3 mb-6 bg-gray-50/50 p-3 rounded-2xl border border-gray-100/80 shadow-xs">
+                    <div class="w-12 h-12 flex flex-col items-center justify-center bg-white rounded-xl shadow-xs border border-gray-100 shrink-0">
+                        <span class="text-[9px] font-bold text-gray-400 uppercase leading-none">@drawDate.ToString("MMM")</span>
+                        <span class="text-[18px] font-black text-[#EE0033] leading-none">@drawDate.ToString("dd")</span>
+                    </div>
+                    <div class="flex flex-col">
+                        <span class="text-[14px] font-black text-gray-800 leading-tight">@drawDate.ToString("dddd, MMM dd yyyy", System.Globalization.CultureInfo.InvariantCulture)</span>
+                        <div class="flex items-center gap-1.5 mt-0.5">
+                            <i class="far fa-calendar-alt text-[11px] text-[#EE0033]"></i>
+                            <span class="text-[11px] font-bold text-gray-400 uppercase tracking-tighter">@Lang.draw_date</span>
+                        </div>
+                    </div>
+                </div>
+
+                @{
+                    var games = group.OrderBy(x => x.gameId).ToList();
+                    for (int i = 0; i < games.Count; i++)
+                    {
+                        var item = games[i];
+                        var isBasic = item.gameId == "30";
+                        var isBigSmall = item.gameId == "31";
+                        var isOddEven = item.gameId == "32";
+                        
+                        var gameName = isBasic ? Lang.v2_classic_pick_10 : 
+                                       isBigSmall ? Lang.v2_big_small : 
+                                       isOddEven ? Lang.v2_odd_even : "Game";
+                        
+                        // Fallback labels if resource is missing
+                        if (string.IsNullOrEmpty(gameName)) {
+                            gameName = isBasic ? "Basic" : isBigSmall ? "Big/Small" : isOddEven ? "Odd/Even" : "Game";
+                        }
+                        
+                        var gameColor = isBasic ? "#EE0033" : isBigSmall ? "#26A31E" : isOddEven ? "#B529E9" : "#EE0033";
+                        var gameBg = isBasic ? "bg-[#EE0033]/5" : isBigSmall ? "bg-[#26A31E]/5" : isOddEven ? "bg-[#B529E9]/5" : "bg-gray-50";
+
+                        <div class="game-result-row px-1">
+                            <div class="flex items-center justify-between mb-2 px-1">
+                                <div class="flex items-center gap-2">
+                                    <div class="w-1.5 h-4 rounded-full" style="background-color: @gameColor"></div>
+                                    <span class="text-[14px] font-black uppercase tracking-widest" style="color: @gameColor">@gameName</span>
+                                </div>
+                                <div class="flex flex-col items-end">
+                                    <span class="text-[13px] font-bold text-gray-400 opacity-60">#@item.id</span>
+                                    @{
+                                        DateTime drawTime;
+                                        var timeStr = DateTime.TryParse(item.date_random, out drawTime) ? drawTime.ToString("HH:mm") : "--:--";
+                                    }
+                                    <span class="text-[11px] font-black text-[#EE0033]/60 uppercase tracking-tighter">@timeStr</span>
+                                </div>
+                            </div>
+
+                            <div class="flex items-center justify-center gap-2.5 flex-wrap">
+                                @if (!string.IsNullOrEmpty(item.result))
+                                {
+                                    var balls = item.result.Split(new[] { ',', ';' }, StringSplitOptions.RemoveEmptyEntries);
+                                    foreach (var ball in balls)
+                                    {
+                                        var cleanBall = ball.Trim();
+                                        if (isBasic)
+                                        {
+                                            <div class="w-8 h-8 flex items-center justify-center rounded-full text-white text-[15px] font-black shadow-md transform hover:scale-110 transition-transform" 
+                                                 style="background: linear-gradient(135deg, #FF3D63 0%, #E3132D 60%, #BA0F21 100%);">
+                                                @cleanBall
+                                            </div>
+                                        }
+                                        else
+                                        {
+                                            var ballText = cleanBall.ToUpper();
+                                            if (isBigSmall) {
+                                                if (ballText == "S") ballText = Lang.Small;
+                                                else if (ballText == "B") ballText = Lang.Big;
+                                            } else if (isOddEven) {
+                                                if (ballText == "O") ballText = Lang.Odd;
+                                                else if (ballText == "E") ballText = Lang.Even;
+                                            }
+
+                                            <div class="px-4 py-1.5 rounded-xl bg-white border border-gray-100 shadow-sm text-[13px] font-black transform hover:bg-gray-50 transition-colors uppercase tracking-tight" style="color: @gameColor">
+                                                @ballText
+                                            </div>
+                                        }
+                                    }
+                                }
+                                else
+                                {
+                                    <div class="py-2 px-4 rounded-lg border border-dashed" style="background-color: @(gameColor + "10"); border-color: @(gameColor + "30");">
+                                        <span class="italic text-[11px] font-bold" style="color: @gameColor">@Lang.waiting_for_result</span>
+                                    </div>
+                                }
+                            </div>
+                        </div>
+
+                        if (i < games.Count - 1)
+                        {
+                            <!-- Red Separator Line as requested -->
+                            <div class="py-2">
+                                <div class="h-[1px] bg-gradient-to-r from-transparent via-[#EE0033]/40 to-transparent"></div>
+                            </div>
+                        }
+                    }
+                }
+            </div>
+        </div>
+    }
+}
+else
+{
+    <div class="w-full py-20 flex flex-col items-center justify-center text-gray-400 opacity-60">
+        <div class="w-20 h-20 bg-gray-50 rounded-full flex items-center justify-center mb-4">
+            <i class="fas fa-search text-3xl"></i>
+        </div>
+        <p class="font-black text-[14px] uppercase tracking-widest">@Lang.no_results_found</p>
+    </div>
+}

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

@@ -4,10 +4,16 @@
 {
     foreach (var item in Model.listTerm)
     {
+        var gameColor = item.gameId == "30" ? "#EE0033" : item.gameId == "31" ? "#26A31E" : item.gameId == "32" ? "#B529E9" : "#EE0033";
+        var gameGradient = item.gameId == "30" ? "linear-gradient(135deg, #FF3D63 0%, #E3132D 60%, #BA0F21 100%)" : 
+                           item.gameId == "31" ? "linear-gradient(135deg, #4ADE80 0%, #26A31E 100%)" : 
+                           item.gameId == "32" ? "linear-gradient(135deg, #C084FC 0%, #B529E9 100%)" : 
+                           "linear-gradient(135deg, #FF3D63 0%, #BA0F21 100%)";
+        
         <!-- Result Item Card -->
-        <div class="result-item-red animate__animated animate__fadeInUp relative overflow-hidden">
+        <div class="result-item-red animate__animated animate__fadeInUp relative overflow-hidden" style="border-color: @gameColor">
             <!-- 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">
+            <div class="absolute top-2 right-4 px-2 py-0.5 rounded-full text-[9px] font-black text-white uppercase tracking-tighter z-10 shadow-sm" style="background-color: @gameColor">
                  @(item.gameId == "30" ? "Basic" : item.gameId == "31" ? "Big/Small" : item.gameId == "32" ? "Odd/Even" : "Mega")
             </div>
 
@@ -32,13 +38,13 @@
                         var cleanBall = ball.Trim();
                         if (!string.IsNullOrEmpty(cleanBall))
                         {
-                            <div class="yellow-ball">@cleanBall</div>
+                            <div class="yellow-ball" style="background: @gameGradient">@cleanBall</div>
                         }
                     }
                 }
                 else
                 {
-                    <span class="text-white/70 italic text-[12px]">@Lang.waiting_for_result</span>
+                    <span class="text-gray-400 italic text-[12px]">@Lang.waiting_for_result</span>
                 }
             </div>
         </div>

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

@@ -93,13 +93,56 @@
                         </div>
                     }
                 </div>
+
+                <!-- Ticket Action: Detail Button -->
+                <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between items-center">
+                    <div class="flex items-center gap-1.5 text-gray-400">
+                        <i class="fa-solid fa-circle-info text-[12px]"></i>
+                        <span class="text-[10px] font-bold uppercase tracking-tight">@Lang.v2_tap_to_see_detail</span>
+                    </div>
+                    <button onclick="showTicketDetail('@item.billCode', '@item.money', '@item.moneyWin', '@item.createDate', '@item.channel', '@item.channelPayment', '@item.code', '@item.gameId', '@item.termRandomDate', '@item.id')" 
+                            class="bg-[#00A3FF] text-white px-5 py-1.5 rounded-lg font-black text-[12px] shadow-[0_4px_10px_rgba(0,163,255,0.3)] active:scale-95 transition-all border-[1.5px] border-white uppercase tracking-wide">
+                        @Lang.v2_detail
+                    </button>
+                </div>
             </div>
         </div>
     }
+
+    @if (Model.totalPage != null && int.Parse(Model.totalPage) > 1)
+    {
+        var seq = int.Parse(Model.seqPage);
+        var total = int.Parse(Model.totalPage);
+        <div class="flex justify-center items-center gap-4 py-8 pb-32">
+            <button onclick="changePage(currentSeqPage - 1)" 
+                    class="p-2 px-6 bg-white rounded-xl shadow-sm font-bold text-gray-500 active:scale-95 transition-transform disabled:opacity-30 disabled:pointer-events-none" 
+                    id="prevPage" @(seq <= 1 ? "disabled" : "")>
+                <i class="fas fa-chevron-left mr-1"></i> Prev
+            </button>
+            
+            <div class="flex flex-col items-center">
+                <span class="text-[10px] text-gray-400 font-bold uppercase tracking-widest">Page</span>
+                <span class="font-black text-[#EE0033] text-lg" id="pageDisplay">@Model.seqPage / @Model.totalPage</span>
+            </div>
+
+            <button onclick="changePage(currentSeqPage + 1)" 
+                    class="p-2 px-6 bg-white rounded-xl shadow-sm font-bold text-gray-500 active:scale-95 transition-transform disabled:opacity-30 disabled:pointer-events-none" 
+                    id="nextPage" @(seq >= total ? "disabled" : "")>
+                Next <i class="fas fa-chevron-right ml-1"></i>
+            </button>
+        </div>
+        <script>
+            totalPages = parseInt('@Model.totalPage');
+        </script>
+    }
+    else
+    {
+        <div class="w-full pb-32"></div>
+    }
 }
 else
 {
-    <div class="w-full py-20 flex flex-col items-center justify-center text-gray-400 opacity-60">
+    <div class="w-full py-24 flex flex-col items-center justify-center text-gray-400 opacity-60">
         <i class="fas fa-receipt text-5xl mb-4"></i>
         <p class="font-bold">@Lang.no_results_found</p>
     </div>

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

@@ -3,7 +3,7 @@
     var activePage = ViewData["ActiveTab"] as string ?? "Home";
 }
 <!-- Bottom Navbar pinned statically white background row -->
-<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]">
+<div class="fixed bottom-0 left-1/2 -translate-x-1/2 w-full min-[600px]:max-w-[414px] bg-white border-t border-gray-100 p-3 flex justify-around items-center z-50 shadow-[0_-2px_10px_rgba(0,0,0,0.05)] h-[82px]">
     <a href="/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-10 h-[2.5px] bg-[#EE0033] rounded-sm"></div>

website/Languages/Lang.Designer.cs

@@ -927,7 +927,7 @@ 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;;.
+        ///   Looks up a localized string similar to The more numbers you match, the bigger your prize! &lt;br/&gt; In BASIC 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 [rest of string was truncated]&quot;;.
         /// </summary>
         public static string faq_v2_a4 {
             get {
@@ -2196,7 +2196,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Classic Pick 10.
+        ///   Looks up a localized string similar to Basic Pick 10.
         /// </summary>
         public static string rule_classic_pick_10 {
             get {
@@ -2322,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 – BASIC PICK 10.
         /// </summary>
         public static string rule_game_1_title {
             get {
@@ -3465,7 +3465,16 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Achte Classic Pick 10.
+        ///   Looks up a localized string similar to Bill Code.
+        /// </summary>
+        public static string v2_bill_code {
+            get {
+                return ResourceManager.GetString("v2_bill_code", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Achte BASIC PICK 10.
         /// </summary>
         public static string v2_buy_classic_pick_10 {
             get {
@@ -3491,6 +3500,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Channel Buy.
+        /// </summary>
+        public static string v2_channel {
+            get {
+                return ResourceManager.GetString("v2_channel", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Chwazi kont la.
         /// </summary>
@@ -3501,7 +3519,7 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Classic Pick 10.
+        ///   Looks up a localized string similar to BASIC PICK 10.
         /// </summary>
         public static string v2_classic_pick_10 {
             get {
@@ -3509,6 +3527,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Close.
+        /// </summary>
+        public static string v2_close {
+            get {
+                return ResourceManager.GetString("v2_close", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Coins.
         /// </summary>
@@ -3581,6 +3608,24 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Detail.
+        /// </summary>
+        public static string v2_detail {
+            get {
+                return ResourceManager.GetString("v2_detail", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Draw Date.
+        /// </summary>
+        public static string v2_draw_date {
+            get {
+                return ResourceManager.GetString("v2_draw_date", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Modifye.
         /// </summary>
@@ -3635,6 +3680,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Game Name.
+        /// </summary>
+        public static string v2_game {
+            get {
+                return ResourceManager.GetString("v2_game", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Jwèt sa a fèmen kounye a..
         /// </summary>
@@ -3662,6 +3716,24 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Money Ticket.
+        /// </summary>
+        public static string v2_money_ticket {
+            get {
+                return ResourceManager.GetString("v2_money_ticket", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Money Win.
+        /// </summary>
+        public static string v2_money_win {
+            get {
+                return ResourceManager.GetString("v2_money_win", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Pa genyen.
         /// </summary>
@@ -3689,6 +3761,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Your OTP has been sent successfully. Please check your messages !.
+        /// </summary>
+        public static string v2_otp_sent_successfully {
+            get {
+                return ResourceManager.GetString("v2_otp_sent_successfully", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Kole.
         /// </summary>
@@ -3708,7 +3789,16 @@ namespace LotteryWebApp.Languages {
         }
         
         /// <summary>
-        ///   Looks up a localized string similar to Peman reyisi.
+        ///   Looks up a localized string similar to Payment Method.
+        /// </summary>
+        public static string v2_payment_method {
+            get {
+                return ResourceManager.GetString("v2_payment_method", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Money 💸 has been transferred successfully!.
         /// </summary>
         public static string v2_payment_successfully {
             get {
@@ -3725,6 +3815,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Purchase Date.
+        /// </summary>
+        public static string v2_purchase_date {
+            get {
+                return ResourceManager.GetString("v2_purchase_date", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to 💰 Nimewo k&apos;ap resevwa.
         /// </summary>
@@ -3815,6 +3914,15 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Tap to see detail.
+        /// </summary>
+        public static string v2_tap_to_see_detail {
+            get {
+                return ResourceManager.GetString("v2_tap_to_see_detail", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Billet.
         /// </summary>
@@ -3824,6 +3932,24 @@ namespace LotteryWebApp.Languages {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Ticket Code.
+        /// </summary>
+        public static string v2_ticket_code {
+            get {
+                return ResourceManager.GetString("v2_ticket_code", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Ticket Detail.
+        /// </summary>
+        public static string v2_ticket_detail {
+            get {
+                return ResourceManager.GetString("v2_ticket_detail", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Ticket not valid.
         /// </summary>

website/Languages/Lang.fr.resx

@@ -687,7 +687,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Ticket</value>
   </data>
   <data name="ticket_code" xml:space="preserve">
-    <value>Ticket code</value>
+    <value>Bill code</value>
   </data>
   <data name="ticket_invalid" xml:space="preserve">
     <value>Your tickets are not valid</value>
@@ -801,7 +801,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Prize if win</value>
   </data>
   <data name="v2_you_choose" xml:space="preserve">
-    <value>choose</value>
+    <value>Your Choose</value>
   </data>
   <data name="how_to_play_pick10" xml:space="preserve">
     <value>How to play Pick 10</value>
@@ -885,7 +885,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Rules</value>
   </data>
   <data name="rule_classic_pick_10" xml:space="preserve">
-    <value>Classic Pick 10</value>
+    <value>Basic Pick 10</value>
   </data>
   <data name="rule_big_small" xml:space="preserve">
     <value>Big Small</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 – BASIC PICK 10</value>
   </data>
   <data name="rule_basic_pick" xml:space="preserve">
     <value>Basic&lt;br&gt;Pick</value>
@@ -1206,7 +1206,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>All</value>
   </data>
   <data name="v2_classic_pick_10" xml:space="preserve">
-    <value>Classic Pick 10</value>
+    <value>BASIC PICK 10</value>
   </data>
   <data name="v2_big_small" xml:space="preserve">
     <value>Big  Small</value>
@@ -1290,7 +1290,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Confirm</value>
   </data>
   <data name="v2_payment_successfully" xml:space="preserve">
-    <value>Payment Successfully</value>
+    <value>Money 💸 has been transferred successfully!</value>
   </data>
   <data name="v2_your_choice" xml:space="preserve">
     <value>Your choice</value>
@@ -1365,7 +1365,7 @@ We’ll help you create an account in a few easy steps.</value>
     <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>
+    <value>The more numbers you match, the bigger your prize! &lt;br/&gt; In BASIC 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>
@@ -1433,4 +1433,46 @@ We’ll help you create an account in a few easy steps.</value>
   <data name="Secs" xml:space="preserve">
     <value>Secs</value>
   </data>
+  <data name="v2_otp_sent_successfully" xml:space="preserve">
+    <value>Your OTP has been sent successfully. Please check your messages !</value>
+  </data>
+  <data name="v2_detail" xml:space="preserve">
+    <value>Detail</value>
+  </data>
+  <data name="v2_tap_to_see_detail" xml:space="preserve">
+    <value>Tap to see detail</value>
+  </data>
+  <data name="v2_ticket_detail" xml:space="preserve">
+    <value>Ticket Detail</value>
+  </data>
+  <data name="v2_bill_code" xml:space="preserve">
+    <value>Bill Code</value>
+  </data>
+  <data name="v2_money_ticket" xml:space="preserve">
+    <value>Money Ticket</value>
+  </data>
+  <data name="v2_money_win" xml:space="preserve">
+    <value>Money Win</value>
+  </data>
+  <data name="v2_purchase_date" xml:space="preserve">
+    <value>Purchase Date</value>
+  </data>
+  <data name="v2_channel" xml:space="preserve">
+    <value>Channel Buy</value>
+  </data>
+  <data name="v2_payment_method" xml:space="preserve">
+    <value>Payment Method</value>
+  </data>
+  <data name="v2_close" xml:space="preserve">
+    <value>Close</value>
+  </data>
+  <data name="v2_game" xml:space="preserve">
+    <value>Game Name</value>
+  </data>
+  <data name="v2_draw_date" xml:space="preserve">
+    <value>Draw Date</value>
+  </data>
+  <data name="v2_ticket_code" xml:space="preserve">
+    <value>Ticket Code</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 
@@ -885,7 +885,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Rules</value>
   </data>
   <data name="rule_classic_pick_10" xml:space="preserve">
-    <value>Classic Pick 10</value>
+    <value>Basic Pick 10</value>
   </data>
   <data name="rule_big_small" xml:space="preserve">
     <value>Big  Small</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 – BASIC PICK 10</value>
   </data>
   <data name="rule_basic_pick" xml:space="preserve">
     <value>Basic&lt;br&gt;Pick</value>
@@ -1206,7 +1206,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Tout</value>
   </data>
   <data name="v2_classic_pick_10" xml:space="preserve">
-    <value>Classic Pick 10</value>
+    <value>BASIC PICK 10</value>
   </data>
   <data name="v2_big_small" xml:space="preserve">
     <value>Big  Small</value>
@@ -1230,7 +1230,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Rezilta yo ap mete ajou.</value>
   </data>
   <data name="v2_buy_classic_pick_10" xml:space="preserve">
-    <value>Achte Classic Pick 10</value>
+    <value>Achte BASIC PICK 10</value>
   </data>
   <data name="v2_select_10_lucky_numbers" xml:space="preserve">
     <value>Chwazi chif chans</value>
@@ -1290,7 +1290,7 @@ We’ll help you create an account in a few easy steps.</value>
     <value>Confirmer</value>
   </data>
   <data name="v2_payment_successfully" xml:space="preserve">
-    <value>Peman reyisi</value>
+    <value>Money 💸 has been transferred successfully!</value>
   </data>
   <data name="v2_your_choice" xml:space="preserve">
     <value>Chwa ou</value>
@@ -1365,7 +1365,7 @@ We’ll help you create an account in a few easy steps.</value>
     <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>
+    <value>The more numbers you match, the bigger your prize! &lt;br/&gt; In BASIC 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>
@@ -1433,4 +1433,46 @@ We’ll help you create an account in a few easy steps.</value>
   <data name="Secs" xml:space="preserve">
     <value>Secs</value>
   </data>
+  <data name="v2_otp_sent_successfully" xml:space="preserve">
+    <value>Your OTP has been sent successfully. Please check your messages !</value>
+  </data>
+  <data name="v2_detail" xml:space="preserve">
+    <value>Detail</value>
+  </data>
+  <data name="v2_tap_to_see_detail" xml:space="preserve">
+    <value>Tap to see detail</value>
+  </data>
+  <data name="v2_ticket_detail" xml:space="preserve">
+    <value>Ticket Detail</value>
+  </data>
+  <data name="v2_bill_code" xml:space="preserve">
+    <value>Bill Code</value>
+  </data>
+  <data name="v2_money_ticket" xml:space="preserve">
+    <value>Money Ticket</value>
+  </data>
+  <data name="v2_money_win" xml:space="preserve">
+    <value>Money Win</value>
+  </data>
+  <data name="v2_purchase_date" xml:space="preserve">
+    <value>Purchase Date</value>
+  </data>
+  <data name="v2_channel" xml:space="preserve">
+    <value>Channel Buy</value>
+  </data>
+  <data name="v2_payment_method" xml:space="preserve">
+    <value>Payment Method</value>
+  </data>
+  <data name="v2_close" xml:space="preserve">
+    <value>Close</value>
+  </data>
+  <data name="v2_game" xml:space="preserve">
+    <value>Game Name</value>
+  </data>
+  <data name="v2_draw_date" xml:space="preserve">
+    <value>Draw Date</value>
+  </data>
+  <data name="v2_ticket_code" xml:space="preserve">
+    <value>Ticket Code</value>
+  </data>
 </root>

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

@@ -14,15 +14,15 @@
 }
 
 .ball-circle {
-    width: 24px;
-    height: 24px;
+    width: 30px;
+    height: 30px;
     background: #EAEAEA;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-weight: 800;
-    font-size: 10px;
+    font-weight: 900;
+    font-size: 12px;
     color: #333;
     box-shadow: inset 0px -2px 4px rgba(0, 0, 0, 0.1);
 }
@@ -36,18 +36,32 @@
 }
 
 .ball-empty {
-    background: #dbd6d6 !important;
-    border: 1px solid #746c6c !important;
+    background: #F3F4F6 !important;
+    border: 1px solid #E5E7EB !important;
     box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05) !important;
 }
 
 .ball-filled {
-    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #ff0f43 15%, #d1002c 100%) !important;
-    border: 1.5px solid #ffffff !important;
+    background: linear-gradient(135deg, #FF3D63 0%, #E3132D 60%, #BA0F21 100%) !important;
+    border: 1px solid rgba(255, 255, 255, 0.3) !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;
+    box-shadow: 0 4px 10px rgba(186, 15, 33, 0.3) !important;
     font-weight: 900 !important;
-    text-shadow: 0px 1px 2px rgba(0,0,0,0.2);
+    text-shadow: 0px 1px 2px rgba(0,0,0,0.1);
+    transform: scale(1.1);
+}
+
+.active-num {
+    background: linear-gradient(135deg, #FF3D63 0%, #E3132D 60%, #BA0F21 100%) !important;
+    border: none !important;
+    box-shadow: 0 4px 8px rgba(186, 15, 33, 0.4) !important;
+}
+
+.ticket-index {
+    background-color: #1AB13C !important;
+    border: 3px solid #ffffff !important;
+    color: #ffffff !important;
+    box-shadow: 0 4px 10px rgba(26, 177, 60, 0.3) !important;
 }
 
 /* Custom scrollbar to match mobile feel */

website/wwwroot/LotteryV2/css/history.css

@@ -77,8 +77,7 @@
 }
 
 .ticket-card-top {
-    padding: 20px;
-    padding-bottom: 24px;
+    padding: 12px 16px 16px 16px;
     background: white;
     position: relative;
 }
@@ -94,7 +93,7 @@
 }
 
 .ticket-card-bottom {
-    padding: 20px;
+    padding: 12px 16px;
     background: #FDFDFD;
     border-top: 1px dashed #E5E7EB;
 }
@@ -103,7 +102,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 20px;
+    margin-bottom: 12px;
 }
 .ticket-id { 
     font-size: 13px; 
@@ -169,7 +168,7 @@
 .ticket-info-grid {
     display: flex;
     flex-direction: column;
-    gap: 14px;
+    gap: 8px;
 }
 .info-row {
     display: flex;
@@ -181,5 +180,26 @@
 .win-amount { color: #EE0033; font-size: 18px; }
 
 .history-items-list {
-    padding-bottom: 150px;
+    flex: 1;
+    height: calc(100vh - 175px) !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    padding-bottom: 100px;
+    
+    scrollbar-width: thin !important;
+    scrollbar-color: #fce303 transparent !important;
+}
+
+.history-items-list::-webkit-scrollbar {
+    width: 6px !important;
+    display: block !important;
+}
+
+.history-items-list::-webkit-scrollbar-track {
+    background: transparent !important;
+}
+
+.history-items-list::-webkit-scrollbar-thumb {
+    background-color: #fce303 !important;
+    border-radius: 20px !important;
 }

website/wwwroot/LotteryV2/css/results.css

@@ -1,12 +1,35 @@
 .results-container {
     background-color: #F3F4F6;
-    min-height: 100vh;
+    height: 100vh !important;
+    overflow: hidden !important; 
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.results-items-list {
+    flex: 1; /* Take up available space between header and footer */
+    height: calc(100vh - 150px - 140px) !important; 
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    padding-bottom: 20px;
+    
+    scrollbar-width: thin !important;
+    scrollbar-color: #fce303 transparent !important;
+}
+
+.results-items-list::-webkit-scrollbar {
+    width: 6px !important;
+    display: block !important;
 }
 
-.sticky-top-section {
-    position: sticky;
-    top: 0;
-    z-index: 100;
+.results-items-list::-webkit-scrollbar-track {
+    background: transparent !important;
+}
+
+.results-items-list::-webkit-scrollbar-thumb {
+    background-color: #fce303 !important;
+    border-radius: 20px !important;
 }
 
 .results-top-header {
@@ -103,40 +126,28 @@
 
 /* Result Item Cards */
 .result-item-red {
-    background: linear-gradient(135deg, #FF3D63 0%, #E3132D 60%, #BA0F21 100%);
+    background: white;
     border-radius: 16px;
-    margin: 0 16px 16px 16px;
+    margin: 0 0px 16px 0px;
     padding: 16px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    box-shadow: 0 8px 24px rgba(211, 29, 40, 0.25);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
     position: relative;
     overflow: hidden;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.result-item-red::before {
-    content: '';
-    position: absolute;
-    top: -50%;
-    left: -10%;
-    width: 50%;
-    height: 150%;
-    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
-    pointer-events: none;
-    transform: rotate(20deg);
+    border: 1.5px solid #EE0033;
 }
 
 .item-date-text {
     flex: 0 0 90px;
-    color: white;
+    color: #374151;
     line-height: 1.2;
     font-weight: 700;
 }
 
 .item-date-text .day { font-size: 14px; margin-bottom: 2px; }
-.item-date-text .date { font-size: 12px; font-weight: 400; opacity: 0.8; }
+.item-date-text .date { font-size: 12px; font-weight: 400; color: #6B7280; }
 
 .balls-container {
     flex: 1;
@@ -148,27 +159,44 @@
 }
 
 .yellow-ball {
-    width: 26px;
-    height: 26px;
-    background: radial-gradient(circle at 35% 35%, #FFE082 0%, #FFD54F 40%, #FFB300 70%, #FFA000 100%);
-    border: 1.2px solid #FFECB3;
+    width: 28px;
+    height: 28px;
+    background: linear-gradient(135deg, #FF3D63 0%, #E3132D 60%, #BA0F21 100%);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 10px;
+    font-size: 11px;
     font-weight: 900;
-    color: #1a1a1a;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 -1px 2px rgba(0,0,0,0.1);
+    color: white;
+    box-shadow: 0 2px 5px rgba(186, 15, 33, 0.3);
 }
 
 .yellow-ball:hover {
     transform: scale(1.1);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
+    box-shadow: 0 4px 8px rgba(186, 15, 33, 0.4);
 }
 
 .results-items-list {
-    padding-bottom: 140px;
+    padding-bottom: 240px; /* Extra space for the sticky jackpot bar */
+}
+
+/* Premium Grouped Result Cards */
+.result-card-premium {
+    background: white;
+    border-radius: 20px !important;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
+    border: 1px solid #F3F4F6 !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.result-card-premium:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
+}
+
+.game-result-row {
+    padding: 4px 0;
 }
 
 /* Bottom Promo Bar */