ess

src/app/components/employee-self-service/employee-self-service.component.html

 <app-header></app-header>
 
-<main class="wrapper">
-  <div class="page-grid">
+<main class="mx-auto max-w-[1400px] px-4 lg:px-8 py-8 mt-5rem">
 
-    <!-- ── HERO (ซ้าย) ─────────────────────────── -->
-    <aside class="hero-card bp-glow">
+  <!-- ░░ FLEX WRAPPER ░░ -->
+  <div class="flex flex-col lg:flex-row gap-10">
+
+    <!-- ◀︎ HERO -->
+    <aside class="hero-card bp-glow shrink-0 self-center lg:self-start">
       <img src="assets/img/logos/HRD/1.png"
            alt="Performance illustration"
            class="hero-img" />
@@ -19,10 +21,13 @@
       </a>
     </aside>
 
-    <!-- ── MENU GRID (ขวา) ──────────────────────── -->
-    <section class="sub-grid">
-      <div *ngFor="let m of modules" class="sub-card">
-        <p class="sub-title">{{ m.title }}</p>
+    <!-- ▶︎ MENU (ยังใช้ CSS-Grid ภายใน) -->
+    <section class="flex-grow">
+      <div class="grid gap-6 grid-cols-2 sm:grid-cols-3 md:grid-cols-4
+                  xl:grid-cols-4 auto-rows-[150px]">
+        <div *ngFor="let m of modules" class="sub-card aspect-square">
+          <p class="sub-title">{{ m.title }}</p>
+        </div>
       </div>
     </section>
 

src/app/components/employee-self-service/employee-self-service.component.scss

 /* ===== base variables ===== */
-$size-card: 150px; // ( ≥1280px จะขยายเป็น 170 )
-$col-hero: 280px; // ความกว้างคอลัมน์ซ้าย
-$gap-main: 2.5rem;
-$radius-main: 28px;
-$radius-sub: 20px;
-$dur: 0.35s;
-$easing: cubic-bezier(0.4, 0, 0.2, 1);
-$shadow-base: 0 14px 30px -12px rgba(0, 0, 0, 0.18);
-$shadow-deep: 0 20px 42px -16px rgba(0, 0, 0, 0.24);
+$size-card   : 150px;         // ( ≥1280px จะขยายเป็น 170 )
+$col-hero    : 280px;         // ความกว้างคอลัมน์ซ้าย
+$gap-main    : 2.5rem;
+$radius-main : 28px;
+$radius-sub  : 20px;
+$dur         : .35s;
+$easing      : cubic-bezier(.4,0,.2,1);
+$shadow-base : 0 14px 30px -12px rgba(0,0,0,.18);
+$shadow-deep : 0 20px 42px -16px rgba(0,0,0,.24);
 
 /* ===== wrapper ===== */
-.hero-wrap {
-  display: flex;
-  justify-content: center;   /* ให้อยู่กลางแถว */
-  align-items: flex-start;
-  width: 100%;
+.wrapper { max-width: 1400px; margin: 0 auto; padding: 3rem 1.25rem; margin-top: 5rem; }
 
-  /* ถ้าเซ็ตคอลัมน์ “ซ้าย-ขวา” ด้วย Grid ภายนอกอยู่แล้ว
-     hero-wrap อาจไม่ต้อง flex; ใส่แค่ max-width ก็พอ */
-}
-.wrapper {
-  max-width: 1400px;
-  margin: 0 auto;
-  margin-top: 5rem;
-  padding: 3rem 1.25rem;
-}
 /* ===== GRID ชั้นแรก ===== */
 .page-grid {
   display: grid;
-  gap: $gap-main;                   // ช่องไฟหลัก
+  gap: $gap-main;
   grid-template-columns: $col-hero 1fr;
-  justify-items: start;             // จัดบล็อกชิดซ้าย
 
-  /* จอ < 768px ➜ 1 คอลัมน์ */
-  @media (max-width: 767px) {
-    grid-template-columns: 1fr;     // 👉 สลับเป็นคอลัมน์เดียว
-    row-gap: 2rem;                  // ช่องไฟระหว่างแถว
+  @media (max-width: 1023px) {       /* < lg : 1 คอลัมน์ */
+    grid-template-columns: 1fr;
   }
 }
 
 /* ===== HERO CARD (คงเดิม – ตัด flex ออก) ===== */
 .hero-card {
-  width: 100%;              /* ยืดเต็มคอลัมน์ */
-  max-width: 280px;         /* แต่กว้างไม่เกิน 280px */
+  width: 100%;
+  max-width: 280px;             // ไม่เกินจอ desktop
   box-sizing: border-box;
-
-  /* ⬇︎ PADDING ยืดหดตามจอ: 1rem–1.75rem */
   padding-inline: clamp(1rem, 4vw, 1.75rem);
   padding-block: 2rem 3rem;
-
-  /* —— ส่วนสไตล์เดิม (shadow, glow, hover ฯลฯ) —— */
   position: relative;
   border-radius: $radius-main;
+  padding: 2rem 1.75rem 3rem;
   background: #fff;
   box-shadow: $shadow-base;
+  text-align: center;
   display: grid;
   place-items: center;
   gap: 1.3rem;
-  text-align: center;
-  transition: transform $dur $easing,
-              box-shadow $dur $easing;
+  transition: transform $dur $easing, box-shadow $dur $easing;
 
   &:hover { transform: translateY(-6px); box-shadow: $shadow-deep; }
 
+  /* glow */
   &.bp-glow::before {
     content: '';
     position: absolute;
@@ -76,87 +57,61 @@ $shadow-deep: 0 20px 42px -16px rgba(0, 0, 0, 0.24);
   }
   &:hover.bp-glow::before { opacity: .27; }
 }
-.hero-img {
-  width: 10rem;
-}
-.hero-label {
-  font: 600 0.95rem/1.2 "Inter", sans-serif;
-  color: #3b82f6;
-}
-.hero-title {
-  font: 700 1.5rem/1.3 "Inter", sans-serif;
-  color: #1e3a8a;
-}
-.hero-btn {
-  @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-full px-10 py-2 transition;
-}
-.back-link {
-  position: absolute;
-  left: 1.75rem;
-  bottom: 1rem;
-  font-size: 0.9rem;
-  color: #64748b;
-  transition: color 0.25s;
-  &:hover {
-    color: #3b82f6;
-  }
-}
-/* รูปย่ออัตโนมัติบนจอแคบ */
-@media (max-width: 480px){
-  .hero-img  { max-width: 65%; }
-  .hero-wrap { padding-inline: 0; }       /* ตัด margin ซ้าย-ขวา */
+@media (max-width: 639px){
+  .hero-img { max-width: 68%; }
 }
+.hero-img   { width: 10rem; }
+.hero-label { font: 600 .95rem/1.2 'Inter',sans-serif; color:#3b82f6; }
+.hero-title { font: 700 1.5rem/1.3 'Inter',sans-serif; color:#1e3a8a; }
+.hero-btn   { @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-full px-10 py-2 transition; }
+.back-link  { position: absolute; left: 1.75rem; bottom: 1rem; font-size: .9rem; color:#64748b; transition: color .25s;
+              &:hover { color:#3b82f6; } }
+
 /* ===== GRID ชั้นสอง – เมนูย่อย 2 แถวพอดี ===== */
 .sub-grid {
   display: grid;
-  grid-auto-flow: column; /* เติมแนวนอนก่อน */
-  grid-template-rows: repeat(2, $size-card);
+  grid-auto-flow: column;                /* เติมแนวนอนก่อน */
+  grid-template-rows: repeat(2,$size-card);
   grid-auto-columns: $size-card;
   gap: 1.5rem;
   place-content: start;
-
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
   /* ≥1280px ขยายการ์ด */
   @media (min-width: 1280px) {
-    grid-template-rows: repeat(2, 170px);
+    grid-template-rows: repeat(2,170px);
     grid-auto-columns: 170px;
   }
 
   /* มือถือ: 2 คอลัมน์เสมอ */
   @media (max-width: 639px) {
-    grid-template-rows: repeat(2, 46vw);
+    grid-template-rows: repeat(2,46vw);
     grid-auto-columns: 46vw;
   }
 }
 
 /* ===== SUB-CARD + เอฟเฟกต์ ===== */
 .sub-card {
+  aspect-ratio: 1 / 1;
   position: relative;
   border-radius: $radius-sub;
-  background: rgba(255, 255, 255, 0.5); /* glass */
+  background: rgba(255,255,255,.5);       /* glass */
   backdrop-filter: blur(9px) saturate(170%);
-  box-shadow: 0 8px 18px -10px rgba(71, 85, 105, 0.25);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding: 1rem;
-  cursor: pointer;
-  user-select: none;
-  transition: transform 0.45s $easing, box-shadow 0.45s $easing,
-    background 0.45s;
+  box-shadow: 0 8px 18px -10px rgba(71,85,105,.25);
+  display: flex; align-items: center; justify-content: center;
+  text-align: center; padding: 1rem;
+  cursor: pointer; user-select: none;
+  transition: transform .45s $easing, box-shadow .45s $easing, background .45s;
 
   /* gradient rim */
   &::before {
-    content: "";
-    position: absolute;
-    inset: 0;
+    content: '';
+    position: absolute; inset: 0;
     border-radius: inherit;
     padding: 1px;
-    background: linear-gradient(160deg, #60a5fa, #818cf8 50%, #a855f7);
+    background: linear-gradient(160deg,#60a5fa,#818cf8 50%,#a855f7);
     mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     mask-composite: exclude;
-    opacity: 0.45;
-    transition: opacity 0.4s;
+    opacity: .45; transition: opacity .4s;
   }
 
   &:hover {
@@ -164,14 +119,12 @@ $shadow-deep: 0 20px 42px -16px rgba(0, 0, 0, 0.24);
     transform: translateY(-7px) rotateX(5deg) rotateY(-3deg);
     box-shadow: $shadow-deep;
 
-    &::before {
-      opacity: 0.9;
-    }
+    &::before { opacity: .9; }
   }
 }
 .sub-title {
   font-weight: 600;
-  font-size: 0.9rem;
+  font-size: .9rem;
   line-height: 1.25rem;
   color: #2563eb;
   pointer-events: none;