update 18-09

fix UI vs redirect page

AppLibs/AppLibs/Libs/AsyncGateAttribute.cs

@@ -0,0 +1,38 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.Filters;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace AppLibs.Libs
+{
+    [AttributeUsage(AttributeTargets.Class | AttributeTargets.Method)]
+    public sealed class AsyncGateAttribute : Attribute, IAsyncActionFilter
+    {
+        public async Task OnActionExecutionAsync(
+            ActionExecutingContext context,
+            ActionExecutionDelegate next)
+        {
+            var vr = context.HttpContext.Request.Query["vr"].ToString();
+
+            // Nếu có vr=cAsync hoặc vr=lAsync => cho chạy action (logic nặng)
+            if (vr == "cAsync" || vr == "lAsync")
+            {
+                await next();
+                return;
+            }
+
+            // Không có vr => return ViewAsync ngay, bỏ qua action
+            if (context.Controller is Controller c)
+            {
+                var result = await ControllerExtensions.ViewAsync(c);
+                context.Result = result; // short-circuit
+                return;
+            }
+
+            context.Result = new NotFoundResult();
+        }
+    }
+}

AppLibs/AppLibs/Libs/ControllerExtensions.cs

@@ -7,6 +7,7 @@ using Newtonsoft.Json;
 using Microsoft.AspNetCore.Http;
 using AppLibs.Libs.Pages;
 using System.Security.Cryptography;
+using System.Runtime.CompilerServices;
 
 namespace AppLibs.Libs
 {
@@ -152,6 +153,22 @@ namespace AppLibs.Libs
                 await viewResult.View.RenderAsync(viewContext);
                 return Regex.Replace(writer.ToString(), @"(?>[^\S ]\s*| \s{2,})", "").Trim();
             }
+        }   
+
+        public static async Task<string> ReadStaticPage(this Controller controller, string id)
+        {
+            var filePath = Path.Combine(Directory.GetCurrentDirectory(),
+                                   "Data", "page", $"{id}.html");
+
+            if (!System.IO.File.Exists(filePath))
+                throw new FileNotFoundException();
+
+            string htmlContent;
+            using (var reader = new StreamReader(filePath))
+            {
+                htmlContent = await reader.ReadToEndAsync();
+            }
+            return htmlContent;
         }
     }
 }

AppLibs/AppLibs/Libs/LayoutAttribute.cs

@@ -23,7 +23,7 @@ namespace AppLibs.Libs
         {
         }
 
-        public LayoutAttribute(LayoutOptions option, string layoutName = "")
+        public LayoutAttribute(LayoutOptions option, string layoutName = "Async")
         {
             switch (option)
             {

TWA-App/Controllers/CompanyController.cs

@@ -0,0 +1,30 @@
+using AppLibs.Libs;
+using Microsoft.AspNetCore.Mvc;
+
+namespace TWA_App.Controllers
+{
+    public class CompanyController : Controller
+    {
+        [PageInfor("2000", "Company", "/Company/*")]
+        [Layout(LayoutOptions.Default)]
+        public async Task<IActionResult> Index(string? id)
+        {
+             if (id != null)
+            {
+                NavItem list = (await WSNavigation.GetListMenu())[1];
+                if (list.SubItem != null && list.SubItem.Count > 0)
+                {
+                    NavItem? result = list.SubItem.FirstOrDefault(l => l.Url.Split('/').Last().Equals(id));
+                    if (result != null) {
+                        ViewData["PageID"] = result.ID;
+                        ViewData["Title"] = result.Name;
+
+                        ViewBag.Content = await this.ReadStaticPage(result.ID);
+                        return await this.ViewAsync();
+                    } 
+                }
+            }
+            return NotFound();
+        }
+    }
+}

TWA-App/Data/page/2001.html

@@ -0,0 +1 @@
+<span>Hello Page About Us</span>

TWA-App/Data/page/2002.html

@@ -0,0 +1 @@
+<span>Hello Page Our Team</span>

TWA-App/Json/navlist.json

@@ -14,36 +14,41 @@
         "group": 0,
         "url": "",
         "sub-item": [
-            {
+          {
-                "id": "2001",
+            "id": "2001",
-                "name": "About Us",
+            "name": "About Us",
-                "url": "/Company/AboutUs"
+            "url": "/Company/AboutUs",
-            },
+            "flexpage": true
+          },
             {
                 "id": "2002",
                 "name": "Our Team",
                 "url": "/Company/OurTeam"
             },
-            {
+          {
-                "id": "2003",
+            "id": "2003",
-                "name": "Mission & Vision",
+            "name": "Mission & Vision",
-                "url": "/Company/Mission-Vision"
+            "url": "/Company/Mission-Vision",
-            },
+            "flexpage": true
-            {
+          },
-                "id": "2004",
+          {
-                "name": "Milestone",
+            "id": "2004",
-                "url": "/Company/Milestone"
+            "name": "Milestone",
-            },
+            "url": "/Company/Milestone",
-            {
+            "flexpage": true
-                "id": "2005",
+          },
-                "name": "Careers",
+          {
-                "url": "/Company/Careers"
+            "id": "2005",
-            },
+            "name": "Careers",
-            {
+            "url": "/Company/Careers",
-                "id": "2006",
+            "flexpage": true
-                "name": "Partners",
+          },
-                "url": "/Company/Partners"
+          {
-            }
+            "id": "2006",
+            "name": "Partners",
+            "url": "/Company/Partners",
+            "flexpage": true
+          }
         ]
     },
     {

TWA-App/Program.cs

@@ -6,6 +6,10 @@ await WSNavigation.LoadJson();
 var builder = WebApplication.CreateBuilder(args);
 
 // Add services to the container.
+builder.Services.AddControllers(options =>
+{
+    options.Filters.Add<AsyncGateAttribute>();
+});
 #if (!DEBUG)
 builder.Services.Configure<ForwardedHeadersOptions>(options =>
 {
@@ -25,6 +29,7 @@ builder.Services.AddControllersWithViews();
 #else
 builder.Services.AddControllersWithViews().AddRazorRuntimeCompilation();
 #endif
+
 var app = builder.Build();
 // Configure the HTTP request pipeline.
 if (!app.Environment.IsDevelopment())
@@ -41,6 +46,12 @@ app.UseAuthorization();
 
 app.MapStaticAssets();
 
+app.MapControllerRoute(
+    name: "mapCompany",
+    pattern: "Company/{id?}",
+    defaults: new { controller = "Company", action = "Index" })
+    .WithStaticAssets();
+
 app.MapControllerRoute(
     name: "default",
     pattern: "{controller=Home}/{action=Index}/{id?}")

TWA-App/TWA-App.csproj

@@ -16,4 +16,13 @@
     <ProjectReference Include="..\AppLibs\AppLibs\AppLibs.csproj" />
   </ItemGroup>
 
+  <ItemGroup>
+    <None Update="Data\page\2001.html">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </None>
+    <None Update="Data\page\2002.html">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </None>
+  </ItemGroup>
+
 </Project>

TWA-App/Views/Company/Index.cshtml

@@ -0,0 +1,5 @@
+@Html.Raw(ViewBag.Content)
+
+@section jsLib {
+    <script type="module" src="@Url.AbsoluteContent("~/js/js-page/2000.js")" js-lib></script>
+}

TWA-App/Views/Home/Index.cshtml

@@ -392,7 +392,7 @@
         </div>
     </div>
 </section>
-<section class="section">
+<section class="section quote-section">
     <div class="con">
         <div class="r">
             <div class="c-12 d-f f-c tabQuoute">
@@ -406,84 +406,131 @@
                 </div>
                 <div class="tabcontents">
                     <div class="d-f f-c tabcontent">
-                        <div class="form__group">
+                        <div class="cfull">
-                            <div class="r">
+                            <div class="r-n-g">
-                                <label class="choice c-4">
+                                <div class="c-l-8 c-x-9">
-                                    <input type="radio" name="service_type" value="OCEAN">
+                                    <h2 class="mb-3">Air Freight</h2>
-                                    <span>Ocean Freight</span>
+                                    <div class="cfull">
-                                </label>
+                                        <div class="r-n-g ne-margin">
-                                <label class="choice c-4">
+                                            <div class="form-group c-12 d-f a-i-center">
-                                    <input type="radio" name="service_type" value="AIR">
+                                                <label class="mb-0">Customer: </label>
-                                    <span>Air Freight</span>
+                                                <input type="radio" id="rd_PC" class="ml-4 mr-2" name="rdCustomer">
-                                </label>
+                                                <label  class="mb-0 rd-value" for="rd_PC">Personal</label>
-                                <label class="choice c-4">
+                                                
-                                    <input type="radio" name="service_type" value="LAND">
+                                              
-                                    <span>Land Transport</span>
+                                                <input type="radio" id="rd_BC" class="ml-4 mr-2" name="rdCustomer">
-                                </label>
+                                                <label class="mb-0 rd-value" for="rd_BC">Bussiness</label>
+                                            </div>
+                                            <div class="form-group f-c c-12 c-m-6 c-x-4">
+                                                <label>Name</label>
+                                                <input class="form-control" type="text" id="ip_name">
+                                            </div>
+                                            <div class="form-group f-c c-12 c-m-6 c-x-4">
+                                                <label>Email</label>
+                                                <input class="form-control" type="email" id="ip_email">
+                                            </div>
+                                            <div class="form-group f-c c-12 c-m-6 c-x-4">
+                                                <label>Phone</label>
+                                                <input class="form-control" type="number" name="ip_phone">
+                                            </div>
+                                            <div class="form-group f-c f-c c-12 c-m-6 c-x-4">
+                                                <label>Country Origin</label>
+                                                <input class="form-control" type="email" id="ip_email">
+                                            </div>
+                                            <div class="form-group f-c c-12 c-m-6 c-x-4">
+                                                <label>Country Destination</label>
+                                                <input class="form-control" type="number" name="ip_phone">
+                                            </div>
+                                            <div class="form-group f-c c-12 c-m-6 c-x-4">
+                                                <label>Estimated Departure Date</label>
+                                                <input class="form-control" type="datetime" name="ip_phone">
+                                            </div>
+                                        </div>
+                                        <div class="r-n-g ne-margin">
+                                            <div class="form-group f-c c-12 c-m-6 c-x-4">
+                                                <label>Cargo Type</label>
+                                                <input class="form-control" type="text" id="ip_name">
+                                            </div>
+                                        </div>
+                                        <div class="r-n-g ne-margin">
+                                            <div class="form-group f-c c-12 c-m-6 c-x-4">
+                                                <label>Total Gross Weight</label>
+                                                <input class="form-control" type="text" id="ip_name">
+                                            </div>
+                                        </div>
+                                        <div class="r-n-g ne-margin">
+                                            <div class="form-group c-12 d-f a-i-center">
+                                                <label class="mb-0">Additional Notes: </label>
+                                                <input type="radio" id="rd_PC" class="ml-4 mr-2" name="rdCustomer">
+                                                <label class="mb-0" for="rd_PC">Personal</label>
+
+
+                                                <input type="radio" id="rd_BC" class="ml-4 mr-2" name="rdCustomer">
+                                                <label class="mb-0" for="rd_BC">Bussiness</label>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <button class="mt-2 btn btn-primary" type="submit">Request a Quote</button>
+
+                                </div>
+                                <div class="c-l-4 c-x-3">
+                                    <div class="d-f f-c quote-quess ml-auto">
+                                        <i class="atg a-4x atg-mess-question1"></i>
+                                        <h3>We will contact you soon!</h3>
+                                        <p class="mb-2">
+                                            As one of the world’s leading supply chain management companies.
+                                        </p>
+                                    </div>
+                                </div>
                             </div>
                         </div>
-
-                        <div class="r gap-2">
-                            <label class="field c-4">
-                                <span class="field__label">Name</span>
-                                <input class="field__input" type="text" name="name">
-                            </label>
-                            <label class="field c-4">
-                                <span class="field__label">E-mail</span>
-                                <input class="field__input" type="email" name="email">
-                            </label>
-                            <label class="field c-4">
-                                <span class="field__label">Phone</span>
-                                <input class="field__input" type="tel" name="phone">
-                            </label>
-                        </div>
-
-                        <div class="r gap-2">
-                            <label class="field c-6">
-                                <span class="field__label">Cargo Type</span>
-                                <input class="field__input" type="text" name="cargo_type">
-                            </label>
-                            <label class="field c-6">
-                                <span class="field__label">Origin</span>
-                                <input class="field__input" type="text" name="origin">
-                            </label>
-                            <label class="field c-6">
-                                <span class="field__label">Destination</span>
-                                <input class="field__input" type="text" name="destination">
-                            </label>
-                        </div>
-
-                        <div class="form__group">
-                            <div class="r gap-2">
-                                <label class="field c-2">
-                                    <span class="field__label">Qty</span>
-                                    <input class="field__input" type="number" name="qty">
-                                </label>
-                                <label class="field c-2">
-                                    <span class="field__label">Weight</span>
-                                    <input class="field__input" type="text" name="weight">
-                                </label>
-                                <label class="field c-2">
-                                    <span class="field__label">Width</span>
-                                    <input class="field__input" type="text" name="width">
-                                </label>
-                                <label class="field c-2">
-                                    <span class="field__label">Height</span>
-                                    <input class="field__input" type="text" name="height">
-                                </label>
-                                <label class="field c-2">
-                                    <span class="field__label">Length</span>
-                                    <input class="field__input" type="text" name="length">
-                                </label>
-                            </div>
-                        </div>
-
-                        <button class="btn btn--primary" type="submit">Request a Quote</button>
                     </div>
                     <div class="d-f f-c tabcontent">
+                        <div class="cfull">
+                            <div class="r-n-g">
+                                <div class="c-12 c-l-8 c-x-9">
+                                    <h2>Tracking shipments</h2>
+                                    <ul class="order-list mt-4">
+                                        <li class="d-f a-i-start">
+                                            <i class="atg atg-radiobutton a-2x"></i>
+                                            Depending on the tracking technology that carriers are using, Morz’s system will work differently to receive and create updates on the status of the shipments. While some tracking updates are received through automated systems, others require Morz tracking teams to regularly reach out to carriers. If you have questions about tracking your shipment, contact your Account Executive.
+
+                                        </li>
+                                        <li class="d-f a-i-start">
+                                            <i class="atg atg-radiobutton a-2x"></i>
+                                            Make sure you use a Morz BOL, otherwise it could result in tracking information delays. The carriers send shipment tracking information to Morz’s system when a Morz BOL is used.
+
+                                        </li>
+                                        <li class="d-f a-i-start">
+                                            <i class="atg atg-radiobutton a-2x"></i>
+                                            For help finding the BOL number, take a look at a BOL example. Contact your account manager to get a copy of your BOL if you don’t have one.
+
+                                        </li>
+                                    </ul>
+                                    <div class="cfull mt-4">
+                                        <div class="r-n-g ne-margin">
+                                            <div class="form-group f-c c-12">
+                                                <label>ID Tracking</label>
+                                                <div class="d-f">
+                                                    <input class="form-control h-100" type="number" name="ip_phone">
+                                                    <button class="ml-2 btn btn-primary c-a" type="submit">Track & Trace</button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>    
+                                <div class="c-12 c-l-4 c-x-3">
+
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
+            <div class="photo-content">
+                <img class="w-100" src="~/images/1000/quote-section/airvscargo.png" />
+            </div>
         </div>
     </div>
 </section>
@@ -519,85 +566,122 @@
         </div>
     </div>
     <div class="r j-c-center">
-        <div class="c-12 c-s-6 c-l-4">
+        <div class="r-n-g c-12">
-            <div class="grid">
+            <div class="swiper ourBlogSwiper">
-                <a class="grid-image">
+                <div class="swiper-wrapper a-i-center">
-                    <img loading="lazy" src="~/images/1000/blog-section/seaport.jpg" class="img-fluid wp-post-image" alt="">
+                    <div class="swiper-slide">
-                </a>
+                        <div class="grid">
-                <div class="grid-body d-f f-c">
+                            <a class="grid-image">
-                    <div class="blog-author d-f a-i-center">
+                                <img loading="lazy" src="~/images/1000/blog-section/introduction-to-air-cargo-operation.jpg" class="img-fluid wp-post-image" alt="">
-                        <div class="blog-author-img mr-10">
+                            </a>
-                            <img alt="" src="https://secure.gravatar.com/avatar/187861c59f0bf60f2604ab92e2d7f0c53dbb26b9e5ef2bbb31fcc900eba2bbca?s=96&amp;d=mm&amp;r=g">
+                            <div class="grid-body d-f f-c">
+                                <div class="blog-author d-f a-i-center">
+                                    <div class="blog-author-img mr-10">
+                                        <img alt="" src="https://secure.gravatar.com/avatar/187861c59f0bf60f2604ab92e2d7f0c53dbb26b9e5ef2bbb31fcc900eba2bbca?s=96&amp;d=mm&amp;r=g">
+                                    </div>
+                                    <div class="d-f blog-author-content"><span>By</span> <a class="ml-1" href="">Admin</a></div>
+                                </div>
+                                <span class="sub-title">Logistics</span>
+                                <h3 class="title">
+                                    <a href="">5 Ways To Get The Most Out Of Your Logistics</a>
+                                </h3>
+                                <div class="d-f j-c-between a-i-center">
+                                    <div class="blog-meta d-f a-i-center">
+                                        <i class="atg atg-calendar-1 a-2x mr-1"></i><span>Oct 13, 2021</span>
+                                    </div>
+                                    <div class="blog-meta">
+                                        <a href="" class="d-f a-i-center"><i class="atg atg-message a-2x mr-1"></i> <span>0</span></a>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
-                        <div class="d-f blog-author-content"><span>By</span> <a class="ml-1" href="">Admin</a></div>
                     </div>
-                    <span class="sub-title">Logistics</span>
+                    <div class="swiper-slide">
-                    <h3 class="title">
+                        <div class="grid">
-                        <a href="">The Top 5 Changes That Occur With AI in Logistics</a>
+                            <a class="grid-image">
-                    </h3>
+                                <img loading="lazy" src="~/images/1000/blog-section/seaport.jpg" class="img-fluid wp-post-image" alt="">
-                    <div class="d-f j-c-between a-i-center">
+                            </a>
-                        <div class="blog-meta d-f a-i-center">
+                            <div class="grid-body d-f f-c">
-                            <i class="atg atg-calendar-1 a-2x mr-1"></i><span>Oct 13, 2021</span>
+                                <div class="blog-author d-f a-i-center">
+                                    <div class="blog-author-img mr-10">
+                                        <img alt="" src="https://secure.gravatar.com/avatar/187861c59f0bf60f2604ab92e2d7f0c53dbb26b9e5ef2bbb31fcc900eba2bbca?s=96&amp;d=mm&amp;r=g">
+                                    </div>
+                                    <div class="d-f blog-author-content"><span>By</span> <a class="ml-1" href="">Admin</a></div>
+                                </div>
+                                <span class="sub-title">Logistics</span>
+                                <h3 class="title">
+                                    <a href="">The Top 5 Changes That Occur With AI in Logistics</a>
+                                </h3>
+                                <div class="d-f j-c-between a-i-center">
+                                    <div class="blog-meta d-f a-i-center">
+                                        <i class="atg atg-calendar-1 a-2x mr-1"></i><span>Oct 13, 2021</span>
+                                    </div>
+                                    <div class="blog-meta">
+                                        <a href="" class="d-f a-i-center"><i class="atg atg-message a-2x mr-1"></i> <span>0</span></a>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
-                        <div class="blog-meta">
+                    </div>
-                            <a href="" class="d-f a-i-center"><i class="atg atg-message a-2x mr-1"></i> <span>0</span></a>
+                    <div class="swiper-slide">
-                        </div>
+                        <div class="grid">
-                    </div>
+                            <a class="grid-image">
-                </div>
+                                <img loading="lazy" src="~/images/1000/blog-section/introduction-to-air-cargo-operation.jpg" class="img-fluid wp-post-image" alt="">
-            </div>
+                            </a>
-        </div>
+                            <div class="grid-body d-f f-c">
-        <div class="c-12 c-s-6 c-l-4">
+                                <div class="blog-author d-f a-i-center">
-            <div class="grid">
+                                    <div class="blog-author-img mr-10">
-                <a class="grid-image">
+                                        <img alt="" src="https://secure.gravatar.com/avatar/187861c59f0bf60f2604ab92e2d7f0c53dbb26b9e5ef2bbb31fcc900eba2bbca?s=96&amp;d=mm&amp;r=g">
-                    <img loading="lazy" src="~/images/1000/blog-section/introduction-to-air-cargo-operation.jpg" class="img-fluid wp-post-image" alt="">
+                                    </div>
-                </a>
+                                    <div class="d-f blog-author-content"><span>By</span> <a class="ml-1" href="">Admin</a></div>
-                <div class="grid-body d-f f-c">
+                                </div>
-                    <div class="blog-author d-f a-i-center">
+                                <span class="sub-title">Logistics</span>
-                        <div class="blog-author-img mr-10">
+                                <h3 class="title">
-                            <img alt="" src="https://secure.gravatar.com/avatar/187861c59f0bf60f2604ab92e2d7f0c53dbb26b9e5ef2bbb31fcc900eba2bbca?s=96&amp;d=mm&amp;r=g">
+                                    <a href="">5 Ways To Get The Most Out Of Your Logistics</a>
-                        </div>
+                                </h3>
-                        <div class="d-f blog-author-content"><span>By</span> <a class="ml-1" href="">Admin</a></div>
+                                <div class="d-f j-c-between a-i-center">
-                    </div>
+                                    <div class="blog-meta d-f a-i-center">
-                    <span class="sub-title">Logistics</span>
+                                        <i class="atg atg-calendar-1 a-2x mr-1"></i><span>Oct 13, 2021</span>
-                    <h3 class="title">
+                                    </div>
-                        <a href="">5 Ways To Get The Most Out Of Your Logistics</a>
+                                    <div class="blog-meta">
-                    </h3>
+                                        <a href="" class="d-f a-i-center"><i class="atg atg-message a-2x mr-1"></i> <span>0</span></a>
-                    <div class="d-f j-c-between a-i-center">
+                                    </div>
-                        <div class="blog-meta d-f a-i-center">
+                                </div>
-                            <i class="atg atg-calendar-1 a-2x mr-1"></i><span>Oct 13, 2021</span>
+                            </div>
-                        </div>
+                        </div>
-                        <div class="blog-meta">
+                    </div>
-                            <a href="" class="d-f a-i-center"><i class="atg atg-message a-2x mr-1"></i> <span>0</span></a>
+                    <div class="swiper-slide">
-                        </div>
+                        <div class="grid">
-                    </div>
+                            <a class="grid-image">
-                </div>
+                                <img loading="lazy" src="~/images/1000/blog-section/obooks-for-logistics.png" class="img-fluid wp-post-image" alt="">
-            </div>
+                            </a>
-        </div>
+                            <div class="grid-body d-f f-c">
-        <div class="c-12 c-s-6 c-l-4">
+                                <div class="blog-author d-f a-i-center">
-            <div class="grid">
+                                    <div class="blog-author-img mr-10">
-                <a class="grid-image">
+                                        <img alt="" src="https://secure.gravatar.com/avatar/187861c59f0bf60f2604ab92e2d7f0c53dbb26b9e5ef2bbb31fcc900eba2bbca?s=96&amp;d=mm&amp;r=g">
-                    <img loading="lazy" src="~/images/1000/blog-section/obooks-for-logistics.png" class="img-fluid wp-post-image" alt="">
+                                    </div>
-                </a>
+                                    <div class="d-f blog-author-content"><span>By</span> <a class="ml-1" href="">Admin</a></div>
-                <div class="grid-body d-f f-c">
+                                </div>
-                    <div class="blog-author d-f a-i-center">
+                                <span class="sub-title">Logistics</span>
-                        <div class="blog-author-img mr-10">
+                                <h3 class="title">
-                            <img alt="" src="https://secure.gravatar.com/avatar/187861c59f0bf60f2604ab92e2d7f0c53dbb26b9e5ef2bbb31fcc900eba2bbca?s=96&amp;d=mm&amp;r=g">
+                                    <a href="">Supply Chain And Logistics Trends That Could Be Big</a>
-                        </div>
+                                </h3>
-                        <div class="d-f blog-author-content"><span>By</span> <a class="ml-1" href="">Admin</a></div>
+                                <div class="d-f j-c-between a-i-center">
-                    </div>
+                                    <div class="blog-meta d-f a-i-center">
-                    <span class="sub-title">Logistics</span>
+                                        <i class="atg atg-calendar-1 a-2x mr-1"></i><span>Oct 13, 2021</span>
-                    <h3 class="title">
+                                    </div>
-                        <a href="">Supply Chain And Logistics Trends That Could Be Big</a>
+                                    <div class="blog-meta">
-                    </h3>
+                                        <a href="" class="d-f a-i-center"><i class="atg atg-message a-2x mr-1"></i> <span>0</span></a>
-                    <div class="d-f j-c-between a-i-center">
+                                    </div>
-                        <div class="blog-meta d-f a-i-center">
+                                </div>
-                            <i class="atg atg-calendar-1 a-2x mr-1"></i><span>Oct 13, 2021</span>
+                            </div>
-                        </div>
-                        <div class="blog-meta">
-                            <a href="" class="d-f a-i-center"><i class="atg atg-message a-2x mr-1"></i> <span>0</span></a>
                         </div>
                     </div>
                 </div>
+
+
+                <div class="swiper-button-prev" aria-label="previous"></div>
+                <div class="swiper-button-next" aria-label="next"></div>
             </div>
         </div>
 

TWA-App/Views/Partial/Footer.cshtml

@@ -1,7 +1,7 @@
 <div class="c-footer con">
-    <div class="r j-c-between">
+    <div class="r j-c-between a-i-center">
-        <div class="c-l-4">
+        <div class="c-12 c-l-4">
-            <div class="nav-col d-f f-c">
+            <div class="mt-4 mb-4 d-f f-c">
                 <div class="c_logo">
                     <img src="~/images/logo/slogo.png" />
                 </div>
@@ -10,92 +10,95 @@
                 </span>
             </div>
         </div>
-        <div class="c-l-1"></div>
+        <div class="c-l-1 d-n d-l-b"></div>
-        <div class="c-l-3">
+        <div class="c-12 c-s-6 c-l-3">
-            <div class="d-f">
+            <div class="d-f mt-4 mb-4">
-                    <div class=""><img class="w-100" src="~/images/layout/element-support.svg" /></div>
+                <div class=""><img class="w-100" src="~/images/layout/element-support.svg" /></div>
-                    <div class="d-f f-c ml-2">
+                <div class="d-f f-c ml-3">
                         <h3>Call Center</h3>
-                        <p>
+                        <p class="mt-2">
                             24/7 Support<br>
                             <a href="tel:+ (84) 28 667 34 666" target="_blank" rel="noopener">(84) 28 667 34 666</a>
                         </p>
-                    </div>
                 </div>
-                
+            </div>
         </div>
-        <div class="c-l-4">
+            <div class="c-12 c-s-6 c-l-4">
-                <div class="d-f">
+            <div class="d-f mt-4 mb-4 a-i-center">
-                    <img src="~/images/layout/element-map.svg" />
+                <div class="d-f a-i-center w-100">
-                    <div class="d-f f-c ml-2">
+                    <img class="w-100" src="/images/layout/element-map.svg">
-                        <h3>Location</h3>
+                </div>
-                        <p>
+                        <div class="d-f f-c ml-2">
-                            3rd Floor, Hai Au Building
+                            <h3>Location</h3>
+                            <p class="mt-2">
+                                3rd Floor, Hai Au Building
                         
-                        </p>
+                            </p>
-                        <p>
+                            <p>
-                               39B
+                                   39B
-      Truong Son Street, Tan Son Nhat Ward, Ho Chi Minh City, Vietnam
+          Truong Son Street, Tan Son Nhat Ward, Ho Chi Minh City, Vietnam
-                        </p>
+                            </p>
+                        </div>
                     </div>
-                </div>
+            </div>
-        </div>
     </div>
 </div>
 <div class="c-footer-1 con">
     <div class="r">
-     
+        <div class="r-n-g">
-        <div class="c-6 c-l-3 c-x-2">
+
-            <div class="nav-col d-f f-c">
+            <div class="c-6 c-l-3 c-x-2">
-                <h3 class="title">Services</h3>
+                <div class="nav-col d-f f-c">
-                <a href="#" class="nav-link">Air Freight</a>
+                    <h3 class="title">Services</h3>
-                <a href="#" class="nav-link">Air Forwarder</a>
+                    <a href="#" class="nav-link">Air Freight</a>
-                <a href="#" class="nav-link">Cargo Tracking</a>
+                    <a href="#" class="nav-link">Air Forwarder</a>
-                <a href="#" class="nav-link">Ticketing & Reservation</a>
+                    <a href="#" class="nav-link">Cargo Tracking</a>
-                <a href="#" class="nav-link">Baggage Handling</a>
+                    <a href="#" class="nav-link">Ticketing & Reservation</a>
-                <a href="#" class="nav-link">Warehouse Logistics</a>
+                    <a href="#" class="nav-link">Baggage Handling</a>
-            </div>
+                    <a href="#" class="nav-link">Warehouse Logistics</a>
-        </div>
-        <div class="c-6 c-l-2 c-x-2">
-            <div class="nav-col d-f f-c">
-                <h3 class="title">Company</h3>
-                <a href="#" class="nav-link">About Us</a>
-                <a href="#" class="nav-link">Expertise</a>
-                <a href="#" class="nav-link">Sustainability</a>
-                <a href="#" class="nav-link">News & Media</a>
-                <a href="#" class="nav-link">Case Studies</a>
-                <a href="#" class="nav-link">Contacts</a>         
-            </div>
-        </div>
-        <div class="c-12 c-m-6 c-l-4 c-x-5">
-            <div class="nav-col d-f f-c c-newsletter">
-                <h3 class="title">
-                    Newsletter
-                </h3>
-                <div class="newsletter">
-                    <input type="text" placeholder="Your email address"/>
-                    <button class="btn">Subscribe</button>
-                </div>
-                <span class="desc">Get aviation insights, market news, and expert updates delivered to your inbox.</span>
-                <div class="d-f c-social f-wrap">
-                    <a href="javascript:void(0)"><i class="atg atg-circle-zalo"></i></a>
-                    <a href="javascript:void(0)"><i class="atg atg-circle-linked"></i></a>
-                    <a href="javascript:void(0)"><i class="atg atg-circle-fb"></i></a>
-                    <a href="javascript:void(0)"><i class="atg atg-circle-yt"></i></a>
-                    <a href="javascript:void(0)"><i class="atg atg-circle-tiktok"></i></a>
                 </div>
             </div>
-        </div>
+            <div class="c-6 c-l-2 c-x-2">
-        <div class="c-12 c-m-6 c-l-3 c-x-3">
+                <div class="nav-col d-f f-c">
-            <div class="nav-col d-f f-c">
+                    <h3 class="title">Company</h3>
-                <h3 class="title">Our Gallery</h3>
+                    <a href="#" class="nav-link">About Us</a>
-                <div class="r-n-g galleries">
+                    <a href="#" class="nav-link">Expertise</a>
-                    <div class="c-4"> <a href="" class="item"><img class="w-100" src="~/images/layout/g1.jpg" /></a></div>
+                    <a href="#" class="nav-link">Sustainability</a>
-                    <div class="c-4"> <a href="" class="item"><img class="w-100" src="~/images/layout/g2.jpg" /></a></div>
+                    <a href="#" class="nav-link">News & Media</a>
-                    <div class="c-4"> <a href="" class="item"><img class="w-100" src="~/images/layout/g3.jpg" /></a></div>
+                    <a href="#" class="nav-link">Case Studies</a>
-                    <div class="c-4"> <a href="" class="item"><img class="w-100" src="~/images/layout/g4.jpg" /></a></div>
+                    <a href="#" class="nav-link">Contacts</a>
-                    <div class="c-4"> <a href="" class="item"><img class="w-100" src="~/images/layout/g5.jpg" /></a></div>
+                </div>
-                    <div class="c-4"> <a href="" class="item"><img class="w-100" src="~/images/layout/g6.jpg" /></a></div>
+            </div>
+            <div class="c-12 c-m-6 c-l-4 c-x-5">
+                <div class="nav-col d-f f-c c-newsletter">
+                    <h3 class="title">
+                        Newsletter
+                    </h3>
+                    <div class="newsletter">
+                        <input type="text" placeholder="Your email address" />
+                        <button class="btn">Subscribe</button>
+                    </div>
+                    <span class="desc">Get aviation insights, market news, and expert updates delivered to your inbox.</span>
+                    <div class="d-f c-social f-wrap">
+                        <a href="javascript:void(0)"><i class="atg atg-circle-zalo"></i></a>
+                        <a href="javascript:void(0)"><i class="atg atg-circle-linked"></i></a>
+                        <a href="javascript:void(0)"><i class="atg atg-circle-fb"></i></a>
+                        <a href="javascript:void(0)"><i class="atg atg-circle-yt"></i></a>
+                        <a href="javascript:void(0)"><i class="atg atg-circle-tiktok"></i></a>
+                    </div>
+                </div>
+            </div>
+            <div class="c-12 c-m-6 c-l-3 c-x-3">
+                <div class="nav-col d-f f-c">
+                    <h3 class="title">Our Gallery</h3>
+                    <div class="r-n-g galleries">
+                        <div class="c-4"> <a href="" class="item"><img class="w-100" src="~/images/layout/g1.jpg" /></a></div>
+                        <div class="c-4"> <a href="" class="item"><img class="w-100" src="~/images/layout/g2.jpg" /></a></div>
+                        <div class="c-4"> <a href="" class="item"><img class="w-100" src="~/images/layout/g3.jpg" /></a></div>
+                        <div class="c-4"> <a href="" class="item"><img class="w-100" src="~/images/layout/g4.jpg" /></a></div>
+                        <div class="c-4"> <a href="" class="item"><img class="w-100" src="~/images/layout/g5.jpg" /></a></div>
+                        <div class="c-4"> <a href="" class="item"><img class="w-100" src="~/images/layout/g6.jpg" /></a></div>
+                    </div>
                 </div>
             </div>
         </div>

TWA-App/Views/Partial/MenuAP.cshtml

@@ -9,7 +9,7 @@
     if (i.SubItem == null)
     {
         <div class="nav-i">
-            <a href="@i.Url" @Html.Raw(i.IsFlexPage) nav-id ="@i.ID" class="nav-item">@i.Name</a>
+            <a href="@i.Url" app-nav nav-id="@i.ID" class="nav-item">@i.Name</a>
         </div>
     }
     else
@@ -38,8 +38,10 @@
                                                 list = "";
                                             }
                                             groupHtml = $"<div class=\"c-l-4 c-x-3\"><div class=\"nav-col d-f f-c\"><h3 class=\"title\">{j.Name}</h3>{{0}}</div></div>";
-                                        }else{
+                                        }
-                                            list += $"<div class=\"nav-i\"><a href=\"{j.Url}\" {j.ToFlexPageAttribute()} nav-id=\"{j.ID}\" class=\"nav-link\"><span>{j.Name}</span></a></div>";
+                                        else
+                                        {
+                                            list += $"<div class=\"nav-i\"><a href=\"{j.Url}\" {j.ToFlexPageAttribute()} app-nav nav-id=\"{j.ID}\" class=\"nav-link\"><span>{j.Name}</span></a></div>";
                                         }
                                        
                                     }
@@ -61,7 +63,7 @@
                     <div class="sub-item">
                         @foreach (var j in i.SubItem)
                         {
-                            <div class="nav-i"><a href="@j.Url" @j.ToFlexPageAttribute() nav-id="@j.ID" class="nav-link"><span>@j.Name</span></a></div>
+                            <div class="nav-i"><a href="@j.Url" @j.ToFlexPageAttribute() app-nav nav-id="@j.ID" class="nav-link"><span>@j.Name</span></a></div>
                         }
                     </div>
                     break;

TWA-App/wwwroot/css/atg-font/atg-admin-font.css

@@ -386,4 +386,16 @@
 
 .atg-client:before {
     content: '\a051'
+}
+
+.atg-circle-question:before {
+    content: '\a052'
+}
+
+.atg-mess-question:before {
+    content: '\a053'
+}
+
+.atg-mess-question1:before {
+    content: '\a054'
 }

TWA-App/wwwroot/css/atg-lib/atg-core.css

@@ -104,7 +104,7 @@ h1, h2, h3, h4, h5, h6, p {
 }
 
 .h-100 {
-    height: 100%;
+    height: 100% !important;
 }
 
 .w-100 {

TWA-App/wwwroot/css/site.css

@@ -50,6 +50,11 @@
     transform:translateZ(0)
 }
 
+.ne-margin{
+    margin-left: -10px;
+    margin-right: -10px
+}
+
 .f-header {
     top: -65px
 }
@@ -103,6 +108,7 @@ h1, h2, h3, h4, h5, h6, h7, p, span, div {
     }
 }
 
+
 a {
     display: block;
     position: relative;
@@ -170,21 +176,36 @@ body {
     color: var(--text-color-dark)
 }
 
-#header {
+body[page="1000"] #header {
     position: absolute;
     width: 100%;
     z-index: 1000;
+    background: transparent !important
+}
+
+#header{
+    position:relative;
+    width: 100%;
+    background: white
 }
 
 [class*=hblock] {
     font-size: .9rem;
 }
-    [class*=hblock] a {
+body[page="1000"] [class*=hblock] a{
-        color: var(--text-color-white)
+    color: var(--text-color-white) 
-    }
+}
+
+[class*=hblock] a {
+    color: var(--text-color-dark)
+}
+
+body[page="1000"] .hblock1 {
+    border-bottom: 1px solid var(--border-color-1) !important
+}
 
 .hblock1 {
-    border-bottom: 1px solid var(--border-color-1)
+    border-bottom: 1px solid var(--border-color-2) !important
 }
     .hblock1 .btn {
         transition: all .3s ease-in-out;
@@ -215,13 +236,16 @@ body {
         text-transform: capitalize;
         display: flex;
         padding: 15px;
-        transition: color .3s ease-in-out;
+        transition: color .3s ease-in-out
-        color: var(--text-color-white)
     }
 
-    .navmain .nav-item:hover, .navmain .nav-item.active, .navmain [data-dropdown].active .nav-item{
+body[page="1000"] .navmain .nav-item:hover, body[page="1000"] .navmain .nav-item.active, body[page="1000"] .navmain [data-dropdown].active .nav-item, .f-header .navmain .nav-item:hover, .f-header .navmain .nav-item.active, .f-header .navmain [data-dropdown].active .nav-item {
-        color: var(--text-color-lW1)
+    color: var(--text-color-lW1)
-    }
+}
+
+.navmain .nav-item:hover, .navmain .nav-item.active, .navmain [data-dropdown].active .nav-item {
+    color: var(--color-second)
+}
 
 
 .sub-nav-full{
@@ -259,14 +283,17 @@ body {
     transition: .3s all ease-in-out
 }
 
-.sub-item .nav-link {
+.sub-item  .nav-link{
     padding: 10px 15px;
-    transition: .3s all ease-in-out;
+    transition: .3s all ease-in-out
+}
+
+body[page="1000"] .sub-item .nav-link, .sub-item .nav-link {
     color: var(--text-color-dark)
 }
 
 .nav-link:hover{
-    color: var(--color-primary);
+    color: var(--color-primary) !important;
     padding-left: 25px;
     background: var(--color-1)
 }
@@ -640,10 +667,14 @@ div[class*=sec]{
 
 
 .section {
-    font-size: 1rem;
     padding: 100px 0 70px
 }
 
+    .section .r > .r-n-g, .c-footer-1  .r > .r-n-g{
+        width: calc(100% + 40px);
+        margin: auto -20px
+    }
+
 .desc {
     line-height: 1.8
 }
@@ -810,7 +841,7 @@ div[class*=sec]{
 .order-list li {
     color: var(--text-color-dark);
     text-transform: capitalize;
-    font-weight: 500;
+    font-weight: 400;
 }
 
     .order-list li:first-child {
@@ -824,6 +855,15 @@ div[class*=sec]{
     padding-left: 30px;
     margin: 4px 0px;
 }
+.order-list .atg {
+    color: var(--color-primary);
+    left: -30px;
+}
+
+    .order-list .atg:before {
+        margin-bottom: 4px;
+    }
+
 
 .section-break{
     padding: 150px 0
@@ -855,6 +895,10 @@ div[class*=sec]{
     padding-bottom: 30px
 }
 
+.about-section .order-list li{
+    font-weight: 500
+}
+
 .block-about {
     padding: 80px 0 0
 }
@@ -899,15 +943,6 @@ div[class*=sec]{
         transform: scale(1.1);
     }
 
-.about-section .order-list .atg {
-    color: var(--color-primary);
-    left: -30px;
-}
-
-    .about-section .order-list .atg:before {
-        margin-bottom: 4px;
-    }
-
 .signature img {
     width: 125px;
 }
@@ -976,11 +1011,6 @@ div[class*=sec]{
         }
     }
 
-    @media (min-width: 992px){
-        .perf-section h1 {
-            font-size: 2.5rem;
-        }
-    }
 
 /***End Section***/
 
@@ -1143,7 +1173,7 @@ div[class*=sec]{
 /**End Section*/
 /***Section Partner***/
 .partner-section{
-    padding: 80px 0
+    padding: 80px 0 140px
 }
 
 .partner-section:before{
@@ -1156,19 +1186,107 @@ div[class*=sec]{
 .tabQuoute .tabcontent {
     padding: 30px
 }
-/***End Section***/
+
-/**Blog Section*/
+.tabQuoute h2{
-.blog-section .title {
+    font-size: 1.8rem
-    text-align: center
 }
 
+.tabQuoute .tabcontents {
+    background: white;
+    border-bottom-left-radius: var(--radius);
+    border-bottom-right-radius: var(--radius)
+}
+
+.tabQuoute .atabs{
+    background: white;
+    border-top-left-radius: var(--radius);
+    border-top-right-radius: var(--radius);
+    opacity: .9
+}
+
+.quote-section {
+    margin-top: -76px;
+    padding-top: 0;
+    padding-bottom: 80px
+}
+
+.quote-section .order-list li {
+    font-size: .9rem;
+    color: var(--text-color-lW2)
+}
+
+
+
+.quote-section .photo-content{
+    margin-left:auto;
+    margin-right: auto;
+    width: 70%;
+    margin-top: 60px;
+    position:relative;
+    right:0;
+    bottom: 0
+}
+
+
+@media (min-width: 992px) {
+    .quote-section .photo-content {
+        margin-top:0;
+        width: 50%;
+        position: absolute;
+        right: -65px;
+        bottom: -40px;
+    }
+}
+
+@media (min-width: 1200px){
+    .quote-section{
+        padding-bottom: 140px
+    }
+
+    .quote-section .photo-content {
+        width: 40%;
+        right: -80px;
+        bottom: -80px;
+    }
+}
+
+.quote-quess {
+    color: #a6c4d0;
+    width: 80%;
+    padding: 20px;
+    border-radius: var(--radius);
+    border: 1px solid #a6c4d0;
+    border-left-width: 3px
+}
+    .quote-quess h3 {
+        margin-top: 15px
+    }
+
+    .quote-quess p{
+        margin-top: 10px;
+        color: var(--text-color-dark)
+    }
+/***End Section***/
+    
+/**Blog Section*/
+    .blog-section .title {
+        text-align: center
+    }
+
 .blog-section .grid-image{
     overflow:hidden;
     max-height:230px;
 }
 
+.ourBlogSwiper .swiper-slide{
+    height: 100%;
+}
+
+
+
 .blog-section .grid{
-    height: calc(100% - 40px)
+    margin:0;
+    height: 100%
 }
 .blog-author {
     position: absolute;
@@ -1207,6 +1325,7 @@ div[class*=sec]{
 
 /**Footer Section*/
 #footer{
+    z-index: -1;
     color: var(--text-color-dark)
 }
 
@@ -1284,8 +1403,7 @@ div[class*=sec]{
 
 .c-footer-1 {
     background: var(--text-color-white);
-    padding-top: 50px;
+    padding:40px 0
-    padding-bottom: 80px
 }
 
 .c-footer-1 .title {
@@ -1424,3 +1542,135 @@ div[class*=sec]{
 }
 
 /********************* End ***********************/
+/***Form Control****/
+ .form-control {
+    padding: .438rem 20px;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #d8d6de;
+    border-radius: .357rem;
+}
+.form-control:focus, .form-group input:focus, .con-aselect.active .aselect, .form-group > .input-custom:focus-within {
+        background-color: #fff;
+        border-color: var(--color-primary);
+        -webkit-box-shadow: 0 3px 10px 0 rgb(34 41 47 / 10%);
+        box-shadow: 0 3px 10px 0 rgb(34 41 47 / 10%);
+    }
+
+.form-group > .input-custom input:focus {
+    border: none !important;
+    box-shadow: none !important
+}
+
+
+.form-control:focus {
+    color: #6e6b7b;
+    outline: 0;
+}
+
+.form-control:hover {
+    cursor: text;
+}
+
+.form-control {
+    display: block;
+    width: 100%;
+    height: 2.714rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.45;
+    color: #6e6b7b;
+    -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+}
+
+.form-group {
+    display: flex;
+    margin-bottom: 15px;
+    padding: 0 10px
+}
+
+.form-group input[type=radio]{
+    width: 20px;
+    height:20px
+}
+
+    .form-group label:not(.rd-value) {
+        font-weight: 500;
+        margin-bottom: 10px
+    }
+    .form-group .invalid, .form-group .invalid:focus {
+        border-color: #ea5455;
+        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ea5455'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23ea5455' stroke='none'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-size: 20px;
+        background-position: right 0.4rem center
+    }
+
+    .form-group input:disabled {
+        background-color: #efefef
+    }
+
+    .form-group > .input-custom {
+        border: 1px solid #d8d6de;
+        border-radius: .357rem;
+        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out
+    }
+
+        .form-group > .input-custom input {
+            border: none !important
+        }
+
+        .form-group > .input-custom:focus-within .input-append.right, .form-group > .input-custom:focus-within .input-append.left {
+            border-color: #7367f0
+        }
+
+    .form-group .minus, .form-group .plus {
+        cursor: pointer
+    }
+
+    .form-group > .input-custom .input-append {
+        padding: .438rem 1rem;
+        margin-bottom: 0;
+        text-align: center;
+        background-color: #fff;
+        border-radius: .357rem;
+        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out
+    }
+
+        .form-group > .input-custom .input-append.right {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            border-left: 1px solid #d8d6de
+        }
+
+        .form-group > .input-custom .input-append.left {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right: 1px solid #d8d6de
+        }
+
+    .form-group .form-control, .form-group .aselect, .form-group textarea {
+        font-size: .85rem;
+        width: 100%;
+        cursor: text;
+        padding: 8px 25px 8px 15px;
+        height: 38px;
+        background-color: #fff;
+        background-clip: padding-box;
+        border: 1px solid #d8d6de;
+        border-radius: .357rem;
+        -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+        transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out
+    }
+
+    .form-group textarea {
+        height: auto !important;
+        resize: none
+    }
+
+/*********End************/

TWA-App/wwwroot/js/js-page/1000.js

@@ -112,6 +112,28 @@ window.L1000 = function () {
             tickingC = true;
         }
     });
+    const swiper2 = new Swiper('.ourBlogSwiper', {
+        slidesPerView: 1,
+        spaceBetween: 40,
+        autoplay: {
+            delay: 2000,      // 5s
+            disableOnInteraction: true, 
+        },
+        loop: true,  // bật loop để chạy liên tục
+        speed: 1000,
+        navigation: {
+            nextEl: ".swiper-button-next",
+            prevEl: ".swiper-button-prev",
+        },
+        loopedSlides: 5,  // số slide duplicate
+        breakpoints: {
+            1400: { slidesPerView: 4 },
+            992: { slidesPerView: 3 },  // màn hình ≥1200px
+            576: { slidesPerView: 2 },  // ≥768px=
+            0: { slidesPerView: 1 }   // <576px
+        },
+    });
+
 
 }
 function animateCount(el) {

TWA-App/wwwroot/js/libs/js-core.js

@@ -667,11 +667,19 @@ class AApp extends window.AObject {
         this.cachePage.searchFlexPage(url, ((result) => {
             if (result) {
                 this.cachePage.get(result.layout.linkID, ((result1) => {
-                    console.log(result);
-
                     if (result1) {
-                        console.log(result);
+                        const a = result.layout.info;
-                        this.setContentPage(result1, url); 
+                        const doc2 = new DOMParser().parseFromString(result1.doc, "text/html");
+                        const doc = doc2.firstChild.querySelector("head");
+                        const obj = {
+                            html: result1.html,
+                            title: a.title,
+                            idPage: a.idPage,
+                            lName: a.lName,
+                            doc: doc,
+                            dynamicF: a.dynamicF
+                        };
+                        this.setContentPage(obj, url); 
                     } else {
                         this.getPage(url, result)
                     }
@@ -703,13 +711,13 @@ class AApp extends window.AObject {
     contentPage(page, url) {
         document.title = page.title + " - " + this.pageName;
         var meta = document.head.querySelector("meta[name=idPage]");
+        document.body.setAttribute("page", page.idPage);
         meta.content = page.idPage;
         meta.setAttribute("layName", page.lName);       
         this.loadContentPage(page.html);
         window.history.pushState({"url":url}, page.title, url);
     }
     setContentPage(page, url) {
-       
         this.contentPage(page, url);
         var l = new LoadScriptAsync("Page");
         if (this.isRedirectPage) {
@@ -773,8 +781,7 @@ class AApp extends window.AObject {
         }
     }
     callLoadLayout(lName) {
-        this.cachePage.get(lName, ((result) => {
+        this.cachePage.get("layout|" + lName, ((result) => {
-            
             if (result) {
                 this.setLayout(result);  // Set content page từ cache
             } else {
@@ -910,18 +917,17 @@ class CacheManager {
             (type === "page") ? callback(this.pageMap.get(id)) : callback(this.layoutMap.get(id));
         });
     }
-
+    
     // Lấy dữ liệu từ cache (localStorage hoặc IndexedDB nếu cần)
-    get(id, callback, type = "page") {
+    get(id, callback, type = "cahce") {
         this._onReady(() => {
-            const key = this._key(id, type);
+            this.storage.get(id, (data) => {
-            this.storage.get(key, (data) => {
                 if (!data) {
                     callback(null);
                     return;
                 }
                 callback(data);
-            });
+            }, false, type);
         });
     }
     searchFlexPage(url, callback) {
@@ -942,7 +948,7 @@ class CacheManager {
                     html: obj.html,
                     doc: obj.doc.innerHTML
                 };
-                const info = {
+                let info = {
                     title: obj.title,
                     idPage: obj.idPage,
                     lName: obj.lName,
@@ -950,7 +956,16 @@ class CacheManager {
                 };
                 // Lưu dữ liệu htmlData vào storage
                 const idN = this.genShortID();
-                let url = (obj.flexPageID !== "None") ? obj.flexPageID : window.getPathFromUrl(id);
+                let url = window.getPathFromUrl(id);
+                if (obj.flexPageID !== "None" && obj.flexPageID !== "") {
+                    if (obj.dynamicF !== null && obj.dynamicF !== undefined && obj.dynamicF != "") {
+                        url = obj.flexPageID;
+                        info = {
+                            lName: obj.lName,
+                            dynamicF: obj.dynamicF
+                        }
+                    }
+                }
                 this.flexPages.insert(url, { "linkID": idN, "info": info });
                 this.storage.set(idN, htmlData, function () { }, type = "flex");
                 if (this.countFP > 5) {