/* =========================================================
   PRACTICE.CSS
     + suggestBox mặc định display:none (JS show/hide)
     + suggestBox nằm trong flow (position:static) để đẩy nút xuống
     + demo mode khóa pointer-events bằng JS
   ========================================================= */

/* [GIỮ] box-sizing toàn root */
.sd-hantu-practice-root,
.sd-hantu-practice-root *,
.sd-hantu-practice-root *::before,
.sd-hantu-practice-root *::after{
  box-sizing: border-box;
}

/* [GỘP] root: margin + text-align + chặn tràn */
.sd-hantu-practice-root{
  margin: 20px 0;
  text-align: center;

  width: 100%;
  max-width: 100%;
  overflow: hidden; /* chặn mọi thứ lòi ra ngoài bài viết */

  /* [GIỮ] biến layout (PC) */
  --colW: 520px;     /* chỉnh 460/520/560 tuỳ bạn */
  --gap: 12px;
  --sidePad: 16px;
}

/* [GIỮ] Mobile: full width cột, padding nhỏ lại */
@media (max-width: 640px){
  .sd-hantu-practice-root{
    --colW: 100%;
    --sidePad: 14px;
  }

  /* Mobile: toolbar không overlay, xuống dưới khung + cách ra 1 tí */
  .sd-practice-canvas-wrap .sd-hantu-practice-actions{
    position: static !important;
    transform: none !important;
    left: auto !important;
    bottom: auto !important;

    margin-top: 14px !important;   /* tạo khoảng cách với khung */
    padding: 6px 0 !important;

    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  /* icon to hơn chút cho mobile */
  .sd-practice-canvas-wrap .sd-hantu-practice-actions button{
    width: 44px;
    height: 44px;
  }
}

/* =========================================================
   TOP (Input + Suggest + Button)
   ========================================================= */
.sd-hantu-practice-root .sd-hantu-practice-top{
  width: 100% !important;
  max-width: var(--colW) !important;
  margin-left: auto !important;
  margin-right: auto !important;

  padding-left: var(--sidePad) !important;
  padding-right: var(--sidePad) !important;

  display: flex !important;
  flex-direction: column !important;  /* nút xuống dòng */
  align-items: stretch !important;
  gap: var(--gap) !important;

  position: relative !important;
}

/* input */
.sd-hantu-practice-root .sd-hantu-practice-input{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;

  font-size: 14px;
  text-align: center;

  margin: 0 !important;
  float: none !important;
}
.sd-hantu-practice-root .sd-hantu-practice-input::placeholder{
  text-align: center;
  opacity: 0.75;
}

/* Nút start */
.sd-hantu-practice-root .sd-hantu-practice-start{
  width: auto !important;
  max-width: 100% !important;

  margin-left: auto !important;
  margin-right: auto !important;

  align-self: center !important;

  padding: 9px 16px;
  border: none;
  border-radius: 6px;

  background: #22c55e;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;

  white-space: nowrap !important;
  float: none !important;
}
.sd-hantu-practice-root .sd-hantu-practice-start:hover{
  filter: brightness(0.95);
}

/* =========================================================
   SUGGEST (Flow dropdown)
   ========================================================= */
.sd-hantu-practice-root .sd-hantu-practice-suggest{
  position: static !important;
  width: 100% !important;
  margin-top: 6px !important;
}

.sd-hantu-practice-root .sd-hantu-practice-suggest-list{
  background: #fff !important;
  border: 1px solid #dcdcdc !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.10) !important;

  padding: 6px !important;
  max-height: 260px !important;
  overflow: auto !important;

  text-align: left !important;
}

.sd-hantu-practice-root .sd-hantu-practice-suggest-hint{
  font-size: 13px !important;
  opacity: .75 !important;
  padding: 8px 10px !important;
  border-bottom: 1px solid #eee !important;
  margin-bottom: 6px !important;
}

.sd-hantu-practice-root .sd-hantu-practice-suggest-item{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;

  cursor: pointer !important;
  user-select: none !important;
}
.sd-hantu-practice-root .sd-hantu-practice-suggest-item:hover{
  background: #f5f5f5 !important;
}
.sd-hantu-practice-root .sd-hantu-practice-suggest-hanzi{
  font-size: 22px !important;
  font-weight: 700 !important;
  min-width: 30px !important;
}
.sd-hantu-practice-root .sd-hantu-practice-suggest-pinyin{
  font-size: 14px !important;
  opacity: .75 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* =========================================================
   STAGE (khung viết)
   ========================================================= */
.sd-hantu-practice-root .sd-hantu-practice-stage{
  width: 100% !important;
  max-width: var(--colW) !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding-left: var(--sidePad) !important;
  padding-right: var(--sidePad) !important;

  margin-top: 12px;
}

/* =========================================================
   TARGET (Ô tập viết)
   ========================================================= */
.sd-hantu-practice-root .sd-hantu-practice-target.hantu-char{
  width: 100% !important;
  max-width: 100% !important;

  aspect-ratio: 1 / 1 !important;
  height: auto !important;

  margin: 0 auto !important;

  background-color: #fff;

  border: 2px solid #d6d6d6;
  border-radius: 12px;

  overflow: hidden;

  background-image:
    linear-gradient(to right,
      transparent 49.5%,
      #efefef 50%,
      transparent 50.5%),
    linear-gradient(to bottom,
      transparent 49.5%,
      #efefef 50%,
      transparent 50.5%);
  background-size: 100% 100%;
  background-repeat: no-repeat;

  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

.sd-hantu-practice-root .sd-hantu-practice-target{
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.sd-hantu-practice-root .sd-hantu-practice-target svg,
.sd-hantu-practice-root .sd-hantu-practice-target canvas{
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* =========================================================
   ACTION BUTTONS (base)
   ========================================================= */
.sd-hantu-practice-actions{
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

/* =========================================================
   HELP / ADMIN (base)  (BẢN DƯỚI - MOBILE)
   ========================================================= */
.sd-hantu-practice-help{
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #f3caca;
  background: #fdeeee;
  border-radius: 8px;
}
.sd-hantu-practice-help h3{
  text-align: center;
  margin: 0 0 10px 0;
}
.sd-hantu-practice-help-box{
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  max-width: 620px;
  margin: 0 auto;
}
.sd-hantu-practice-help-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sd-hantu-practice-help-row2{
  text-align: center;
  margin-top: 10px;
  font-weight: 700;
}
.sd-hantu-practice-help-icon{
  width: 34px;
  height: 34px;
  border: 2px solid #cc1111;
  color: #cc1111;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sd-hantu-practice-help-arrow{ font-weight: 800; }
.sd-hantu-practice-help-image{ text-align: center; }

.sd-practice-adminbox{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px;
  max-width: 720px;
}

/* =========================================================
   DESKTOP LAYOUT (PC 2 cột như mock)
   ========================================================= */

.sd-hantu-practice-root .sd-practice-layout{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sidePad);
}

@media (min-width: 900px){
  .sd-hantu-practice-root{
    text-align: left; /* tránh center toàn trang trên PC */
  }

  .sd-hantu-practice-root .sd-practice-layout{
    display: grid;
    grid-template-columns: minmax(520px, 1fr) minmax(280px, 360px);
    gap: 16px;
    align-items: start;
  }

  .sd-hantu-practice-root .sd-practice-right{
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
  }

  .sd-hantu-practice-root .sd-practice-right .sd-hantu-practice-top{
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .sd-hantu-practice-root .sd-practice-left .sd-hantu-practice-stage{
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ===== PC: NHÉT HƯỚNG DẪN VÀO SIDEBAR (bỏ nền hồng) ===== */
  .sd-hantu-practice-root .sd-hantu-practice-help--side{
    display: block;
    margin-top: 14px;

    /* override bỏ hồng */
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    padding: 12px !important;
    border-radius: 12px !important;
  }
  .sd-hantu-practice-root .sd-hantu-practice-help--side h3{
    margin: 0 0 10px 0 !important;
    font-size: 16px;
  }
  .sd-hantu-practice-root .sd-hantu-practice-help--side .sd-hantu-practice-help-box{
    max-width: 100% !important;
    margin: 0 !important;
    background: transparent !important;
    padding: 0 !important;
  }

  /* Ẩn bản hướng dẫn dưới (bottom) trên PC */
  .sd-hantu-practice-root .sd-hantu-practice-help--bottom{
    display: none;
  }
}

/* Mobile/tablet: stack */
@media (max-width: 899px){
  .sd-hantu-practice-root .sd-practice-layout{
    display: block;
  }
  .sd-hantu-practice-root{
    text-align: center;
  }
  .sd-hantu-practice-root .sd-practice-right{
    margin-top: 14px;
  }

  /* Mobile: chỉ hiện hướng dẫn dưới, ẩn bản sidebar */
  .sd-hantu-practice-root .sd-hantu-practice-help--side{
    display: none;
  }
  .sd-hantu-practice-root .sd-hantu-practice-help--bottom{
    display: block;
  }
}

/* =========================================================
   OVERLAY ICON (SVG) TRONG KHUNG VIẾT
   ========================================================= */

.sd-practice-canvas-wrap{
  position: relative;
}

.sd-practice-canvas-wrap .sd-hantu-practice-actions{
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 5;

  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 0 !important;

  background: rgba(255,255,255,.85);
  backdrop-filter: blur(2px);
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

.sd-practice-canvas-wrap .sd-hantu-practice-actions button{
  width: 40px;
  height: 40px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sd-practice-canvas-wrap .sd-hantu-practice-actions svg{
  display: block;
}