/* General styling for the dictation lesson container */
.elementor-shortcode {
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Thêm shadow cho container */
    background-color: #ffffff; /* Adjust to match your theme */
    margin: 0 auto;   /* Center the plugin content */
}

/* Video wrapper - Aspect ratio for embedded video */
.elementor-shortcode.video-wrapper {
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

/* Styling for iframe to fill video wrapper */
.elementor-shortcode iframe {
    position: absolute;
	border-radius: 5px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Styling for the toggle video button */
.elementor-shortcode #btn-toggle-video {
    background-color: transparent; /* Không có nền */
    border: 1px solid #ddd; /* Có border */
    padding: 5px 10px;
	color: #000;
	margin-bottom: 10px;
	font-weight: 300;
    border-radius: 4px;
    font-size: 0.875rem;
}


/* General Button Styles */
.elementor-shortcode .btn {
    cursor: pointer; /* Pointer cursor for buttons */
}

/* Left arrow button (Back) */
.elementor-shortcode #btn-arrow-left {
    background-image: url('https://www.tuhoctienghan.vn/wp-content/uploads/2024/12/icons8-previous-50.png');
    background-repeat: no-repeat;
    background-size: 16px 16px; /* Icon size */
    background-position: center;
    background-color: transparent; /* Transparent background */
    border: none; /* No border */
}

/* Right arrow button (Next) */
.elementor-shortcode #btn-arrow-right {
    background-image: url('https://www.tuhoctienghan.vn/wp-content/uploads/2024/12/icons8-next-50.png');
    background-repeat: no-repeat;
    background-size: 16px 16px; /* Icon size */
    background-position: center;
    background-color: transparent; /* Transparent background */
    border: none; /* No border */
}


/* Styling for the current segment display */
.elementor-shortcode #current-segment {
    cursor: pointer;
    font-weight: bold;
}

/* Styling for the play button (Nghe lại) */
.elementor-shortcode #btn-play {
    background-color: transparent; /* Không có nền */
    border: 1px solid #ddd; /* Có border */
    color: #28a745; /* Màu chữ là den */
    border-radius: 4px;
	font-weight: 300;
    margin-left: 15px;
    padding: 5px 10px;
}

.elementor-shortcode #btn-play i {
    margin-right: 5px;
}

/* Dictation input area styling */
.elementor-shortcode .dictation__input-container {
    margin-top: 15px;
}

.elementor-shortcode .dictation__input {
    height: 70px !important;
    width: 100%;
    padding: 8px;
    font-size: 1rem;
	margin-top: 10px
    border-radius: 4px;
    border: 1px solid #ccc;
    resize: vertical;
}

/* Styling for the Check button (Kiểm tra) */
.elementor-shortcode #btn-check {
    background-color: #28a745 !important; /* xanh lá */
  border: 1px solid #28a745 !important;
  color: #fff !important;
  font-weight: 400;
  border-radius: 4px;
  padding: 6px 16px;
  font-size: 0.95rem;
  transition: background-color 0.2s ease;
}

#btn-check:hover {
  background-color: #218838 !important;
  border-color: #1e7e34 !important;
}

/* Ẩn banner "More Videos" xuất hiện khi video dừng */
.ytp-ce-element,  /* Che video đề xuất ở cuối */
.ytp-ce-covering-overlay, /* Che lớp phủ đề xuất */
.ytp-endscreen-content { 
    display: none !important;
}

/* Ẩn overlay quảng cáo & đề xuất */
.ytp-pause-overlay {
    display: none !important;
}

/* Styling for the Correct button (Đáp án) */
.elementor-shortcode #btn-correct {
    background-color: #fff !important;
  border: 1px solid #ccc !important;
  color: #000 !important;
  font-weight: 400;
  border-radius: 4px;
  padding: 6px 16px;
  font-size: 0.95rem;
  transition: background-color 0.2s ease;
}
#btn-correct:hover {
  background-color: #f8f9fa !important;
  border-color: #999 !important;
}

/* Styling for the hidden answer */
.elementor-shortcode #answer {
    display: inline-block; /* Keep it inline with buttons */
    font-size: 1rem;       /* Adjust font size */
    color: #000;           /* Text color */
    margin-left: 10px;     /* Space between the answer and buttons */
}

.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    cursor: pointer;
    z-index: 100; /* Đảm bảo nó nằm trên video */
}

.dictation-controls-wrapper {
    width: 100%;
}
.ytp-ce-element, 
.ytp-endscreen-content, 
.ytp-upnext, 
.ytp-cards-teaser { 
    display: none !important; 
}

/* Nhóm nút – luôn ngang */
.dictation-actions{
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap !important;
}

/* Nút không bị co/chiếm 100% */
.dictation-actions .btn{
  flex:0 0 auto !important;
  width:auto !important;
  white-space:nowrap !important;
  padding:.375rem .75rem;           /* trả padding về mức bình thường */
  border-width:1px;                 /* phòng trường hợp bị xoá border */
}

/* Đáp án để cùng hàng cũng không phá layout */
.dictation-answer{
  align-self:center;
  white-space:normal;
  margin-left:12px;
  max-width:60%;
}