/* ==========================================================================
   widgets.css - Cac khoi sidebar/widget:
   LATEST, RESOURCES, QUOTE OF THE WEEK, Newsletter, Picture of the week,
   Categories (dropdown). Dung chung vo .ec-widget cho moi khoi.
   ========================================================================== */

/* ---------- Vo widget chung ---------- */
.ec-widget {
  margin-bottom: var(--ec-space-8);
}

.ec-widget:last-child { margin-bottom: 0; }

/* Tieu de widget - chu in hoa, font condensed */
.ec-widget__title {
  margin: 0 0 var(--ec-space-3);
  font-family: var(--ec-font-ui);
  font-size: var(--ec-fs-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ec-navy);   /* F15 - tieu de khoi mau navy (15.27:1 tren trang) */
}

/* Bien the tieu de can giua (dung cho Picture of the week) */
.ec-widget__title--center { text-align: center; }

/* Duong ke duoi tieu de */
.ec-widget__title--ruled {
  padding-bottom: var(--ec-space-2);
  border-bottom: var(--ec-rule-width) solid var(--ec-rule);
}

.ec-widget__body > *:last-child { margin-bottom: 0; }

/* ---------- Danh sach link chung (RESOURCES, chuyen muc con...) ---------- */
.ec-widget__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--ec-font-ui);
  font-size: var(--ec-fs-base);
}

.ec-widget__list-item + .ec-widget__list-item {
  margin-top: var(--ec-space-2);
}

.ec-widget__list-link {
  color: var(--ec-link);
}

/* ---------- LATEST: danh sach bai kem thumbnail vuong nho ---------- */
.ec-latest__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ec-latest__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--ec-space-2);
  align-items: start;
  padding-block: var(--ec-space-3);
  border-bottom: var(--ec-rule-width) solid var(--ec-border);
}

.ec-latest__item:last-child { border-bottom: 0; }

.ec-latest__thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
}

/* O trong khi bai chua co anh dai dien */
.ec-latest__thumb--empty {
  background-color: var(--ec-surface-alt);
  border: var(--ec-rule-width) solid var(--ec-border);
}

.ec-latest__title {
  margin: 0;
  font-family: var(--ec-font-ui);
  font-size: var(--ec-fs-sm);
  font-weight: 500;
  line-height: var(--ec-lh-snug);
}

.ec-latest__link { color: var(--ec-link); }

.ec-latest__date {
  display: block;
  color: var(--ec-meta);
  font-size: var(--ec-fs-xs);
}

/* ---------- QUOTE OF THE WEEK ----------
   F5: bo khung vien, bo nen, bo duong ke doc (border-left) - trich dan tran
   nhu PDF goc trang 1 (chu in nghieng, tac gia can phai). */
.ec-quote {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.ec-quote__text {
  margin: 0;
  font-family: var(--ec-font-body);
  font-size: var(--ec-fs-md);
  font-style: italic;
  line-height: var(--ec-lh-snug);
  color: var(--ec-text);
}

.ec-quote__cite {
  display: block;
  margin-top: var(--ec-space-2);
  color: var(--ec-meta);
  font-family: var(--ec-font-ui);
  font-size: var(--ec-fs-sm);
  font-style: normal;
  text-align: right;
}

/* ---------- Newsletter (chua co backend mail, chi style) ----------
   F6 (SPEC 10.3): label an bang .ec-sr-only (khong con .ec-newsletter__label),
   input full-width, nut Subscribe navy full-width xep doc duoi input. */
.ec-newsletter__form {
  display: grid;
  gap: var(--ec-space-2);
}

.ec-newsletter__field, .newsletter .wpcf7-text {
  width: 100%;
  padding: var(--ec-space-2) var(--ec-space-3);
  border: var(--ec-rule-width) solid var(--ec-border-strong);
  background-color: var(--ec-white);
  color: var(--ec-text);
  font-size: var(--ec-fs-sm);
}

.ec-newsletter__field::placeholder, .newsletter .wpcf7-text::placeholder {
  color: var(--ec-meta);
  opacity: 1;
}

.ec-newsletter__submit, .newsletter .wpcf7-submit {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--ec-space-2);
  padding: var(--ec-space-2) var(--ec-space-4);
  border: 0;
  background-color: var(--ec-navy);
  color: var(--ec-on-navy);
  font-family: var(--ec-font-ui);
  font-size: var(--ec-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background-color var(--ec-dur-fast) var(--ec-ease);
}
.newsletter .wpcf7-submit {margin-bottom: 0!important; margin-top: 10px;
}
.newsletter p {margin-bottom: 0}

.ec-newsletter__submit:hover {
  background-color: var(--ec-blue);
}

.ec-newsletter__submit svg {
  width: var(--ec-icon-sm);
  height: var(--ec-icon-sm);
  fill: currentColor;
}

/* ---------- Picture of the week ---------- */
.ec-potw__figure {
  margin: 0;
}

.ec-potw__image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.ec-potw__caption {
  padding-top: var(--ec-space-2);
  color: var(--ec-meta);
  font-family: var(--ec-font-ui);
  font-size: var(--ec-fs-sm);
  text-align: center;
}

/* ---------- Categories: select gon (WordPress in ra <select>) ---------- */
.ec-catdrop {
  display: grid;
  gap: var(--ec-space-2);
}

.ec-catdrop__select,
.ec-catdrop select {
  width: 100%;
  padding: var(--ec-space-2) var(--ec-space-3);
  border: var(--ec-rule-width) solid var(--ec-border-strong);
  background-color: var(--ec-white);
  color: var(--ec-text);
  font-family: var(--ec-font-ui);
  font-size: var(--ec-fs-sm);
}

/* ---------- Danh sach chuyen muc con phan cach bang "|" ---------- */
.ec-subcats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ec-space-2) var(--ec-space-3);
  margin: 0 0 var(--ec-space-5);
  padding: 0;
  list-style: none;
  font-family: var(--ec-font-ui);
  font-size: var(--ec-fs-base);
}

.ec-subcats__item + .ec-subcats__item::before {
  content: "|";
  margin-right: var(--ec-space-3);
  color: var(--ec-meta);
}

.ec-subcats__link { color: var(--ec-link); }

/* Sub-category dang xem: chi in dam, khong gach chan (user chot 2026-07-27) */
.ec-subcats__item.is-active .ec-subcats__link {
  font-weight: 700;
  text-decoration: none;
}

/* ---------- Widget Calendar (F9) ----------
   Markup do WordPress in ra (get_calendar): .wp-calendar-table + .wp-calendar-nav.
   Style cho cot bien hep: full-width, chu nho, font UI, khong tran. */
.ec-widget .wp-calendar-table,
.wp-calendar-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ec-font-ui);
  font-size: var(--ec-fs-sm);
  line-height: var(--ec-lh-snug);
  table-layout: fixed;
}

.wp-calendar-table caption {
  padding-bottom: var(--ec-space-2);
  color: var(--ec-navy);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wp-calendar-table th,
.wp-calendar-table td {
  padding: var(--ec-space-1);
  text-align: center;
  border: var(--ec-rule-width) solid var(--ec-border);
}

.wp-calendar-table thead th {
  color: var(--ec-meta);
  font-weight: 700;
  text-transform: uppercase;
}

/* O trong dau/cuoi thang: khong ke vien cho gon */
.wp-calendar-table td.pad {
  border: 0;
}

/* Ngay co bai dang: to dam, link navy */
.wp-calendar-table td a {
  display: block;
  color: var(--ec-link);
  font-weight: 700;
  text-decoration: none;
}

.wp-calendar-table td a:hover,
.wp-calendar-table td a:focus {
  text-decoration: underline;
}

/* Ngay hom nay: nen navy, chu trang dam (user chot 2026-08-12) */
.wp-calendar-table td#today {
  background-color: var(--ec-navy);
  color: var(--ec-white);
  font-weight: 700;
}

/* Ngay hom nay ma co bai dang: link giu mau trang de doc duoc tren nen navy */
.wp-calendar-table td#today a,
.wp-calendar-table td#today a:hover,
.wp-calendar-table td#today a:focus {
  color: var(--ec-white);
}

/* Thanh dieu huong thang truoc/sau */
.wp-calendar-nav {
  display: flex;
  justify-content: space-between;
  margin-top: var(--ec-space-2);
  font-family: var(--ec-font-ui);
  font-size: var(--ec-fs-sm);
}

.wp-calendar-nav .pad {
  color: var(--ec-meta);
}

.wp-calendar-nav a {
  color: var(--ec-link);
}

/* ---------- Form lien he tinh (F14) ----------
   Markup do Agent Dev tao (SPEC 10.6, F14). Neu ten class khac -> bao lai.
   Gia dinh dung: .ec-form, .ec-form__field, .ec-form__label,
   .ec-form__input, .ec-form__submit. Form xep doc, input full-width co vien,
   nut Gui navy full-width, responsive. */
.ec-form {
  display: grid;
  gap: var(--ec-space-4);
  max-width: 640px;
}

.ec-form__field {
  display: grid;
  gap: var(--ec-space-2);
}

.ec-form__label {
  font-family: var(--ec-font-ui);
  font-size: var(--ec-fs-sm);
  font-weight: 700;
  color: var(--ec-text);
}

.ec-form__input,
.ec-form textarea.ec-form__input {
  width: 100%;
  padding: var(--ec-space-2) var(--ec-space-3);
  border: var(--ec-rule-width) solid var(--ec-border-strong);
  background-color: var(--ec-white);
  color: var(--ec-text);
  font-family: var(--ec-font-body);
  font-size: var(--ec-fs-base);
}

.ec-form textarea.ec-form__input {
  min-height: 8rem;
  resize: vertical;
}

.ec-form__input::placeholder {
  color: var(--ec-meta);
  opacity: 1;
}

.ec-form__submit {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: var(--ec-space-2);
  padding: var(--ec-space-3) var(--ec-space-4);
  border: 0;
  background-color: var(--ec-navy);
  color: var(--ec-on-navy);
  font-family: var(--ec-font-ui);
  font-size: var(--ec-fs-md);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background-color var(--ec-dur-fast) var(--ec-ease);
}

.ec-form__submit:hover {
  background-color: var(--ec-blue);
}

@media (min-width: 768px) {
  /* Nut Gui khong can keo het chieu ngang tren man rong */
  .ec-form__submit {
    width: auto;
    justify-self: start;
  }
}