feat: Improve home and contact CMS field guidance

2026-04-10 01:38:30 +07:00
parent ed09c7fa89
commit 7ce5921fe0
15 changed files with 529 additions and 230 deletions
--- a/views/admin/home/sections/achievements.ejs
+++ b/views/admin/home/sections/achievements.ejs
@@ -19,6 +19,8 @@
                id="achievementsHeading"
                value="<%= data.achievements?.heading || '' %>"
                placeholder="e.g., Our Achievements in Numbers"
+                maxlength="56"
+                data-maxlength="56"
              />
            </div>
            <div class="col-md-6">
@@ -29,6 +31,8 @@
                id="achievementsSubheading"
                value="<%= data.achievements?.subheading || '' %>"
                placeholder="e.g., Did You Know"
+                maxlength="32"
+                data-maxlength="32"
              />
            </div>
          </div>
@@ -59,8 +63,11 @@
                  <input
                    type="text"
                    class="form-control achievement-value"
+                    id="achievementValue_<%= i %>"
                    value="<%= item.value || '' %>"
                    placeholder="e.g., 95"
+                    maxlength="6"
+                    data-maxlength="6"
                  />
                </div>
                <div class="col-md-3">
@@ -68,8 +75,11 @@
                  <input
                    type="text"
                    class="form-control achievement-suffix"
+                    id="achievementSuffix_<%= i %>"
                    value="<%= item.suffix || '' %>"
                    placeholder="e.g., %"
+                    maxlength="4"
+                    data-maxlength="4"
                  />
                </div>
                <div class="col-md-6">
@@ -77,16 +87,22 @@
                  <input
                    type="text"
                    class="form-control achievement-label"
+                    id="achievementLabel_<%= i %>"
                    value="<%= item.label || '' %>"
                    placeholder="e.g., Visa Success Rate"
+                    maxlength="40"
+                    data-maxlength="40"
                  />
                </div>
                <div class="col-md-12">
                  <label class="form-label fw-medium">Description</label>
                  <textarea
                    class="form-control achievement-description"
+                    id="achievementDescription_<%= i %>"
                    rows="2"
                    placeholder="Short description of this achievement"
+                    maxlength="120"
+                    data-maxlength="120"
                  ><%= item.description || '' %></textarea>
                </div>
              </div>
--- a/views/admin/home/sections/blogPreview.ejs
+++ b/views/admin/home/sections/blogPreview.ejs
@@ -16,12 +16,14 @@
            <div class="col-md-6">
              <label class="form-label fw-medium">Heading</label>
              <input type="text" class="form-control" id="blogPreviewHeading"
-                value="<%= data.blogPreview?.heading || '' %>" placeholder="e.g., Latest Insights & Updates" />
+                value="<%= data.blogPreview?.heading || '' %>" placeholder="e.g., Latest Insights & Updates"
+                maxlength="64" data-maxlength="64" />
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Subheading</label>
              <input type="text" class="form-control" id="blogPreviewSubheading"
-                value="<%= data.blogPreview?.subheading || '' %>" placeholder="e.g., Visa Tips & Guides" />
+                value="<%= data.blogPreview?.subheading || '' %>" placeholder="e.g., Visa Tips & Guides"
+                maxlength="40" data-maxlength="40" />
            </div>

            <div class="col-md-12 mt-4">
@@ -88,12 +90,14 @@
            <div class="col-md-6">
              <label class="form-label fw-medium">Label</label>
              <input type="text" class="form-control" id="blogPreviewCtaLabel"
-                value="<%= data.blogPreview?.ctaButton?.label || '' %>" placeholder="e.g., View All Articles" />
+                value="<%= data.blogPreview?.ctaButton?.label || '' %>" placeholder="e.g., View All Articles"
+                maxlength="32" data-maxlength="32" />
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Link</label>
              <input type="text" class="form-control" id="blogPreviewCtaHref"
-                value="<%= data.blogPreview?.ctaButton?.href || '' %>" placeholder="/blog" />
+                value="<%= data.blogPreview?.ctaButton?.href || '' %>" placeholder="/blog"
+                maxlength="255" data-maxlength="255" />
            </div>
          </div>
        </div>
@@ -172,4 +176,4 @@
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
-</style>
+</style>
--- a/views/admin/home/sections/faq.ejs
+++ b/views/admin/home/sections/faq.ejs
@@ -14,17 +14,17 @@
            <div class="col-md-6">
              <label class="form-label fw-medium">Heading</label>
              <input type="text" class="form-control" id="faqHeading" value="<%= data.faq?.heading || '' %>"
-                placeholder="e.g., Got Questions? We've Got Answers" />
+                placeholder="e.g., Got Questions? We've Got Answers" maxlength="64" data-maxlength="64" />
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Subheading</label>
              <input type="text" class="form-control" id="faqSubheading" value="<%= data.faq?.subheading || '' %>"
-                placeholder="e.g., Visa FAQs" />
+                placeholder="e.g., Visa FAQs" maxlength="40" data-maxlength="40" />
            </div>
            <div class="col-md-12">
              <label class="form-label fw-medium">Description</label>
              <textarea class="form-control" id="faqDescription" rows="3"
-                placeholder="Enter description"><%= data.faq?.description || '' %></textarea>
+                placeholder="Enter description" maxlength="220" data-maxlength="220"><%= data.faq?.description || '' %></textarea>
            </div>
          </div>
        </div>
@@ -69,6 +69,8 @@
                    class="form-control"
                    id="faqQuestion_<%= index %>"
                    value="<%= item.question || '' %>"
+                    maxlength="120"
+                    data-maxlength="120"
                    placeholder="Enter question"
                  />
                </div>
@@ -78,6 +80,8 @@
                    class="form-control"
                    id="faqAnswer_<%= index %>"
                    rows="3"
+                    maxlength="320"
+                    data-maxlength="320"
                    placeholder="Enter answer"
                  ><%= item.answer || '' %></textarea>
                </div>
@@ -102,12 +106,12 @@
            <div class="col-md-6">
              <label class="form-label fw-medium">Label</label>
              <input type="text" class="form-control" id="faqCtaLabel" value="<%= data.faq?.ctaButton?.label || '' %>"
-                placeholder="e.g., contact us" />
+                placeholder="e.g., contact us" maxlength="32" data-maxlength="32" />
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Link</label>
              <input type="text" class="form-control" id="faqCtaHref" value="<%= data.faq?.ctaButton?.href || '' %>"
-                placeholder="/contact" />
+                placeholder="/contact" maxlength="255" data-maxlength="255" />
            </div>
          </div>
        </div>
@@ -145,4 +149,4 @@
      items
    };
  };
-</script>
+</script>
--- a/views/admin/home/sections/floatingContact.ejs
+++ b/views/admin/home/sections/floatingContact.ejs
@@ -48,7 +48,8 @@
              <label class="form-label fw-medium">Brand Image</label>
              <div class="input-group mb-2">
                <input type="text" class="form-control" id="floatingContactBrandImage"
-                  value="<%= data.floatingContact?.brand?.imageSrc || '' %>" placeholder="/assets/img/logo/black-logo.svg" />
+                  value="<%= data.floatingContact?.brand?.imageSrc || '' %>" placeholder="/assets/img/logo/black-logo.svg"
+                  maxlength="255" data-maxlength="255" />
                <button type="button" class="btn btn-outline-primary btn-upload-image"
                  data-target-input="floatingContactBrandImage" data-image-type="home/floating-contact"
                  data-resize-preset="floatingContactBrandImage">
@@ -63,7 +64,7 @@
                  style="height: 120px; width: 120px; object-fit: contain; background: #fff;"
                  alt="Brand preview" />
              </div>
-              <small class="text-muted d-block mt-2">Raster logo uploads are normalized to 104x104 WebP to match the homepage widget.</small>
+              <small class="text-muted d-block mt-2">Hiển thị thực tế khoảng 35x35px. Raster uploads are normalized to 104x104 WebP to match the homepage widget.</small>
            </div>
            <div class="col-lg-6">
              <label class="form-label fw-medium">Fallback Trigger Image</label>
@@ -73,7 +74,8 @@
                  class="form-control"
                  id="floatingContactTriggerImage"
                  value="<%= data.floatingContact?.trigger?.imageSrc || '' %>"
-                  placeholder="/uploads/home/floating-contact/floating-trigger-icon.webp" />
+                  placeholder="/uploads/home/floating-contact/floating-trigger-icon.webp"
+                  maxlength="255" data-maxlength="255" />
                <button
                  type="button"
                  class="btn btn-outline-primary btn-upload-image"
@@ -93,7 +95,7 @@
              </div>
              <input type="hidden" id="floatingContactTriggerIconFallback"
                value="<%= data.floatingContact?.trigger?.icon || 'fa-comments' %>" />
-              <small class="text-muted d-block mt-2">Shown only when the trigger slideshow cannot use the brand image and action icons. Raster uploads are normalized to 96x96 WebP.</small>
+              <small class="text-muted d-block mt-2">Hiển thị thực tế khoảng 26x26px. Shown only when the trigger slideshow cannot use the brand image and action icons. Raster uploads are normalized to 96x96 WebP.</small>
            </div>
          </div>
        </div>
@@ -322,12 +324,12 @@

            <div class="col-lg-9 col-md-8">
              <label class="form-label fw-medium">Link</label>
-              <input type="text" class="form-control floating-contact-action-href" value="${escapeFloatingContactHtml(defaults.href)}" placeholder="https://example.com" />
+              <input type="text" class="form-control floating-contact-action-href" value="${escapeFloatingContactHtml(defaults.href)}" placeholder="https://example.com" maxlength="255" data-maxlength="255" />
            </div>
            <div class="col-12">
              <label class="form-label fw-medium">Icon Image</label>
              <div class="input-group mb-2">
-                <input type="text" class="form-control floating-contact-action-icon-image" id="${escapeFloatingContactHtml(iconInputId)}" value="${escapeFloatingContactHtml(normalizedIconImage)}" placeholder="/uploads/home/floating-contact/floating-action-icon.webp" />
+                <input type="text" class="form-control floating-contact-action-icon-image" id="${escapeFloatingContactHtml(iconInputId)}" value="${escapeFloatingContactHtml(normalizedIconImage)}" placeholder="/uploads/home/floating-contact/floating-action-icon.webp" maxlength="255" data-maxlength="255" />
                <button
                  type="button"
                  class="btn btn-outline-primary btn-upload-image"
@@ -363,38 +365,10 @@
      });
    };

-    const ensureLengthHint = (input) => {
-      if (!input || !input.dataset.maxlength) {
-        return;
-      }
-
-      let hint = input.parentElement?.querySelector(".floating-contact-length-hint");
-      if (!hint) {
-        hint = document.createElement("small");
-        hint.className = "text-muted d-block mt-1 floating-contact-length-hint";
-        input.parentElement?.appendChild(hint);
-      }
-
-      const max = Number(input.dataset.maxlength);
-      const length = input.value.length;
-      hint.textContent = `${length}/${max} characters`;
-      hint.classList.toggle("text-danger", length >= max);
-    };
-
-    const bindLengthHints = (scope = document) => {
-      scope.querySelectorAll("input[data-maxlength]").forEach((input) => {
-        ensureLengthHint(input);
-        if (input.dataset.lengthBound === "true") {
-          return;
-        }
-
-        input.addEventListener("input", () => ensureLengthHint(input));
-        input.dataset.lengthBound = "true";
-      });
-    };
-
    const bindActionCard = (card) => {
-      bindLengthHints(card);
+      if (typeof initHomeCharacterCounters === "function") {
+        initHomeCharacterCounters(card);
+      }
      bindImageField(
        card.querySelector(".floating-contact-action-icon-image"),
        card.querySelector(".floating-contact-action-icon-preview"),
@@ -475,7 +449,6 @@
    }

    renderInitialActions();
-    bindLengthHints(document);
  });

  window.homeScrapers.floatingContact = () => {
--- a/views/admin/home/sections/hero.ejs
+++ b/views/admin/home/sections/hero.ejs
@@ -20,11 +20,12 @@
            <div class="col-lg-6">
              <label class="form-label fw-medium">Fallback Background Image</label>
              <small class="text-muted d-block mb-1">
-                Tùy chọn dự phòng. Homepage hiện ưu tiên ảnh của từng slide.
+                Tùy chọn dự phòng. Khung hero desktop hiện hiển thị khoảng 1512x544px, nên nên upload ảnh ngang ít nhất 1920x700px.
              </small>
              <div class="input-group mb-2">
                <input type="text" class="form-control" id="heroBackgroundImage"
-                  value="<%= data.hero?.backgroundImage || '' %>" placeholder="/uploads/home/hero-fallback.jpg" />
+                  value="<%= data.hero?.backgroundImage || '' %>" placeholder="/uploads/home/hero-fallback.jpg"
+                  maxlength="255" data-maxlength="255" />
                <button type="button" class="btn btn-outline-primary btn-upload-image"
                  data-target-input="heroBackgroundImage" data-image-type="home">
                  <i class="fas fa-upload me-1"></i>Upload
@@ -95,25 +96,28 @@
                    <div class="col-md-6">
                      <label class="form-label fw-medium">Title</label>
                      <input type="text" class="form-control" id="heroSlide_<%= index %>_title"
-                        value="<%= slide.title || '' %>" placeholder="e.g., From Application to Visa" />
+                        value="<%= slide.title || '' %>" placeholder="e.g., From Application to Visa"
+                        maxlength="72" data-maxlength="72" />
                    </div>
                    <div class="col-md-6">
                      <label class="form-label fw-medium">Subtitle</label>
                      <small class="text-muted d-block mb-1">Hiện không render ngoài frontend, chỉ giữ để tương thích dữ liệu cũ.</small>
                      <input type="text" class="form-control" id="heroSlide_<%= index %>_subtitle"
-                        value="<%= slide.subtitle || '' %>" placeholder="e.g., Global Education Simplified" />
+                        value="<%= slide.subtitle || '' %>" placeholder="e.g., Global Education Simplified"
+                        maxlength="48" data-maxlength="48" />
                    </div>
                    <div class="col-md-12">
                      <label class="form-label fw-medium">Description</label>
                      <textarea class="form-control" id="heroSlide_<%= index %>_description" rows="3"
-                        placeholder="Enter hero description"><%= slide.description || '' %></textarea>
+                        placeholder="Enter hero description" maxlength="220" data-maxlength="220"><%= slide.description || '' %></textarea>
                    </div>
                    <div class="col-md-6">
                      <label class="form-label fw-medium">Slide Background Image</label>
-                      <small class="text-muted d-block mb-1">Ảnh này đang được dùng làm nền full hero. Khuyến nghị ảnh ngang lớn hoặc GIF nếu cần.</small>
+                      <small class="text-muted d-block mb-1">Ảnh này phủ toàn bộ hero. Khung desktop hiện khoảng 1512x544px, khuyến nghị upload 1920x700px hoặc lớn hơn.</small>
                      <div class="input-group mb-2">
                        <input type="text" class="form-control" id="heroSlide_<%= index %>_heroImage"
-                          value="<%= slide.heroImage || '' %>" placeholder="/uploads/home/hero-slide-01.jpg" />
+                          value="<%= slide.heroImage || '' %>" placeholder="/uploads/home/hero-slide-01.jpg"
+                          maxlength="255" data-maxlength="255" />
                        <button type="button" class="btn btn-outline-primary btn-upload-image"
                          data-target-input="heroSlide_<%= index %>_heroImage" data-image-type="home">
                          <i class="fas fa-upload me-1"></i>Upload
@@ -130,7 +134,8 @@
                      <label class="form-label fw-medium">Video URL</label>
                      <small class="text-muted d-block mb-1">Frontend hiện không render video trong hero. Giữ lại chỉ để tránh mất dữ liệu cũ.</small>
                      <input type="text" class="form-control" id="heroSlide_<%= index %>_videoUrl"
-                        value="<%= slide.videoUrl || '' %>" placeholder="Không bắt buộc" />
+                        value="<%= slide.videoUrl || '' %>" placeholder="Không bắt buộc"
+                        maxlength="255" data-maxlength="255" />
                    </div>

                    <!-- Primary Button -->
@@ -143,12 +148,14 @@
                          <div class="col-md-12">
                            <label class="form-label fw-medium">Label</label>
                            <input type="text" class="form-control" id="heroSlide_<%= index %>_primaryLabel"
-                              value="<%= slide.primaryButton?.label || '' %>" placeholder="e.g., Apply now" />
+                              value="<%= slide.primaryButton?.label || '' %>" placeholder="e.g., Apply now"
+                              maxlength="32" data-maxlength="32" />
                          </div>
                          <div class="col-md-12">
                            <label class="form-label fw-medium">Link</label>
                            <input type="text" class="form-control" id="heroSlide_<%= index %>_primaryHref"
-                              value="<%= slide.primaryButton?.href || '' %>" placeholder="/contact" />
+                              value="<%= slide.primaryButton?.href || '' %>" placeholder="/contact"
+                              maxlength="255" data-maxlength="255" />
                          </div>
                        </div>
                      </div>
@@ -165,12 +172,14 @@
                            <label class="form-label fw-medium">Label</label>
                            <input type="text" class="form-control" id="heroSlide_<%= index %>_secondaryLabel"
                              value="<%= slide.secondaryButton?.label || '' %>"
-                              placeholder="e.g., Book Free Consultation" />
+                              placeholder="e.g., Book Free Consultation"
+                              maxlength="32" data-maxlength="32" />
                          </div>
                          <div class="col-md-12">
                            <label class="form-label fw-medium">Link</label>
                            <input type="text" class="form-control" id="heroSlide_<%= index %>_secondaryHref"
-                              value="<%= slide.secondaryButton?.href || '' %>" placeholder="/contact" />
+                              value="<%= slide.secondaryButton?.href || '' %>" placeholder="/contact"
+                              maxlength="255" data-maxlength="255" />
                          </div>
                        </div>
                      </div>
@@ -306,6 +315,9 @@

      container.appendChild(clone);
      updateLabels();
+      if (typeof initHomeCharacterCounters === "function") {
+        initHomeCharacterCounters(clone);
+      }
    });

    container.addEventListener("click", (e) => {
@@ -330,5 +342,8 @@

    // Initial normalization (in case indices rendered from server are not 0..n)
    updateLabels();
+    if (typeof initHomeCharacterCounters === "function") {
+      initHomeCharacterCounters(container);
+    }
  });
 </script>
--- a/views/admin/home/sections/partners.ejs
+++ b/views/admin/home/sections/partners.ejs
@@ -10,6 +10,7 @@
          </h6>
        </div>
        <div class="card-body">
+          <small class="text-muted d-block mb-3">Award icons trên homepage hiển thị khoảng 124x124px. Khuyến nghị upload ảnh vuông hoặc logo nền trong suốt tối thiểu 248x248px.</small>
          <div id="visaConsultancyContainer">
            <% for(let i=0; i<4; i++) { 
                 const item = (data.partners?.visaConsultancy?.items && data.partners.visaConsultancy.items[i]) || {};
@@ -22,16 +23,17 @@
                  <div class="row g-3">
                    <div class="col-md-8">
                      <label class="form-label fw-medium">Award Name</label>
-                      <input type="text" class="form-control visa-name" value="<%= item.name || '' %>" placeholder="Award Name" />
+                      <input type="text" class="form-control visa-name" id="visaName_<%= i %>" value="<%= item.name || '' %>" placeholder="Award Name" maxlength="48" data-maxlength="48" />
                    </div>
                    <div class="col-md-4">
                      <label class="form-label fw-medium">Year</label>
-                      <input type="text" class="form-control visa-year" value="<%= item.year || '' %>" placeholder="e.g., 2025" />
+                      <input type="text" class="form-control visa-year" id="visaYear_<%= i %>" value="<%= item.year || '' %>" placeholder="e.g., 2025" maxlength="8" data-maxlength="8" />
                    </div>
                    <div class="col-md-12">
                      <label class="form-label fw-medium">Icon / Logo</label>
+                      <small class="text-muted d-block mb-1">Khuyến nghị ảnh vuông hoặc logo nền trong suốt 248x248px để hiển thị sắc nét.</small>
                      <div class="input-group">
-                        <input type="text" class="form-control visa-icon" id="visaIcon_<%= i %>" value="<%= item.icon || '' %>" />
+                        <input type="text" class="form-control visa-icon" id="visaIcon_<%= i %>" value="<%= item.icon || '' %>" maxlength="255" data-maxlength="255" />
                        <button type="button" class="btn btn-outline-primary btn-upload-image" 
                                data-target-input="visaIcon_<%= i %>" data-image-type="home">
                          <i class="fas fa-upload me-1"></i>Upload
@@ -62,6 +64,7 @@
          </button>
        </div>
        <div class="card-body">
+          <small class="text-muted d-block mb-3">Brand logo trong slider hiện hiển thị khoảng 159x48px. Khuyến nghị dùng SVG hoặc logo ngang nền trong suốt tối thiểu 320x96px.</small>
          <div id="brandPartnersContainer" class="row g-3">
            <% (data.partners?.brands?.items || []).forEach(function(item, index) { %>
              <div class="col-md-4 brand-partner-item">
@@ -74,12 +77,13 @@
                      </button>
                    </div>
                    <div class="input-group input-group-sm">
-                      <input type="text" class="form-control brand-logo-input" id="brandLogo_<%= index %>" value="<%= item.logo || '' %>" />
+                      <input type="text" class="form-control brand-logo-input" id="brandLogo_<%= index %>" value="<%= item.logo || '' %>" maxlength="255" data-maxlength="255" />
                      <button type="button" class="btn btn-outline-primary btn-upload-image" 
                              data-target-input="brandLogo_<%= index %>" data-image-type="home">
                        <i class="fas fa-upload"></i>
                      </button>
                    </div>
+                    <small class="text-muted d-block mt-2">Khuyến nghị SVG hoặc ảnh ngang 320x96px để logo không bị mờ trong slider.</small>
                    <div class="mt-2 text-center preview-container">
                      <img src="<%= item.logo || '' %>" class="img-thumbnail <%= item.logo ? '' : 'd-none' %>" style="height: 50px; object-fit: contain;">
                    </div>
@@ -134,11 +138,12 @@
            </button>
          </div>
          <div class="input-group input-group-sm">
-            <input type="text" class="form-control brand-logo-input" id="${id}">
+            <input type="text" class="form-control brand-logo-input" id="${id}" maxlength="255" data-maxlength="255">
            <button type="button" class="btn btn-outline-primary btn-upload-image" data-target-input="${id}" data-image-type="home">
              <i class="fas fa-upload"></i>
            </button>
          </div>
+          <small class="text-muted d-block mt-2">Khuyến nghị SVG hoặc ảnh ngang 320x96px để logo không bị mờ trong slider.</small>
          <div class="mt-2 text-center preview-container">
            <img src="" class="img-thumbnail d-none" style="height: 50px; object-fit: contain;">
          </div>
@@ -146,5 +151,8 @@
      </div>
    `;
    container.appendChild(div);
+    if (typeof initHomeCharacterCounters === "function") {
+      initHomeCharacterCounters(div);
+    }
  }
-</script>
+</script>
--- a/views/admin/home/sections/testimonials.ejs
+++ b/views/admin/home/sections/testimonials.ejs
@@ -14,23 +14,27 @@
            <div class="col-md-6">
              <label class="form-label fw-medium">Heading</label>
              <input type="text" class="form-control" id="testimonialsHeading"
-                value="<%= data.testimonials?.heading || '' %>" placeholder="e.g., Student Reviews & Testimonials" />
+                value="<%= data.testimonials?.heading || '' %>" placeholder="e.g., Student Reviews & Testimonials"
+                maxlength="64" data-maxlength="64" />
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Subheading</label>
              <input type="text" class="form-control" id="testimonialsSubheading"
-                value="<%= data.testimonials?.subheading || '' %>" placeholder="e.g., What Our Students Say" />
+                value="<%= data.testimonials?.subheading || '' %>" placeholder="e.g., What Our Students Say"
+                maxlength="40" data-maxlength="40" />
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Video URL</label>
              <input type="text" class="form-control" id="testimonialsVideoUrl"
-                value="<%= data.testimonials?.videoUrl || '' %>" placeholder="https://www.youtube.com/watch?v=..." />
+                value="<%= data.testimonials?.videoUrl || '' %>" placeholder="https://www.youtube.com/watch?v=..."
+                maxlength="255" data-maxlength="255" />
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Video Thumbnail</label>
+              <small class="text-muted d-block mb-1">Khung thumbnail desktop hiện khoảng 416x370px. Khuyến nghị upload tối thiểu 832x740px.</small>
              <div class="input-group mb-2">
                <input type="text" class="form-control" id="testimonialsVideoThumbnail"
-                  value="<%= data.testimonials?.videoThumbnail || '' %>" />
+                  value="<%= data.testimonials?.videoThumbnail || '' %>" maxlength="255" data-maxlength="255" />
                <button type="button" class="btn btn-outline-primary btn-upload-image"
                  data-target-input="testimonialsVideoThumbnail" data-image-type="home">
                  <i class="fas fa-upload me-1"></i>Upload
@@ -69,17 +73,20 @@
                  <div class="col-md-6">
                    <label class="form-label fw-medium">Name</label>
                    <input type="text" class="form-control" id="testimonialsName_<%= index %>"
-                      value="<%= item.name || '' %>" placeholder="e.g., Sohel Tanvir" />
+                      value="<%= item.name || '' %>" placeholder="e.g., Sohel Tanvir"
+                      maxlength="48" data-maxlength="48" />
                  </div>
                  <div class="col-md-6">
                    <label class="form-label fw-medium">Role</label>
                    <input type="text" class="form-control" id="testimonialsRole_<%= index %>"
-                      value="<%= item.role || '' %>" placeholder="e.g., Student" />
+                      value="<%= item.role || '' %>" placeholder="e.g., Student"
+                      maxlength="48" data-maxlength="48" />
                  </div>
                  <div class="col-md-6">
                    <label class="form-label fw-medium">Country</label>
                    <input type="text" class="form-control" id="testimonialsCountry_<%= index %>"
-                      value="<%= item.country || '' %>" placeholder="e.g., Canada" />
+                      value="<%= item.country || '' %>" placeholder="e.g., Canada"
+                      maxlength="48" data-maxlength="48" />
                  </div>
                  <div class="col-md-6">
                    <label class="form-label fw-medium">Rating</label>
@@ -89,13 +96,14 @@
                  <div class="col-md-12">
                    <label class="form-label fw-medium">Comment</label>
                    <textarea class="form-control" id="testimonialsComment_<%= index %>" rows="3"
-                      placeholder="Enter testimonial comment"><%= item.comment || '' %></textarea>
+                      placeholder="Enter testimonial comment" maxlength="280" data-maxlength="280"><%= item.comment || '' %></textarea>
                  </div>
                  <div class="col-md-12">
                    <label class="form-label fw-medium">Avatar</label>
+                    <small class="text-muted d-block mb-1">Avatar hiển thị ở khoảng 48x48px. Khuyến nghị ảnh vuông 96x96px hoặc 128x128px.</small>
                    <div class="input-group mb-2">
                      <input type="text" class="form-control" id="testimonialsAvatar_<%= index %>"
-                        value="<%= item.avatar || '' %>" />
+                        value="<%= item.avatar || '' %>" maxlength="255" data-maxlength="255" />
                      <button type="button" class="btn btn-outline-primary btn-upload-image"
                        data-target-input="testimonialsAvatar_<%= index %>" data-image-type="home">
                        <i class="fas fa-upload me-1"></i>Upload
@@ -188,6 +196,9 @@

      container.appendChild(clone);
      updateLabels();
+      if (typeof initHomeCharacterCounters === "function") {
+        initHomeCharacterCounters(clone);
+      }
    });

    container.addEventListener("click", (e) => {
@@ -207,5 +218,8 @@
    });

    updateLabels();
+    if (typeof initHomeCharacterCounters === "function") {
+      initHomeCharacterCounters(container);
+    }
  });
-</script>
+</script>
--- a/views/admin/home/sections/videoGallery.ejs
+++ b/views/admin/home/sections/videoGallery.ejs
@@ -13,18 +13,22 @@
            <div class="col-md-12">
              <label class="form-label fw-medium">Heading</label>
              <input type="text" class="form-control" id="videoGalleryHeading"
-                value="<%= data.videoGallery?.heading || '' %>" placeholder="e.g., VIDEO PLAY GALLERY" />
+                value="<%= data.videoGallery?.heading || '' %>" placeholder="e.g., VIDEO PLAY GALLERY"
+                maxlength="32" data-maxlength="32" data-maxwords="4" />
+              <small class="text-muted d-block mt-1">Limit this title to 4 words and 32 characters so it stays readable on the homepage.</small>
            </div>
            <div class="col-md-12">
              <label class="form-label fw-medium">Video URL</label>
              <input type="text" class="form-control" id="videoGalleryVideoUrl"
-                value="<%= data.videoGallery?.videoUrl || '' %>" placeholder="https://example.com/video.mp4" />
+                value="<%= data.videoGallery?.videoUrl || '' %>" placeholder="https://example.com/video.mp4"
+                maxlength="255" data-maxlength="255" />
            </div>
            <div class="col-md-12">
              <label class="form-label fw-medium">Thumbnail Image</label>
+              <small class="text-muted d-block mb-1">If no video is provided, this image fills a desktop area of about 1552x906px. Recommended minimum upload: 1920x1120px.</small>
              <div class="input-group mb-2">
                <input type="text" class="form-control" id="videoGalleryThumbnail"
-                  value="<%= data.videoGallery?.thumbnail || '' %>" />
+                  value="<%= data.videoGallery?.thumbnail || '' %>" maxlength="255" data-maxlength="255" />
                <button type="button" class="btn btn-outline-primary btn-upload-image"
                  data-target-input="videoGalleryThumbnail" data-image-type="home">
                  <i class="fas fa-upload me-1"></i>Upload
@@ -56,4 +60,4 @@
      thumbnail: getVal("videoGalleryThumbnail"),
    };
  };
-</script>
+</script>
--- a/views/admin/home/sections/visaCountries.ejs
+++ b/views/admin/home/sections/visaCountries.ejs
@@ -14,17 +14,19 @@
            <div class="col-md-6">
              <label class="form-label fw-medium">Heading</label>
              <input type="text" class="form-control" id="visaCountriesHeading"
-                value="<%= data.visaCountries?.heading || '' %>" placeholder="e.g., Visa & VISAWAY Services To UK" />
+                value="<%= data.visaCountries?.heading || '' %>" placeholder="e.g., Visa & VISAWAY Services To UK"
+                maxlength="88" data-maxlength="88" />
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Subheading</label>
              <input type="text" class="form-control" id="visaCountriesSubheading"
-                value="<%= data.visaCountries?.subheading || '' %>" placeholder="e.g., UK. United Kingdom" />
+                value="<%= data.visaCountries?.subheading || '' %>" placeholder="e.g., UK. United Kingdom"
+                maxlength="56" data-maxlength="56" />
            </div>
            <div class="col-md-12">
              <label class="form-label fw-medium">Description</label>
              <textarea class="form-control" id="visaCountriesDescription" rows="3"
-                placeholder="Enter description"><%= data.visaCountries?.description || '' %></textarea>
+                placeholder="Enter description" maxlength="240" data-maxlength="240"><%= data.visaCountries?.description || '' %></textarea>
            </div>
          </div>
        </div>
@@ -52,18 +54,20 @@
                  <div class="col-md-6">
                    <label class="form-label fw-medium">Country Name</label>
                    <input type="text" class="form-control" id="visaCountriesName_0" value="<%= featured.name || '' %>"
-                      placeholder="e.g., United Kingdom" />
+                      placeholder="e.g., United Kingdom" maxlength="40" data-maxlength="40" />
                  </div>
                  <div class="col-md-6">
                    <label class="form-label fw-medium">Country Code</label>
                    <input type="text" class="form-control" id="visaCountriesCode_0" value="<%= featured.code || '' %>"
-                      placeholder="e.g., UK" />
+                      placeholder="e.g., UK" maxlength="12" data-maxlength="12" />
                  </div>
                  <div class="col-md-6">
                    <label class="form-label fw-medium">Flag / Illustration Image</label>
+                    <small class="text-muted d-block mb-1">Khung ảnh desktop hiện khoảng 840x830px. Khuyến nghị ảnh gần vuông, tối thiểu 1000x1000px.</small>
                    <div class="input-group mb-2">
                      <input type="text" class="form-control" id="visaCountriesFlag_0"
-                        value="<%= featured.flag || '' %>" placeholder="/assets/img/home-1/feature/shape.png" />
+                        value="<%= featured.flag || '' %>" placeholder="/assets/img/home-1/feature/shape.png"
+                        maxlength="255" data-maxlength="255" />
                      <button type="button" class="btn btn-outline-primary btn-upload-image"
                        data-target-input="visaCountriesFlag_0" data-image-type="home">
                        <i class="fas fa-upload me-1"></i>Upload
@@ -73,12 +77,12 @@
                  <div class="col-md-6">
                    <label class="form-label fw-medium">Link</label>
                    <input type="text" class="form-control" id="visaCountriesLink_0" value="<%= featured.link || '' %>"
-                      placeholder="/country-details/uk" />
+                      placeholder="/country-details/uk" maxlength="255" data-maxlength="255" />
                  </div>
                  <div class="col-md-12">
                    <label class="form-label fw-medium">Visa Types (comma-separated)</label>
                    <textarea class="form-control" id="visaCountriesVisaTypes_0" rows="2"
-                      placeholder="e.g., Student Visa, Work Visa, Tourist Visa"><%= (featured.visaTypes || []).join(', ') %></textarea>
+                      placeholder="e.g., Student Visa, Work Visa, Tourist Visa" maxlength="220" data-maxlength="220"><%= (featured.visaTypes || []).join(', ') %></textarea>
                  </div>
                </div>
              </div>
@@ -100,12 +104,14 @@
            <div class="col-md-6">
              <label class="form-label fw-medium">Label</label>
              <input type="text" class="form-control" id="visaCountriesCtaLabel"
-                value="<%= data.visaCountries?.ctaButton?.label || '' %>" placeholder="e.g., Get Started" />
+                value="<%= data.visaCountries?.ctaButton?.label || '' %>" placeholder="e.g., Get Started"
+                maxlength="32" data-maxlength="32" />
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Link</label>
              <input type="text" class="form-control" id="visaCountriesCtaHref"
-                value="<%= data.visaCountries?.ctaButton?.href || '' %>" placeholder="/contact" />
+                value="<%= data.visaCountries?.ctaButton?.href || '' %>" placeholder="/contact"
+                maxlength="255" data-maxlength="255" />
            </div>
          </div>
        </div>
@@ -142,4 +148,4 @@
      }
    };
  };
-</script>
+</script>
--- a/views/admin/home/sections/visaSolutions.ejs
+++ b/views/admin/home/sections/visaSolutions.ejs
@@ -14,12 +14,14 @@
            <div class="col-md-6">
              <label class="form-label fw-medium">Heading</label>
              <input type="text" class="form-control" id="visaSolutionsHeading"
-                value="<%= data.visaSolutions?.heading || '' %>" placeholder="e.g., Comprehensive Visa Solutions" />
+                value="<%= data.visaSolutions?.heading || '' %>" placeholder="e.g., Comprehensive Visa Solutions"
+                maxlength="64" data-maxlength="64" />
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Subheading</label>
              <input type="text" class="form-control" id="visaSolutionsSubheading"
-                value="<%= data.visaSolutions?.subheading || '' %>" placeholder="e.g., Our Expert Services" />
+                value="<%= data.visaSolutions?.subheading || '' %>" placeholder="e.g., Our Expert Services"
+                maxlength="40" data-maxlength="40" />
            </div>
          </div>
        </div>
@@ -53,22 +55,25 @@
                      <div class="col-md-3">
                        <label class="form-label fw-medium">Number</label>
                        <input type="text" class="form-control" id="visaSolutionsNumber_<%= index %>"
-                          value="<%= item.number || '' %>" placeholder="e.g., 01" />
+                          value="<%= item.number || '' %>" placeholder="e.g., 01"
+                          maxlength="4" data-maxlength="4" />
                      </div>
                      <div class="col-md-9">
                        <label class="form-label fw-medium">Title</label>
                        <input type="text" class="form-control" id="visaSolutionsTitle_<%= index %>"
-                          value="<%= item.title || '' %>" placeholder="e.g., Student Visa Guidance" />
+                          value="<%= item.title || '' %>" placeholder="e.g., Student Visa Guidance"
+                          maxlength="56" data-maxlength="56" />
                      </div>
                      <div class="col-md-12">
                        <label class="form-label fw-medium">Description</label>
                        <textarea class="form-control" id="visaSolutionsDescription_<%= index %>" rows="2"
-                          placeholder="Enter description"><%= item.description || '' %></textarea>
+                          placeholder="Enter description" maxlength="180" data-maxlength="180"><%= item.description || '' %></textarea>
                      </div>
                      <div class="col-md-12">
                        <label class="form-label fw-medium">Link</label>
                        <input type="text" class="form-control" id="visaSolutionsLink_<%= index %>"
-                          value="<%= item.link || '' %>" placeholder="/service-details" />
+                          value="<%= item.link || '' %>" placeholder="/service-details"
+                          maxlength="255" data-maxlength="255" />
                      </div>
                    </div>
                  </div>
@@ -134,4 +139,4 @@

    updateLabels();
  });
-</script>
+</script>
--- a/views/admin/home/sections/whyChooseUs.ejs
+++ b/views/admin/home/sections/whyChooseUs.ejs
@@ -15,23 +15,26 @@
              <label class="form-label fw-medium">Heading</label>
              <input type="text" class="form-control" id="whyChooseUsHeading"
                value="<%= data.whyChooseUs?.heading || '' %>"
-                placeholder="e.g., Turning Study Abroad Dreams Into Reality" />
+                placeholder="e.g., Turning Study Abroad Dreams Into Reality"
+                maxlength="72" data-maxlength="72" />
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Subheading</label>
              <input type="text" class="form-control" id="whyChooseUsSubheading"
-                value="<%= data.whyChooseUs?.subheading || '' %>" placeholder="e.g., About Our Consultancy" />
+                value="<%= data.whyChooseUs?.subheading || '' %>" placeholder="e.g., About Our Consultancy"
+                maxlength="48" data-maxlength="48" />
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Highlight Word (Optional)</label>
              <input type="text" class="form-control" id="whyChooseUsHighlightWord"
-                value="<%= data.whyChooseUs?.highlightWord || '' %>" placeholder="e.g., Dreams" />
+                value="<%= data.whyChooseUs?.highlightWord || '' %>" placeholder="e.g., Dreams"
+                maxlength="24" data-maxlength="24" />
              <small class="text-muted">This word in the heading will be wrapped in a colored span.</small>
            </div>
            <div class="col-md-12">
              <label class="form-label fw-medium">Description</label>
              <textarea class="form-control" id="whyChooseUsDescription" rows="3"
-                placeholder="Enter description"><%= data.whyChooseUs?.description || '' %></textarea>
+                placeholder="Enter description" maxlength="260" data-maxlength="260"><%= data.whyChooseUs?.description || '' %></textarea>
            </div>
          </div>
        </div>
@@ -50,10 +53,11 @@
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label fw-medium">Main Image</label>
-              <small class="text-muted d-block mb-1">Recommended size: 375x419px</small>
+              <small class="text-muted d-block mb-1">Khung desktop hiện khoảng 318x347px. Khuyến nghị upload ít nhất 750x820px, tỉ lệ dọc khoảng 0.91:1.</small>
              <div class="input-group mb-2">
                <input type="text" class="form-control" id="whyChooseUsMainImage"
-                  value="<%= data.whyChooseUs?.mainImage || '' %>" placeholder="/assets/img/home-1/about/about-1.jpg" />
+                  value="<%= data.whyChooseUs?.mainImage || '' %>" placeholder="/assets/img/home-1/about/about-1.jpg"
+                  maxlength="255" data-maxlength="255" />
                <button type="button" class="btn btn-outline-primary btn-upload-image"
                  data-target-input="whyChooseUsMainImage" data-image-type="home">
                  <i class="fas fa-upload me-1"></i>Upload
@@ -69,11 +73,12 @@

            <div class="col-md-6">
              <label class="form-label fw-medium">Secondary Image</label>
-              <small class="text-muted d-block mb-1">Recommended size: 376x394px</small>
+              <small class="text-muted d-block mb-1">Khung desktop hiện khoảng 363x380px. Khuyến nghị upload ít nhất 760x800px, tỉ lệ dọc khoảng 0.95:1.</small>
              <div class="input-group mb-2">
                <input type="text" class="form-control" id="whyChooseUsSecondaryImage"
                  value="<%= data.whyChooseUs?.secondaryImage || '' %>"
-                  placeholder="/assets/img/home-1/about/about-02.jpg" />
+                  placeholder="/assets/img/home-1/about/about-02.jpg"
+                  maxlength="255" data-maxlength="255" />
                <button type="button" class="btn btn-outline-primary btn-upload-image"
                  data-target-input="whyChooseUsSecondaryImage" data-image-type="home">
                  <i class="fas fa-upload me-1"></i>Upload
@@ -108,9 +113,10 @@
                <div class="row g-3">
                  <div class="col-md-6">
                    <label class="form-label fw-medium">Icon URL</label>
+                    <small class="text-muted d-block mb-1">Icon hiển thị ở khoảng 24x24px. Khuyến nghị dùng SVG hoặc ảnh vuông 48x48px.</small>
                    <div class="input-group mb-2">
                      <input type="text" class="form-control" id="whyChooseUsIcon_<%= index %>"
-                        value="<%= item.icon || '' %>" />
+                        value="<%= item.icon || '' %>" maxlength="255" data-maxlength="255" />
                      <button type="button" class="btn btn-outline-primary btn-upload-image"
                        data-target-input="whyChooseUsIcon_<%= index %>" data-image-type="home">
                        <i class="fas fa-upload me-1"></i>Upload
@@ -120,12 +126,14 @@
                  <div class="col-md-6">
                    <label class="form-label fw-medium">Title</label>
                    <input type="text" class="form-control" id="whyChooseUsTitle_<%= index %>"
-                      value="<%= item.title || '' %>" placeholder="e.g., Global Reach" />
+                      value="<%= item.title || '' %>" placeholder="e.g., Global Reach"
+                      maxlength="40" data-maxlength="40" />
                  </div>
                  <div class="col-md-12">
                    <label class="form-label fw-medium">Description</label>
                    <input type="text" class="form-control" id="whyChooseUsItemDescription_<%= index %>"
-                      value="<%= item.description || '' %>" placeholder="e.g., Expanding Opportunities Worldwide" />
+                      value="<%= item.description || '' %>" placeholder="e.g., Expanding Opportunities Worldwide"
+                      maxlength="72" data-maxlength="72" />
                  </div>
                </div>
              </div>
@@ -148,7 +156,7 @@
            <div class="mb-3">
              <label class="form-label fw-medium">Feature <%= index + 1 %></label>
              <input type="text" class="form-control" id="whyChooseUsFeature_<%= index %>" value="<%= feature %>"
-                placeholder="Enter feature" />
+                placeholder="Enter feature" maxlength="96" data-maxlength="96" />
            </div>
            <% }); %>
        </div>
@@ -168,12 +176,14 @@
            <div class="col-md-6">
              <label class="form-label fw-medium">Label</label>
              <input type="text" class="form-control" id="whyChooseUsCtaLabel"
-                value="<%= data.whyChooseUs?.ctaButton?.label || '' %>" placeholder="e.g., Get Started" />
+                value="<%= data.whyChooseUs?.ctaButton?.label || '' %>" placeholder="e.g., Get Started"
+                maxlength="32" data-maxlength="32" />
            </div>
            <div class="col-md-6">
              <label class="form-label fw-medium">Link</label>
              <input type="text" class="form-control" id="whyChooseUsCtaHref"
-                value="<%= data.whyChooseUs?.ctaButton?.href || '' %>" placeholder="/about" />
+                value="<%= data.whyChooseUs?.ctaButton?.href || '' %>" placeholder="/about"
+                maxlength="255" data-maxlength="255" />
            </div>
          </div>
        </div>
@@ -230,4 +240,4 @@
      },
    };
  };
-</script>
+</script>